menu met float

Status
Niet open voor verdere reacties.
I

iDanny

Nieuwe gebruiker
Lid geworden
20 mei 2010
Berichten
2
Beste mensen,

Ik ben nu al een lange tijd op zoek naar de oplossing voor het volgende probleem.In de onderstaande code staat een HTML/CSS van een menu. Nu wil ik dat de de middelste div 'div.middle' zijn hoogte aanpast aan de menu inhoud, oftewel de lettergrootte van de div: 'div.menutopic'.

Het probleem zit er in het horizontaal uitlijnen van de 'menutopics'. Met 'float:left' krijg ik de menutopics wel naast elkaar, maar dan vallen ze buiten 'div.middle'. Door de CSS van 'menutopic' te veranderen 'display;inline-block;' blijven ze wel mooi in 'div.middle', maar gaan ze weer niet op een rij.

Weet iemand hoe dit probleem opgelost kan worden?

Alvast bedankt!


P.S. Ik gebruik Firefox voor het testen.



HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test - menu 1.1</title>
<style type="text/css">
body {
	background-color:lightgrey;
}

div.container {
	width:80%;
	min-width:550px;
	max-width:750px;
	margin: 0px auto;
}

div.top {
	height:12px;
	background-color:white;
	
	-moz-border-radius-topleft: 12px; /* FF1+ */
	-webkit-border-top-left-radius: 12px; /* Saf3+, Chrome */
	/*border-radius: 12px; /* Opera 10.5, IE 9 */
	
	-moz-border-radius-topright: 12px; /* FF1+ */
	-webkit-border-top-right-radius: 12px; /* Saf3+, Chrome */
	/*border-radius: 12px; /* Opera 10.5, IE 9 */
}

div.middle {
	background-color:white;
}

div.menutopic {
	width:25%;
	font-size:1.33em;
	text-align:center;
}

div.bottom {
	height:12px;
	background-color:white;
	
	-moz-border-radius-bottomleft: 12px; /* FF1+ */
	-webkit-border-bottom-left-radius: 12px; /* Saf3+, Chrome */
	/*border-radius: 12px; /* Opera 10.5, IE 9 */
	
	-moz-border-radius-bottomright: 12px; /* FF1+ */
	-webkit-border-bottom-right-radius: 12px; /* Saf3+, Chrome */
	/*border-radius: 12px; /* Opera 10.5, IE 9 */
}
</style>
</head>

<body>
<div class="container">

    <div class="top"></div>
    <div class="middle">
    	<div class="menutopic">Een</div>
        <div class="menutopic">Twee</div>
        <div class="menutopic">Drie</div>
        <div class="menutopic">Vier</div>
    </div>
    <div class="bottom"></div>
</div>
</body>
</html>
 
Je hebt het menu nu in de onderste div geplaatst (dat is de onderkant). Als je het in de bovenste div zet zal het wel meeschalen:

<div class="top"><div class="menutopic">Een</div>
<div class="menutopic">Twee</div>
<div class="menutopic">Drie</div>
<div class="menutopic">Vier</div></div>
 
Bedankt voor de reactie Fritzi, maar dat was niet de oplossing... Uiteindelijk ben ik overgegaan naar een table en dat werkte meteen :D Dit is de update:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test - menu 1.1</title>
<style type="text/css">
body {
	background-color:lightgrey;
}

div.container {
	width:80%;
	min-width:550px;
	max-width:750px;
	margin: 0px auto;
}

div.top {
	height:12px;
	background-color:white;
	
	-moz-border-radius: 12px 12px 0px 0px;
	-webkit-border-radius: 12px 12px 0px 0px; /* Saf3+, Chrome */
	/*border-radius: 12px; /* Opera 10.5, IE 9 */
}

div.middle {
	background-color:white;
}

div.menutopic {
	font-size:1.33em;
	text-align:center;
}

div.bottom {
	height:12px;
	background-color:white;
	
	-moz-border-radius: 0px 0px 12px 12px;
	-webkit-border-radius: 0px 0px 12px 12px; /* Saf3+, Chrome */
	/*border-radius: 12px; /* Opera 10.5, IE 9 */
}
</style>
</head>

<body>
<div class="container">

    <div class="top"></div>
    
    <div class="middle">
   		<table cellpadding="0" cellspacing="0" width="100%">
        <tr>
        	<td width="25%"><div class="menutopic">Een</div></td>
            <td width="25%"><div class="menutopic">Twee</div></td>
            <td width="25%"><div class="menutopic">Drie</div></td>
            <td width="25%"><div class="menutopic">Vier</div></td>

        </tr>
        </table>    	
   </div>
    
    <div class="bottom"></div>
    
</div>
</body>
</html>
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan