links-, mittig und rechtsbündig in einer Zeile

[zwerg]

Glück auf!

Ich probiere derzeit (mal wieder)das Tabellenlayout meiner Seite auf CSS umzustellen.
Jetzt stecke ich erstmal fest und hoffe auf eure Hilfe.

Und zwar will ich in der Fußzeile linksbündig meinen Namen, mittig den Link fürs Impressum und rechts den Stand des Besucherzählers anzeigen lassen (also wie bisher).

Nun weiß ich nicht, wie ich das (ohne Tabelle) machen kann.

Mein bisheriger Versuch:

  
<div id="footer">  
<div style="text-align: left; width: 30%; display: inline-block;">Name</div>  
<div style="text-align: center; width: 40%; background-color: yellow; display: inline-block;"><a href="#">Impressum</a></div>  
<div style="text-align: right; width: 30%; background-color: red; display: inline-block;">Besucherzahl</div>  
</div>  

Ich habe display: inline-block so verstanden, dass ich dem DIV dann eine Breite geben kann, ohne dass er umschaltet. Bei display: inline ist das Problem, dass ich keine Breite angeben kann.

Außerdem habe ich es mit <span> probiert, aber hier kann ich keine Breite angeben, oder?

Kann mir jmd. sagen was ich falsch mache oder hat vlt. gar eine komplett andere Lösung?

Freundliche Grüße

zwerg Alex

[wahsaga]

hi,

Und zwar will ich in der Fußzeile linksbündig meinen Namen, mittig den Link fürs Impressum und rechts den Stand des Besucherzählers anzeigen lassen (also wie bisher).

Nun weiß ich nicht, wie ich das (ohne Tabelle) machen kann.

Mittels float.

gruß,
wahsaga

[zwerg]

Glück auf Wahsaga!

Mittels float.

Danke für den Link, dass war was ich gesucht habe :-)

Freundliche Grüße

zwerg Alex

[Felix Riesterer]

Lieber zwerg,

auch Du leidest wohl unter Divitis...

<div id="footer">
<div style="text-align: left; width: 30%; display: inline-block;">Name</div>
<div style="text-align: center; width: 40%; background-color: yellow; display: inline-block;"><a href="#">Impressum</a></div>
<div style="text-align: right; width: 30%; background-color: red; display: inline-block;">Besucherzahl</div>
</div>

  
Besser:  
~~~html
<div id="footer">  
    <span id="webseiten-name">Name</span>  
    <span id="counter">Besucherzahl</span>  
    <span id="impressums-link"><a href="#">Impressum</a></span>  
</div>

Jetzt kann man das gestalten.

#footer {  
    text-align: center;  
}  
  
#footer #webseiten-name {  
    float: left; /* float schaltet automatisch auf display:block! */  
    width: 30%;  
    margin: 0;  
    padding: 0;  
}  
  
#footer #counter {  
    float: right;  
    width: 30%;  
    background-color: red;  
}  
  
#footer #impressums-link {  
    background-color: yellow;  
}  
  
/* Das hier könnte stören... dann einfach ersatzlos streichen! */  
#footer #impressums-link a {  
    display: block;  
    width: 100%;  
}

Ich verwende übrigens etwas sehr ähnliches auf unserer Schulwebsite.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Patrick Andrieu]

Hallo Felix!

Schulwebsite

Die Seite weist im IE 6 ein seltsames Verhalten (am Seitenende) auf.

Viele Grüße aus Frankfurt/Main,
Patrick

[Felix Riesterer]

Lieber Patrick,

Schulwebsite

Die Seite weist im IE 6 ein seltsames Verhalten (am Seitenende) auf.

das ist mir auch schon aufgefallen, jedoch habe ich zur Zeit einfach zu wenig derselben, um mich um den IE6 zu kümmern. Wer ihn immer noch verwendet (anstatt auf zumindest den FF umgestiegen zu sein), der will das so haben - da bin ich mir sicher. ;-P Ansonsten: Sollte ich einmal wirklich nichts besseres zu tun haben, dann kümmere ich mich um diesen Darstellungsfehler. Meines Wissens tritt er nicht auf allen Seiten der Website auf, oder?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Patrick Andrieu]

Hallo Felix!

Die Seite weist im IE 6 ein seltsames Verhalten (am Seitenende) auf.

das ist mir auch schon aufgefallen, jedoch habe ich zur Zeit einfach zu wenig derselben, um mich um den IE6 zu kümmern. Wer ihn immer noch verwendet (anstatt auf zumindest den FF umgestiegen zu sein), der will das so haben - da bin ich mir sicher. ;-P

