Bilder passgenau nebeneinander lückenlos plazieren ohne Tabelle

Dieses Thema im Forum "Web Page Design" wurde erstellt von unique23, 10.08.2006.

  1. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    MacUser seit:
    03.03.2004
    Hallo zusammen,
    ich habe ein paar Bilder, die ich gerne nebeneinander plazieren möchte. Und zwar so, dass sie nahtlos Bild an Bild stehen, ohne zwischenraum. Aber ich habe immer einen automatischen Abstand im Browser.

    Woran liegts? Oder muss ich auf eine Tabelle zurückgreifen? Wäre schade, weil ich dann mein gesamtes CSS umwerfen müßte :-(

    Besten Dank im voraus!
     
  2. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    MacUser seit:
    03.03.2004
    Mein Code sieht momentan so aus:

    <th colspan="4">
    <img src="pic.jpg" width="176" height="162" border="0" hspace="0" vspace="0"/>
    <img src="raster.gif" width="16" height="16" border="0" hspace="0" vspace="0"/>
    <img src="pic.jpg" width="176" height="162" border="0" hspace="0" vspace="0"/>
    <img src="raster.gif" width="16" height="16" border="0" hspace="0" vspace="0"/>
    <img src="pic.jpg" width="176" height="162" border="0" hspace="0" vspace="0"/>
    </th>

    Bringt das jemanden weiter?
     
  3. pichfl

    pichfl MacUser Mitglied

    Beiträge:
    134
    Zustimmungen:
    2
    MacUser seit:
    03.08.2005
    img{ vertical-align:bottom; margin:0; padding:0; border:0; }

    achte darauf, dass zwischen <img /> und dem nächsten <img /> kein zwischenraum ist.

    am besten floatest du die Bilder (z.b. mit ner klasse) (dann muss aber mit dem nachfolgendem element der float wieder aufgehoben werden - ein <br /> ginge auch, falls keine elemente mehr da sind.)

    Code:
    <img class"floating" /><img class="floating" /><img class="floating" />
    <div id="nachfolgendeselement">....
    
    in der CSS dann

    Code:
    img.floating{ float:left; display:block; vertical-align:bottom; margin:0; padding:0; border:0; }
    div#nachfolgendeselement{ clear:both; }
    

    EDIT: irgendwas sagt mir, dass sich dein code auch anderweitig noch optimieren ließe, vor allem in hinbetracht auf tabellen ;) :p
     
  4. unique23

    unique23 Thread Starter MacUser Mitglied

    Beiträge:
    752
    Zustimmungen:
    2
    MacUser seit:
    03.03.2004
    dankeschön, ich teste mal gleich weiter....
    oh ja da kann man einiges optimieren, upis, hab gerade mein code-kauderwelsch gemerkt. kommt nicht wieder vor :)
     
  5. mores

    mores MacUser Mitglied

    Beiträge:
    3.554
    Zustimmungen:
    106
    MacUser seit:
    23.12.2003
    poste mal den wichtigen TABLE container der VOR dem <th> kommt.

    border="0" cellpadding="0" cellspacing="0" sind wichtig, und die width auf keinen fall auf 100% stellen ;)
     
Die Seite wird geladen...

Diese Seite empfehlen