Bilder positionieren

[Ronny]

Hallo

Ich sitze jetzt schon seit Tagen an folgendem Problem:
Ich moechte 4 Bilder am unteren Rand eines Fensters, zentriert positionieren. Ausserdem soll zwischen den Bildern und unter den Bildern kein Platz sein.
Das ganze wollte ich nur mit CSS machen und ohne Tabelle.
Ich krieg es einfach nicht hin. Kann mir jemand helfen?

Gruss

ronny

[at]

Hallo.

Ich moechte 4 Bilder am unteren Rand eines Fensters, zentriert positionieren. Ausserdem soll zwischen den Bildern und unter den Bildern kein Platz sein.
Das ganze wollte ich nur mit CSS machen und ohne Tabelle.
Ich krieg es einfach nicht hin. Kann mir jemand helfen?

Was hast du bisher versucht? Wie sieht dein Quellcode aus?
MfG, at

[Ronny]

Hallo.

Ich moechte 4 Bilder am unteren Rand eines Fensters, zentriert positionieren. Ausserdem soll zwischen den Bildern und unter den Bildern kein Platz sein.
Das ganze wollte ich nur mit CSS machen und ohne Tabelle.
Ich krieg es einfach nicht hin. Kann mir jemand helfen?

Was hast du bisher versucht? Wie sieht dein Quellcode aus?
MfG, at

Habe schon versucht die Bilder alle in ein <div>, <span> bzw. <pre> zu stecken (wegen der Zentrierung). Dann habe ich jedes einzelne Bild schon zusaetzlich in eines dieser Elemente gesteckt (wegen dem Rand). Habe jetzt so ziemlich alle Kombinationen ausprobiert und auch schon so ziemlich alles was CSS so bietet. Also position, margin, padding, bottom, usw.
Muesste vielleicht dazu sagen, dass es sich bei den Bildern um Buttons handelt, sie also in einem <a>-Tag stehen.

[nag]

Hallo,

probier noch etwas, und du findest die endgültige Lösung.

http://www.stud.uni-giessen.de/~su6690/index.html
(der link existiert nur unbestimmte Zeit)

mfg NAG

[Ronny]

Hallo,

probier noch etwas, und du findest die endgültige Lösung.

http://www.stud.uni-giessen.de/~su6690/index.html
(der link existiert nur unbestimmte Zeit)

mfg NAG

Vielen Dank NAG

Als ich in den Quelltext geguckt hab ist mir sofort die Eigenschaft "display" ins Auge gefallen. In dem Moment hatte sich mein Problem dann gelöst.
Was mir aber trotzdem noch aufgefallen ist und was ich vorher noch nicht wusste, ist, dass es einen Unterschied macht, ob man die 4 Links hintereinander in einer Zeile oder jeden seperat in einer Zeile schreibt. Ich dachte immer, bei HTML sei das egal.

Also nochmals vielen Dank

ronny

[Ingo Turski]

Hi,

Als ich in den Quelltext geguckt hab ist mir sofort die Eigenschaft "display" ins Auge gefallen.

... die hier mit div {display:block;} völlig überflüssig ist, da ein div ja bereits ein Blocklevel-Element ist. Aber das ist meist das Problem von vorgefertigten Lösungen, daß sie dem Verständnis nicht unbedingt beitragen.
Bei dieser Methode ist einzig und allein die Eigenschaft div {text-align:center;} für die Zentrierung der im div enthaltenen Inline-Elemente von Bedeutung und die absolute Positionierung für die Darstellung am unteren Fensterrand - aber was Du noch wissen solltest: es kann hier zu überlagerungen kommen; absolute Positionierung sollte immer mit Bedacht eingesetzt werden und in verschiedenen Fenstergrößen (oft als 'Auflösungen' bezeichnet) sowie Schriftgradeinstellungen getestet werden.

Was mir aber trotzdem noch aufgefallen ist und was ich vorher noch nicht wusste, ist, dass es einen Unterschied macht, ob man die 4 Links hintereinander in einer Zeile oder jeden seperat in einer Zeile schreibt.

Ein Leerzeichen im HTML wird als Leerzeichen dargestellt und auch ein Zeilenumbruch wird als Leerzeichen umgesetzt. Ist Dir das wirklich so neu? Dasselbe passiert doch auch, wenn Du bei Texten ein Wort in eine neue Zeile setzt.

freundliche Grüße
Ingo

[Ronny]

... die hier mit div {display:block;} völlig überflüssig ist, da ein div ja bereits ein Blocklevel-Element ist.

Das stimmt wohl, aber {display:inline;} hat mein Problem geloest.

Bei dieser Methode ist einzig und allein die Eigenschaft div {text-align:center;} für die Zentrierung der im div enthaltenen Inline-Elemente von Bedeutung und die absolute Positionierung für die Darstellung am unteren Fensterrand

Hmm... stimmt. In diesem Fall ja.

• aber was Du noch wissen solltest: es kann hier zu überlagerungen kommen; absolute Positionierung sollte immer mit Bedacht eingesetzt werden

Diese Probleme hatte ich in den letzten Tagen zur Genuege.

Ein Leerzeichen im HTML wird als Leerzeichen dargestellt und auch ein Zeilenumbruch wird als Leerzeichen umgesetzt. Ist Dir das wirklich so neu?

Kommt mir bekannt vor, irgendwie. Mir ist es nur noch nie aufgefallen.

Na auf jeden Fall laeuft es bei mir jetzt. Hier mein Code, fuer den, den es interessiert:

<body>
<div class="menu">
<div><a><img></a></div>
<div><a><img></a></div>
<div><a><img></a></div>
<div><a><img></a></div>
</div>
</body>

und...

.menu { position:absolute; bottom:0px; width:100%; text-align:center; }
.menu div { display:inline; }

[Ingo Turski]

Hi,

Na auf jeden Fall laeuft es bei mir jetzt. Hier mein Code, fuer den, den es interessiert:

<body>
<div class="menu">
<div><a><img></a></div>
<div><a><img></a></div>
<div><a><img></a></div>
<div><a><img></a></div>
</div>
</body>

und...

.menu { position:absolute; bottom:0px; width:100%; text-align:center; }
.menu div { display:inline; }

Du betreibst hier wirklich unnötigen Aufwand.
Du setzt um die img-Elemente divs, also blocklevel-Elemente, und weist diesen dann aber wieder die inline-Eigenschaft zu. Siehst Du hierin denn irgend einen praktischen Nutzen (außer daß Du im Quelltext Zeilenumbrüche machen kannst)?

freundliche Grüße
Ingo