menu problem with css and div layer

Forum Home

FAQ

Memberlist

Profile

Register - Not registered yet? Got something to say? Join HTML Code Tutorial!

menu problem with css and div layer

HTML Help Forum Index -> CSS

View previous topic :: View next topic

Author

Message

romanalbertini

Joined: 05 Sep 2008
Posts: 8

Posted: Fri Sep 05, 2008 10:57 am menu problem with css and div layer

i've got the problem that i tried to have a horizontal menu inside a div layer "menu", but it shows me the menu vertically. i have no idea why, cause there is no "br" or "li" or "p" tag in this code.
can someone please point out the problem for me?
here is the index file and the css code:

Code:

<?php
include 'conf/menu.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>____________jungschar_bubendorf+++++__________________________________________________________________________________________________</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="http://www.jungscharbubendorf.ch/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="http://www.jungscharbubendorf.ch/favicon.ico">
</head>
<body>
<div align="left"></div>
<div id="container">
<div id="contentframe">
<div id="top"> </div>
<div id="menu">
   <a id="nav01" href="http://www.jungscharbubendorf.ch/?id=1" target="_parent" title="ueberuns" alt="ueberuns"></a>
<a id="nav02" href="http://www.jungscharbubendorf.ch/?id=2" target="_parent" title="programm" alt="programm"></a>
<a id="nav03" href="http://www.jungscharbubendorf.ch/?id=3" target="_parent" title="gruppen" alt="gruppen"></a>
<a id="nav04" href="http://www.jungscharbubendorf.ch/?id=4" target="_parent" title="lagerevents" alt="lagerevents"></a>
<a id="nav05" href="http://www.jungscharbubendorf.ch/?id=5" target="_parent" title="fotos" alt="fotos"></a>
   <a id="nav06" href="http://www.jungscharbubendorf.ch/?id=6" target="_parent" title="boost" alt="boost"></a>
   <a id="nav07" href="http://www.jungscharbubendorf.ch/?id=7" target="_parent" title="kontakt" alt="kontakt"></a>
</div>
<div id="content">
<?php
   if(isset($_GET['id']) AND isset($menu[$_GET['id']])) {
      include $menu[$_GET['id']];
   }
   else {
      if(!isset($_GET['id'])) { include $menu['1']; }
      else { include $menu['error']; }
   }
?>
</div>
</div>
</div>
</body>
</html>

Code:

body {
margin:0;
padding:0;
}

.standard {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
}

.standardfett {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
font-weight: bold;
}

.standarditalic {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
font-style: italic;
}

.small7pt {
font-family: Arial, Helvetica, sans-serif;
font-size: 7pt;
color: #000000;
}

.standardtitel {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
font-weight: bold;
}

a,
a:link,
a:visited {
font-weight:normal;
color:#000000;
text-decoration:none;
}
a:hover {
font-weight:normal;
color:#000000;
text-decoration:none;
}

#container {
background:#EFBAC6 url(../img/bg.gif) repeat-x;
font-size:0.8em;
height:100%;
left:0px;
margin:0pt;
padding:0pt;
position:absolute;
top:0px;
width:100%;
}

#contentframe {
background:#ffffff;
height:100%;
left:0px;
margin:0pt;
position:absolute;
top:0px;
width:900px;
}

#top {
background: url(../img/top.jpg) no-repeat;
font-size:0.8em;
height:500px;
left:0px;
margin:0pt;
padding:0pt;
position:absolute;
top:0px;
width:900px;
}

#content {
background:transparent;
height:100%;
left:20px;
margin:0pt;
position:absolute;
top:545px;
width:860px;
}

#menu {
background:#cccccc;
height:25px;
left:0px;
margin:0pt;
padding:0pt;
position:absolute;
top:500px;
width:900px;
}

a#nav01,
a#nav01:link,
a#nav01:visited { height:25px; width:129px; display:block; background: url(../img/nav/nav_1-1.gif) no-repeat;}
a#nav01:hover { height:25px; width:129px; display:block; background: url(../img/nav/nav_1-2.gif) no-repeat;}
a#nav01:active { height:25px; width:129px; display:block; background: url(../img/nav/nav_1-2.gif) no-repeat;}

a#nav02,
a#nav02:link,
a#nav02:visited { height:25px; width:128px; display:block; background: url(../img/nav/nav_2-1.gif) no-repeat;}
a#nav02:hover { height:25px; width:128px; display:block; background: url(../img/nav/nav_2-2.gif) no-repeat;}
a#nav02:active { height:25px; width:128px; display:block; background: url(../img/nav/nav_2-2.gif) no-repeat;}

a#nav03,
a#nav03:link,
a#nav03:visited { height:25px; width:129px; display:block; background: url(../img/nav/nav_3-1.gif) no-repeat;}
a#nav03:hover { height:25px; width:129px; display:block; background: url(../img/nav/nav_3-2.gif) no-repeat;}
a#nav03:active { height:25px; width:129px; display:block; background: url(../img/nav/nav_3-2.gif) no-repeat;}

a#nav04,
a#nav04:link,
a#nav04:visited { height:25px; width:128px; display:block; background: url(../img/nav/nav_4-1.gif) no-repeat;}
a#nav04:hover { height:25px; width:128px; display:block; background: url(../img/nav/nav_4-2.gif) no-repeat;}
a#nav04:active { height:25px; width:128px; display:block; background: url(../img/nav/nav_4-2.gif) no-repeat;}

