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

Ul menu tussen 2 rounded corners

Door Tom K op 17-02-2009 13:55
1.455 views
Hallo ik heb nu de volgende opbouw voor mijn pagina in gedachten:

Zoals je ziet is het een menu waar links en rechts ronde hoeken zitten. Nu wil ik ervoor zorgen dat het menu in het midden van de 2 ronde hoeken zit. Ik heb enkel geen idee hoe. Ik heb namenlijk nu de volgende code:

 <div id="content">
					<div id="right-corner"></div>  
					<div style="clear: both;"></div>
						<ul class="mainmenu">
						<li><a href="#">sdk</a></li>
						<li><a href="#">sdk</a></li>
						<li><a href="#">sdk</a></li>
						<li><a href="#">sdk</a></li>
						</ul>

hierbij hoort de volgende css:

#content
{
    width: 860px;
    margin: 20px 41px 20px 41px;
     padding: 0;
    height: auto;
    background: #FFF url(' images/content_lt-round.png' ) no-repeat left top;
    
}


#content #right-corner
{
     background: #FFF url(' images/content_rt-round.png' ) no-repeat right top;
     width: 15px;
     height: 15px;
     float: right;
     margin-top:0;
	 z-index: -2;
}
ul.mainmenu
{
	margin: 0 auto;
	list-style-type: none;
	height: 25px;
	background-color: #FF0;
	min-width: 100px;
	display: table;

}
ul.mainmenu li
{
	display:inline;
}
ul.mainmenu li a
{
	display: table;
}


hieruit komt het volgende:



nu wil ik dat het gele gedeelte zo groot is als nodig is, dus niet 100%, maar zo groot als de breedte van de tekst die er in staat bij elkaar, en ik wil dat het daarna in het midden staat. Iemand een idee?

Tom



T
Timen kut
17-02-2009 14:03
display:table; toevoegen en de width weghalen misschien?
T
Tom K
17-02-2009 14:06
ah sorry, ik zie dat ik code ben vergeten, ik zal hem bovenaan wijzigen
M
Mitchell
17-02-2009 14:08
Moet er nog tekst in die hoeken komen?
Heb je al een vaste width van het gehele menu?
T
Tom K
17-02-2009 14:09
er kan bij het menu geen vaste width worden opgegeven omdat het geen vaste groote heeft, je moet zoveel menu items kunne toevoegen als je zelf wilt.
M
Mitchell
17-02-2009 14:17
Dan word het lastig.
Misschien heb je hier wat aan? Daarr worden ze namelijk ook op een manier in het midden geplaatst, geen idee of dat gaat werken voor jou menu though.
T
Tom K
17-02-2009 15:36
ok het lukt nu aardig, ik heb de volgende css:
#nav{
width:100%;
text-align:center;
margin: 0;
padding: 0;
height: auto;
}

#nav ul{
width: 100%;
list-style:none;
margin:0;
padding:0;
}

#nav ul li{
display:inline;
list-style:none;
margin: 0;
padding: 0;
background-color: #DDD;
}

#nav ul li a{
background: 0;


font-size: 10px;
text-decoration: none;
line-height: inherit;
margin: 0;
padding: 0;
}


in ie7 ziet het er mooi uit, maar in ff3 zit er ruimte tussen de li's hoe krijg ik die weg?

Reageren

Inloggen om te reageren