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.
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>