HTML Help

romanalbertini · Joined: 05 Sep 2008 Posts: 8

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

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

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;}