zentrierte Ausrichtung

[Kurt Eisermann]

Moin,
habe wieder mal ein Problem, meine Navigation will einfach nicht zentriert ausgerichtet werden:

  
<div class="cat">  
<ul class="bar">  
 <li class="item2"><a href="">1</a></li>  
 <li class="item2"><a href="">2</a></li>  
 <li class="item2"><a href="">3</a></li>  
   <li class="left"></li>  
</ul>  
</div>  

  
.cat {  
margin : 0;  
width : 674px;  
text-align : center;  
padding : 7px 0px 7px 0px;  
font-size : 12px;  
font-weight : bold;  
color : #ffffff;  
}  
.item2 {  
float : left;  
padding : 0px 7px 0px 0px;  
}  
.bar {  
margin : 0;  
padding : 0;  
list-style : none inside;  
}  
.left {  
clear : left;  
visibility : hidden;  
}  

Woran liegt es?

[Beat]

Woran liegt es?

Siehe http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

mfg Beat

[Kurt Eisermann]

Siehe http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

habe mal probiert in .cat 'margin : 0 auto' zusetzen funktioniert aber nicht!

[Beat]

habe mal probiert in .cat 'margin : 0 auto' zusetzen funktioniert aber nicht!

Heisst der betroffene Browser etwa MSIE?

mfg Beat

[Kurt Eisermann]

Heisst der betroffene Browser etwa MSIE?

Das und Firefox auch! ich habe doch auch diese Flußbeendung mit clear : left eingeführt. Komischerweise verschiebt dass die darunterliegenden div-Boxen mit! Die Div-Box wurde größer. Das tritt aber nur im IE auf! Wenn ich da ne feste Höhe mit CSS festlege ist das Problem weg.

[Beat]

Heisst der betroffene Browser etwa MSIE?
Das und Firefox auch! ich habe doch auch diese Flußbeendung mit clear : left eingeführt. Komischerweise verschiebt dass die darunterliegenden div-Boxen mit! Die Div-Box wurde größer. Das tritt aber nur im IE auf! Wenn ich da ne feste Höhe mit CSS festlege ist das Problem weg.

element{margin:0 auto; width:80%; border:1px solid black;}

Ohne Breitenangabe kann margin: auto keine Wirkung haben.
Falls Firefox immer noch muckt, empfehle ich mal, deinen Code zu validieren.

mfg Beat

[cygnus]

Hallo :)

Woran liegt es?

An float: left für item2

Ich vermute, dass es keine Möglichkeit gibt, linksfloatende Links zu zentrieren.
Wenn doch, dann soll dies einer der Fachleute hier erklären, ich bin keiner.

Ich würde jedem Link die prozentuale Weite mitgeben, die seinem Anteil an der festgelegten Gesamtbreite entspricht, dann sieht es aus, als wären die Links zentriert. Allerdings gibt es optisch unterschiedliche Abstände zwischen den Linktexten. Das könnte man mit border und/oder background-color kaschieren.

Bei vier Links also 25 Prozent, bei drei Links 33 Prozent (padding beachten).

Für .cat die Angabe margin: 0 auto notieren.

.item2 {
float : left;
width: 33%;
padding : 0;
}

Mehr fällt mir zu dem Problem einfach nicht ein ...

mfg
cygnus

[Detlef G.]

Hallo Kurt

habe wieder mal ein Problem, meine Navigation will einfach nicht zentriert ausgerichtet werden:

Woran liegt es?

Wie cygnus bereits schrieb, liegt es am float.

In deinem Bespiel sehe ich nichts, was Blockeigenschaften für die Links erfordert.
Dann könntest du <li class="left"></li> weglassen und das float : left; durch display:inline; ersetzen.

Auf Wiederlesen
Detlef