Ausrichtung eines Containers

Computer: Software & Programmierung HTML & CSS
#1

Hallo an alle!

Ich habe folgende Seite mal besipielhaft gebaut: http://ud05_188.ud05.udmedia.de/spotlight/rechts.html
Link zum CSS: http://ud05_188.ud05.udmedia.de/spotlight/stylerechts.css
Darin habe ich „Link1 | Link2 | Link3 | …“ drin stehen. Das „…“ bedeutet, dass die Anzahl bzw. der Linktext variabel ist.
Rechts davon, schwarz umrandet, „rL1 rL2 …“. Statt dass dies genau rechts an die Links anknüpft, soll die schwarze Box rechts an
der roten (innerhalb der Roten) auf gleicher Höhe „hängen“, so dass es mir möglich ist, den Abstand mit bspw. einem padding-right bzw. margin-right zu definieren.
Ich habe dazu mal einen Screen erstellt: http://ud05_188.ud05.udmedia.de/spotlight/links.jpg
Der Abstand zwischen schwarzer Box und der rechten Seite der roten Box soll soll frei wählbar sein.

Hat jemand eine Idee wie ich das umsetzen kann mit möglich wenig Änderungen am bestehenden HTML/CSS, da es in Wirklichkeit (dies ist nur ein Beispiel zum Aufzeigen meines Problems) um einiges komplizierter ist?

Gruß PHANTOM

#2

Hallo PHANTOM!

Hat jemand eine Idee wie ich das umsetzen kann mit möglich
wenig Änderungen am bestehenden HTML/CSS, da es in
Wirklichkeit (dies ist nur ein Beispiel zum Aufzeigen meines
Problems) um einiges komplizierter ist?

… indem du deinen Container rechts floaten lässt.

Gruß Gernot

#3

Hallo!

Vielen Dank für die schnelle Antwort.

… indem du deinen Container rechts floaten lässt.

Ich habe das hier mal gemacht in dem ich #rechts noch ein float: right; geschenkt habe; Resultat:
http://ud05_188.ud05.udmedia.de/spotlight/rechts.html

Der schwarze Container ist nicht auf der gleichen Ebene wie die Links.

Was fehlt da noch?

Danke + Gruß PHANTOM

#4

Hallo Phantom!

Der schwarze Container ist nicht auf der gleichen Ebene wie
die Links.

Was fehlt da noch?

dreh einfach die Reihenfolge im Quellcode um und stelle den floatenden Container vor die mittig ausgerichtetn Links.

Gruß Gernot

#5

Hallo!

Der schwarze Container ist nicht auf der gleichen Ebene wie
die Links.

Was fehlt da noch?

dreh einfach die Reihenfolge im Quellcode um und stelle den
floatenden Container vor die mittig ausgerichtetn Links.

Okay, habe das bei mir lokal al gemacht, scheint zu funktionieren. Mit einem padding-right kann ich dann auch den Abstand definieren.
Nur aus Interesse: Ist es auch möglich dies ohne Umstellung des HTML-Codes zu bewerkstelligen?

Vielen Dank für deine schnelle Hilfe!

Gruß PHANTOM

#6

Hallo Phantom!

Nur aus Interesse: Ist es auch möglich dies ohne Umstellung
des HTML-Codes zu bewerkstelligen?

Klar, du verpasst dem rechts flostenden Element einen kompensierenden Margin-Top von -1.25em! (das ist im Betrag der Standard-Zeilenabstand))

GrußGernot

#7

Hallo!

Es gibt doch noch ein Problem mit dem Lösungsvorschlag:
Setze ich das padding-right auf 200px, so schiebt sich nicht nur die schwarze Box nach links um 200px, sondern auch
die Textlinks verschieben sich von der Mitte 200px nach links. Das will ich eigentlich nicht haben.
Ich habe mal nun um die Textlinks ein span mit einer CSS-Klasse namens „verschieben“ angehängt, und auf diese 200px padding-left angewendet um es wieder zurückzuschieben.
Aber das ist wohl eher unschön?! Kann man das besser lösen?

Mit Verschiebung:
Link zur HTML-Seite: http://ud05_188.ud05.udmedia.de/spotlight/rechts.html
Link zum CSS: http://ud05_188.ud05.udmedia.de/spotlight/stylerechts.css

Ohne Verschiebung:
Link zur HTML-Seite: http://ud05_188.ud05.udmedia.de/spotlight/rechts1.html
Link zum CSS: http://ud05_188.ud05.udmedia.de/spotlight/stylerechts1.css

Danke + Gruß PHANTOM