CSS Layout Problem, float

davewood

Hallo

Ich hab folgendes Problem welches man sich hier auch gleich anschaun kann.

Eigentlich will ich ja folgendes.

Am linken Rand des Bereichs ein Thumbnail mit Text darunter.
Dann um ca halbe Höhe niedriger als das linke Bild, auf der rechten Seite ein Thumbnail mit Text darunter.
Links wiederum mit vertikalem Abstand ... etcetc.

Momentan ist das so gelöst:

Code

<div style="clear: right; float: left;">
   <img src="blablabla"><br />
   blablabla
</div>


<div style="clear: left; float: right;">
  <img src="blablabla"><br />
   blablabla
</div>


<div style="clear: right; float: left;">
   <img src="blablabla"><br />
   blablabla
</div>

Alles anzeigen

...

Also schauts momentan eh fast so aus wie ichs will, aber die vertikalen Abstände zwischen den Bildern auf der linken bzw rechten Seite sollen geringer sein (ca die Haelfte)

in freudiger Erwartung von Hilfe

david

Ivy

is vielleicht nicht die schönste lösung, aber wie wärs mit diesem margin-left bzw. margin-right, wo du den abstand vom seitenrand festlegst?

sloth

Hmm.. geht das nicht irgendwie mit margin oder border oder so?
Also einfach einen negativen Wert eingeben bzw mal ein bisschen rumspielen?

edit: Ivy :<

jimbeam

also margin-left bzw. right bringt nix, er will ja die höhenabstände verkleinern.

negative werte werden meines Wissens nach von den Browsern unterschiedlich interpretiert.

du könntest jedoch immer 2 bilder nebeneinander positionieren und das rechte immer um die halbe größe vom bild mit margin-top nach unten verschieben! vl reichts sogar wenn du nur das 1. bild nach unten verschiebst und die anderen richten sich danach aus!

lg
ARmin

java-girl

Schon einmal probiert eine Tabelle zu verwenden?

maciek

hilft das in etwa? Position (relative, -50px) dürfte eigentlich in keinem browser Probleme machen.

HTML

<div style="background-color:#f00; width:200px; height:100px; clear:both; float: left;">
   blablabla
</div>


<div style="background-color:#0f0; width:200px; height:100px; clear:both; float: right; position:relative; top:-50px;">
   blablabla
</div>


<div style="background-color:#00f; width:200px; height:100px; clear:both; float: left; position:relative; top:-50px;">
   blablabla
</div>

Alles anzeigen

a9bejo

Zitat von java-girl

Schon einmal probiert eine Tabelle zu verwenden?

Ein sehr umstrittenes Thema:

davewood

Nein tables will ich vermeiden.

maciek: Ich muss beim ersten Bild -50px, beim zweiten -100px, usw. verwenden.
das setzt sich so fort. auch komisch.

java-girl

Zitat von a9bejo

Ein sehr umstrittenes Thema:

Are Tables Really Evil?

Why avoiding tables (for layout) is important.

Hm, na ja, ich hab' auch schon viel schlechtes über Tabellen gehört.
Aber ich bin nicht recht gut in Webdesign und kenn' mich da auch nicht so aus, solange der Validator keine Fehler ausspuckt reicht das für mich
Auf jeden Fall wäre es eine schnelle Lösung die sicher funktioniert, was besseres als eine Tabelle weiß ich auch nicht...

EDIT:

Zitat

Nein tables will ich vermeiden.

Gut dann hat sich das erledigt

maciek

Zitat von davewood

maciek: Ich muss beim ersten Bild -50px, beim zweiten -100px, usw. verwenden.
das setzt sich so fort. auch komisch.

das ist komisch ... was für ein Browser? Eigentlich müsste es konstant mit -50px gehen ...

davewood · Ubuntu 7.10 Firefox 2.0.0.11

Ubuntu 7.10
Firefox 2.0.0.11

Jetzt mitmachen!