Geschrieben von *Sassy* am 25.12.2010 um 11:42:
ul zentrieren
Huhu,
Ich schlage mich jetzt schon seit mehreren Tagen mit einem CSS Problem rum und bekomme dieses einfach nicht gelöst. Jetzt wollt ich hier mal um Rat fragen
Ich habe ein Menü das über <ul><li> formatiert ist. Dort habe ich dann maximal 6 Menüpunkte (Allgemein, Pedigree, Description, Breeding, Offspring, Pictures). Je nach dem kann es aber sein, es werden nur 3 Menüpunkte verwendet (je nach Pferd).
Ich suche jetzt eine Lösung, die mir das <ul> mittig im div container setzt.
Leider, aus welchem Grund auch immer, liegt dieser immer links im div, also fängt immer links an, egal was ich mache.
Hier mal meine Div-Container:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
|
<div id="pferde_navi">
<div id="pferde_navi_innen">
<ul>
<li><a href="#">Allgemein</a></li>
<li><a href="#">Pedigree</a></li>
<li><a href="#">Description</a></li>
<li><a href="#">Pictures</a></li>
</ul>
</div>
</div>
|
|
Und hier die CSS-Datei:
| code: |
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:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
|
/* D E S I G N */
#pferde_navi {
float:left;
width:800px;
height:30px;
text-align:center;
}
#pferde_navi_innen {
text-align:center;
margin:0px auto;
width:600px;
height:30px;
}
/* N A V I G A T I O N */
#pferde_navi_innen ul {
padding:0px;
margin:auto;
list-style-type:none;
text-align:center;
}
#pferde_navi_innen ul li {
display:block;
font-size:12px;
margin:0px auto;
width:100px;
float:left;
}
#pferde_navi_innen ul li a {
padding-top:3px;
vertical-align:middle;
display:block;
color:#000000;
text-decoration:none;
}
#pferde_navi_innen ul li a:hover {
color:#000000;
text-decoration:none;
font-weight:bold;
}
#pferde_navi_innen ul li a:visited {
color:#000000;
text-decoration:none;
}
#pferde_navi_innen ul li a:active {
color:#000000;
text-decoration:none;
}
|
|
Ich habe es außerdem noch unter dem folgenden Link hochgeladen, damit man sich einen besseren Überblick verschaffen kann:
HTML-Datei
CSS-Datei
Vielen Dank schon mal für eure Hilfe,
Viele Grüße,
Saskia