PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
K

CSS menu

Door Kanter van Deurzen op 07-04-2006 22:11
2.447 views
Hoi,

Ik heb een probleempje. Ben een pagina van me aan het omzetten van tabellen naar CSS. Ik heb alleen een probleem met een horizintaal menu. De informatie voor het menu wordt uit een database gehaald door middel van een PHP script. Maar als ik de link's uit de database haald vullen de knoppen automatische het hele scherm.

Ik heb nu:

<div id="wrapper">
<!--Start of header-->
<div id="header">
<h1>titel</h1>
<!--Start of Menu-->
<div id="nav">
<ul
><li>><a href="index3.php?type=<?php echo $button1 ?>"><?php echo $button1 ?></a></li
><li><a href="index3.php?type=<?php echo $button2 ?>" ><?php echo $button2 ?></a></li
><li><a href="index3.php?type=<?php echo $button3 ?>" ><?php echo $button3 ?></a></li
><li><a href="index3.php?type=<?php echo $button4 ?>" ><?php echo $button4 ?></a></li
><li><a href="index3.php?type=<?php echo $button5 ?>" ><?php echo $button5 ?></a></li
></ul>
</div>
<!--End of Menu-->
</div>
<!--End of header-->
<div id="content"></div>
</div>


met als css:


html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

body{
	scrollbar-3dlight-color: #000000;
	scrollbar-arrow-color: #000000;
	scrollbar-base-color: #FFFFFF;
	scrollbar-darkshadow-color: #000000;
	scrollbar-face-color: #FFFFFF;
	scrollbar-highlight-color: #ffffff;
	scrollbar-shadow-color: #ffffff;
	background-color:#CCCCCC;
}

#wrapper{
	width:656px;
	margin:10px auto;
}

#header{
	background-image: url(../1.jpg);
	height: 120px;
	background-repeat:no-repeat;
	overflow:hidden;
}

#header h1{
	float:right;
	margins-top: 25px;
	margin-right: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 33px;
	font-weight: bold;
	color:#FFFFFF;
}

#header #nav{
	border-bottom: 1px solid #FFFFFF;
	margin-top: 73px;
	margin-left: 11px;
}

#header #nav ul{	
	margin: 0; 
	padding: 0;
	background-color:#009900;
	height: 15px;
}

#header #nav ul li{
	display: inline;
	margin: 0px;
	padding: 0;
	width: 30px;
}

#header #nav ul li a{
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-right: 1px solid #000000;
	display: block;
	padding: 2px 10px;
	text-decoration: none; 
	height: 1%;	
	color:#FFFFFF;
}

#content{
	margin:10px 10px auto 0;
	background-color:#FFFFFF;
	border: 1px solid #000000;
}


BvD,
Toby
E
Eris -
07-04-2006 22:15
Post even tussen [.code.] haken gezet...
E
Eris -
07-04-2006 22:17
Ik had het net al gedaan ;)

Werkt het als je het niet uit db haalt wel goed?
Jan Koehoorn
07-04-2006 22:18
Je knoppen vullen het hele scherm omdat een <li> element van nature een block-level element is, hetgeen betekent dat hij altijd op een nieuwe regel begint.

Je kunt dit gedrag uitschakelen met de volgende CSS:


ul {
    list-style-type: none; /* ben je van je bolletjes af */
}

li {
    display: inline; /* geen nieuwe regel beginnen */
}

E
Eris -
07-04-2006 22:22
#header #nav ul li{
display: inline;
}

Dat is er al Dus dat mag het probleem niet zijn:)
Jan Koehoorn
07-04-2006 22:24
Ja, maar die breedte van 30px is niet zo'n goed idee. Haal die weg, dan past het element zich aan aan zijn tekstinhoud.
K
Kanter van Deurzen
07-04-2006 22:25
geprobeerd, maar hielp niet. Verder doet hij het wel goed als ik de info niet uit de database trek.
Jan Koehoorn
07-04-2006 22:25
Tja, dan zou ik zeggen: post eens het stukje code waarmee je die info uit je database trekt?
K
Kanter van Deurzen
07-04-2006 22:27
heb de 30px ook weg gehaald doet nog steeds niets.
K
Kanter van Deurzen
07-04-2006 22:31
Oh, foutje. Mijn snugere colega komt er net achter dat de info niet uit een database komt.

Het gaat hier om

<div id="nav">
<ul
><li><a href="index3.php?type=<?php echo $button1 ?>"><?php echo $button1 ?></a></li
><li><a href="index3.php?type=<?php echo $button2 ?>" ><?php echo $button2 ?></a></li
><li><a href="index3.php?type=<?php echo $button3 ?>" ><?php echo $button3 ?></a></li
><li><a href="index3.php?type=<?php echo $button4 ?>" ><?php echo $button4 ?></a></li
><li><a href="index3.php?type=<?php echo $button5 ?>" ><?php echo $button5 ?></a></li
></ul>
</div>

Reageren

Inloggen om te reageren