hehe... Du weißt sicher, dass auch ich andere Browser benutze. Was würde ich denn sonst hier versuchen, mit zu reden :) Aber diesen Vorteil, den wir "Erleuchteten" hier genießen hat nicht jeder, und es gibt jede Menge im Tal der ahnungslosen Normalsurfer, die halt den Browser nehmen, den man ihnen ins (Windows-)Netz gelegt hat ;)

Ansonsten: Sollte ich einmal wirklich nichts besseres zu tun haben, dann kümmere ich mich um diesen Darstellungsfehler.

Na klar, mein Hinweis war auch daher nur ein Hinweis. Mich interssiert im Moment, was der 7er besser macht, mein Posting über Peekaboo weiter unten lässt auch mit dem Browser schlimmes befürchten. Eben auch festgestellt, dass er bei einer CSS-Anweisung wie div#id:hover nur dann hovert, wenn die Maus über den Text im Div steht...

Meines Wissens tritt er nicht auf allen Seiten der Website auf, oder?

Hmm.... leider anscheinend doch. Bei 4 oder 5 Seiten war es der Fall, weiter habe ich nicht geschaut.

Viele Grüße aus Frankfurt/Main,
Patrick

[zwerg]

Glück auf Felix!

Erstmal danke für deine Antwort.

auch Du leidest wohl unter Divitis...

Da gebe ich dir Recht. Ist halt schwierig vom Tabellendenken wegzukommen. Aber ich gebe mein Bestes.

Leider ist, wenn ich deine Lösung übernehme, dass Impressum nicht ganz zentriert.

Wenn ich bei der Ursprungslösung bleibe und float verwende klappt es hingegen. Also so:

[code=HTML]
div style="text-align: left; width: 30%; background-color: red; float: left;">&copy; 2006-2007 by Alexander Lenser</div>
 <div style="text-align: right; width: 30%; background-color: red; float: right;">Besucher: 6000 Online: 10</div>
 <div style="text-align: center; width: 100%; background-color: yellow; "><a href="#">Impressum</a>

Natürlich will ich deinen Hinweis auf "Divitis" nicht vernachlässigen und wenn ich schon auf CSS umstelle, dann will ich das auch möglichst ordentlich machen.
Werde deshalb nochmal an deinem Beispiel ein wenig rumprobieren.

Freundliche Grüße

zwerg Alex

[zwerg]

Leider ist, wenn ich deine Lösung übernehme, dass Impressum nicht ganz zentriert.

Entschuldigung Felix, es ist schon spät. Dein Beispiel klappt natürlich. Ich war lediglich so blöde und hab "text-align: center" vergessen.

Also danke nochmal.

[Gunther]

Hallo zusammen,

ich möchte auch noch kurz einige Anmerkungen loswerden.

Jetzt kann man das gestalten.

#footer #webseiten-name {}

#footer #counter {}

#footer #impressums-link {}

Solche Konstrukte sind "doppelt gemoppelt". Da eine ID nur genau einmal pro Seite vorkommen darf, ist es hier nicht nötig, auch noch die #footer ID jedesmal voranzustellen. Anders sieht es bei der Verwendung von Klassen aus - hier kann es durchaus erforderlich/ sinnvoll sein.

Ein weiteres Problem bei dieser durchaus gebräuchlichen "Lösung" der betreffenden Problemstellung gegenüber der Tabellenvariante ist die Reihenfolge der einzelnen Elemente im Quelltext. Kommen sie bei der Tabelle in der "normalen" Reihenfolge von links nach rechts (bei ltr) nacheinander, so ergibt sich bei dieser Float-Variante eine Reihenfolge von 1-3-2 (analoge Problematik wie beim Stichwort: source-ordered columns).
Spielt die Reihenfolge eine Rolle (bspw. für eine "nur Text" Anzeige oder andere Ausgabemedien), dann muss man bspw. alle drei Elemente floaten (z.B. 2 links eins rechts).

Das nur noch als zusätzliche Anmerkungen, weil sich hier jemand erfreulicherweise gerade neu mit CSS beschäftigt.

Gruß Gunther

[wahsaga]

hi,

#footer #impressums-link {}

Solche Konstrukte sind "doppelt gemoppelt". Da eine ID nur genau einmal pro Seite vorkommen darf, ist es hier nicht nötig, auch noch die #footer ID jedesmal voranzustellen. Anders sieht es bei der Verwendung von Klassen aus - hier kann es durchaus erforderlich/ sinnvoll sein.

Es kann auch hier sinnvoll sein - wenn ein Element #impressums-link in mehreren Dokumenten vorkommt (die über ein gemeinsames Stylesheet formatiert werden) - aber nicht immer innerhalb von #footer steht, und davon abhängig unterschiedlich formatiert werden soll.

Das Minuszeichen im ID-Wert täte mich schon eher stören :-)

gruß,
wahsaga