a#nav05,
a#nav05:link,
a#nav05:visited { height:25px; width:129px; display:block; background: url(../img/nav/nav_5-1.gif) no-repeat;}
a#nav05:hover { height:25px; width:129px; display:block; background: url(../img/nav/nav_5-2.gif) no-repeat;}
a#nav05:active { height:25px; width:129px; display:block; background: url(../img/nav/nav_5-2.gif) no-repeat;}

a#nav06,
a#nav06:link,
a#nav06:visited { height:25px; width:128px; display:block; background: url(../img/nav/nav_6-1.gif) no-repeat;}
a#nav06:hover { height:25px; width:128px; display:block; background: url(../img/nav/nav_6-2.gif) no-repeat;}
a#nav06:active { height:25px; width:128px; display:block; background: url(../img/nav/nav_6-2.gif) no-repeat;}

a#nav07,
a#nav07:link,
a#nav07:visited { height:25px; width:129px; display:block; background: url(../img/nav/nav_7-1.gif) no-repeat;}
a#nav07:hover { height:25px; width:129px; display:block; background: url(../img/nav/nav_7-2.gif) no-repeat;}
a#nav07:active { height:25px; width:129px; display:block; background: url(../img/nav/nav_7-2.gif) no-repeat;}

this is what the menu looks like now (but it should be inside the grey horizontal area):

sticks464

Joined: 31 Dec 2006
Posts: 1283

Posted: Fri Sep 05, 2008 1:12 pm

You do not need php to do this menu. Using pure css it can be done like this

css

Code:

* {
margin: 0;
padding: 0;
border: none;
}
body {
margin: 0;
padding: 0;
background: #EFBAC6 url(../img/bg.gif) repeat-x;
font-family: Arial, Helvetica, sans-serif;
}
.small7pt {
font-size: 7pt;
color: #000000;
}
a,
a:link,
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
#container {
background: #fff url(../img/bg.gif) repeat-x;
font-size: 0.8em;
width: 900px;
}
#top {
background: url(../img/top.jpg) no-repeat;
font-size: 0.8em;
height: 500px;
width: 900px;
}
#content {
background: transparent;
width: 860px;
}
#menu {
background: #cccccc;
height: 25px;
width: 100%;
}
#menu a {float:left; margin:0;padding:0;}
#menu a:focus {outline:none;}
a#nav01:hover {background: url(../img/nav/nav_1-2.gif);}
a#nav01:active { background: url(../img/nav/nav_1-2.gif);}
a#nav02:hover {background: url(../img/nav/nav_2-2.gif);}
a#nav02:active {background: url(../img/nav/nav_2-2.gif);}
a#nav03:hover {background: url(../img/nav/nav_3-2.gif);}
a#nav03:active {background: url(../img/nav/nav_3-2.gif);}
a#nav04:hover {background: url(../img/nav/nav_4-2.gif);}
a#nav04:active {background: url(../img/nav/nav_4-2.gif);}
a#nav05:hover {background: url(../img/nav/nav_5-2.gif);}
a#nav05:active {background: url(../img/nav/nav_5-2.gif);}
a#nav06:hover {background: url(../img/nav/nav_6-2.gif);}
a#nav06:active {background: url(../img/nav/nav_6-2.gif);}
a#nav07:hover {background: url(../img/nav/nav_7-2.gif);}
a#nav07:active {background: url(../img/nav/nav_7-2.gif);}

html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="top"> </div>
<div id="menu">
<a id="nav01" href="http://www.jungscharbubendorf.ch/?id=1"><img src="img/nav/nav_1-1.gif" width="129" height="25" title="ueberuns" alt="ueberuns"></a><a id="nav02" href="http://www.jungscharbubendorf.ch/?id=2"><img src="img/nav/nav_2-1.gif" width="128" height="25" title="programm" alt="programm"></a><a id="nav03" href="http://www.jungscharbubendorf.ch/?id=3"><img src="img/nav/nav_3-1.gif" width="129" height="25" title="gruppen" alt="gruppen"></a><a id="nav04" href="http://www.jungscharbubendorf.ch/?id=4"><img src="img/nav/nav_4-1.gif" width="128" height="25" title="lagerevents" alt="lagerevents"></a><a id="nav05" href="http://www.jungscharbubendorf.ch/?id=5"><img src="img/nav/nav_5-1.gif" width="129" height="25" title="fotos" alt="fotos"></a><a id="nav06" href="http://www.jungscharbubendorf.ch/?id=6"><img src="img/nav/nav_6-1.gif" width="128" height="25" title="boost" alt="boost"></a><a id="nav07" href="http://www.jungscharbubendorf.ch/?id=7"><img src="img/nav/nav_7-1.gif" width="129" height="25" title="kontakt" alt="kontakt"></a>
</div>
<div id="content">
</div>
</div>
</body>
</html>

Be aware that pt for font size is for printing, use em, px or %.

romanalbertini

Joined: 05 Sep 2008
Posts: 8

Posted: Fri Sep 05, 2008 1:45 pm

thank you that helped. i still use the same code, but i added the following bit:

Code:

#menu a {float:left; margin:0;padding:0;}
#menu a:focus {outline:none;}

Display posts from previous:

	HTML Help Forum Index -> CSS	All times are GMT - 8 Hours
Page 1 of 1

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Your Ad Here

HOSTING / DESIGN

$1.99 Domain Registration
Cheap Web Hosting
Website Templates

MAKE MONEY

Sell Domain Names
Sell Website Templates

| | | | |