Blockelemente zentrieren, umbrechen
bob
- css
0 Ingo Turski0 bob0 Chris0 Ingo Turski0 bob0 Ingo Turski0 bob
Hallo,
versuche schon seit Stunden ein bestimmtes Problem zu lösen.
Ich möchte mehrere Buttons nebeneinaber darstellen und das Ganze zentriert (auf der Seite). Wenn die Fensterbreite kleiner wird, sollen die Buttons in die nächste Zeile umbrechen.
Mit der Lösung unten, umbrechen zwar meine Buttons in die nächste Zeile, aber wegen dem "float:left" kleben sie an der linken Fensterseite und sind nicht zentriert.
Nehme ich das "float:left" raus, ist zwar alles zentriert aber die Buttons sind dafür untereinander.
Wichtig: Die Buttons müssen umbrechen wenn die Fensterbreite kleiner wird.
CSS:
.center{
margin:0px auto;
text-align:center;
}
.navi_container {
height:26px;
width:100%;
}
a.but:link, a.but:visited {
display: block;
width: 104px;
height: 26px;
float:left;
background-image: url(../pix2/but/butvor2.gif);
text-align:center;
line-height:26px;
text-decoration:none;
color:#999999;
font-family:Arial, Helvetica, sans-serif;
}
HTML:
<div class="navi_container center"><a class="but" href="s">Startseite</a><a class="but" href="s">Startseite2</a></div>
Hi,
Du wirst Dich entscheiden müssen zwischen festen Breiten mit float oder Zentrierung und inline belassenen Links.
freundliche Grüße
Ingo
Hi,
Du wirst Dich entscheiden müssen zwischen festen Breiten mit float oder Zentrierung und inline belassenen Links.
freundliche Grüße
Ingo
Mit inline hab ich es versucht, leider wird dann das Hintergrundbild nicht angezeigt.
Du könntest es mit dem Tag <wbr> versuchen. Ist aber nur geraten.
Hi,
Mit inline hab ich es versucht, leider wird dann das Hintergrundbild nicht angezeigt.
und wieso nicht? Oder meinst du, es wird nur teilweise angezeigt, eben nur soweit der Inhalt reicht?
freundliche Grüße
Ingo
Hi,
Mit inline hab ich es versucht, leider wird dann das Hintergrundbild nicht angezeigt.
und wieso nicht? Oder meinst du, es wird nur teilweise angezeigt, eben nur soweit der Inhalt reicht?freundliche Grüße
Ingo
Hi Ingo,
vermutlich wird es nur teilweise angezeigt. Die Hintergrundgrafik ist Innen weiss und man sieht wahrscheinlich den Rest nicht. Muss ich jetzt auf eine Tabelle zurückgreifen, damit gehts nämlich, würde aber ungerne eien Tabelle benutzen weil ich die Seite Tabellenlos gestalten wollte.
Gruß Bob
Hi,
zunächst eine Bitte:
Hi,
zitiere nur das, was nötig ist und worauf Du Bezug nehmen willst.
Muss ich jetzt auf eine Tabelle zurückgreifen, damit gehts nämlich
Wie sollte eine Tabellenzeile denn umbrechen können?
Die Entscheidung ist eher die zwischen Zentrierung und Größenangabe, wobei Du inline-Elemente über padding und ggfls. line-height in ihrer Größe zumindest beeinflussen kannst.
freundliche Grüße
Ingo
Hi,
Wie sollte eine Tabellenzeile denn umbrechen können?
Stimmt war ein Denkfehler, auch wenn ich das alles in eine Tabele setze habe ich ja trotzdem Blockelemente die floaten.
Die Entscheidung ist eher die zwischen Zentrierung und Größenangabe, wobei Du inline-Elemente über padding und ggfls. line-height in ihrer Größe zumindest beeinflussen kannst.
Das Problem dabei ist allerdings, daß wenn ich padding benutze um die Größe zu beeinflussen, die Buttons unterschiedliche Breiten bekommen weil die Wörter unterschiedlich lang sind und das sollte nicht sein.
Danke für dein Einsatz!
Habe hier eine Lösung gefunden leider mit unterschiedlichen Breiten:
http://24ways.org/advent/centered-tabs-with-css
http://24ways.org/examples/centered-tabs-with-css/final.html