Ul menu tussen 2 rounded corners
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:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#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;
}
{
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
Gewijzigd op 01/01/1970 01:00:00 door Tom K
Heb je al een vaste width van het gehele menu?
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#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;
}
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?