1. Dashboard
  2. Forum
    1. Unerledigte Themen
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team-Mitglieder
    4. Trophäen
    5. Mitgliedersuche
  4. Tutorial Bereich
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Lexikon
  • Erweiterte Suche
  1. Informatik Forum
  2. Webmaster & Internet
  3. Web-/Grafikdesign

CSS Layout Problem, float

    • Frage
  • davewood
  • 17. Januar 2008 um 10:29
  • Unerledigt
  • davewood
    17
    davewood
    Mitglied
    Reaktionen
    9
    Punkte
    3.204
    Beiträge
    536
    • 17. Januar 2008 um 10:29
    • #1

    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

    I like Toast!

  • Ivy
    22
    Ivy
    Mitglied
    Reaktionen
    35
    Punkte
    4.920
    Beiträge
    889
    • 17. Januar 2008 um 10:40
    • #2

    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?

    Wer FU sagt, muss auch T sagen

  • sloth
    13
    sloth
    Mitglied
    Reaktionen
    7
    Punkte
    1.717
    Beiträge
    314
    • 17. Januar 2008 um 10:41
    • #3

    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
    11
    jimbeam
    Mitglied
    Reaktionen
    11
    Punkte
    1.201
    Beiträge
    204
    • 17. Januar 2008 um 10:59
    • #4

    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

    Paddys, hm.....

  • java-girl
    14
    java-girl
    Mitglied
    Reaktionen
    7
    Punkte
    2.037
    Beiträge
    357
    • 17. Januar 2008 um 13:55
    • #5

    Schon einmal probiert eine Tabelle zu verwenden?

    There's no better place than 127.0.0.1!

  • maciek
    16
    maciek
    Mitglied
    Punkte
    2.805
    Beiträge
    434
    • 17. Januar 2008 um 14:20
    • #6

    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

    *** Make it idiot proof, and someone will build a better idiot. ***

  • a9bejo
    21
    a9bejo
    Mitglied
    Reaktionen
    42
    Punkte
    4.697
    Beiträge
    913
    • 17. Januar 2008 um 14:32
    • #7
    Zitat von java-girl

    Schon einmal probiert eine Tabelle zu verwenden?

    Ein sehr umstrittenes Thema:

    • Are Tables Really Evil?
    • Why avoiding tables (for layout) is important.

    lg, Benjamin Ferrari, bookworm.at

  • davewood
    17
    davewood
    Mitglied
    Reaktionen
    9
    Punkte
    3.204
    Beiträge
    536
    • 17. Januar 2008 um 15:10
    • #8

    Nein tables will ich vermeiden.

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

    I like Toast!

  • java-girl
    14
    java-girl
    Mitglied
    Reaktionen
    7
    Punkte
    2.037
    Beiträge
    357
    • 17. Januar 2008 um 15:13
    • #9
    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 :grinning_squinting_face:
    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 :winking_face:

    There's no better place than 127.0.0.1!

  • maciek
    16
    maciek
    Mitglied
    Punkte
    2.805
    Beiträge
    434
    • 17. Januar 2008 um 23:57
    • #10
    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 ...

    *** Make it idiot proof, and someone will build a better idiot. ***

  • davewood
    17
    davewood
    Mitglied
    Reaktionen
    9
    Punkte
    3.204
    Beiträge
    536
    • 18. Januar 2008 um 12:01
    • #11

    Ubuntu 7.10
    Firefox 2.0.0.11

    I like Toast!

  • Maximilian Rupp 27. Dezember 2024 um 00:12

    Hat das Thema aus dem Forum Grafik/Video nach Web-/Grafikdesign verschoben.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden

Rechtliches

Impressum

Datenschutzerklärung