Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 23.01.2012, 09:40
take_a_7 take_a_7 ist offline
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von gandalf_hh Beitrag anzeigen
hi leute,

ich möchte mehrere profile (div=bild/div=text) untereinander auflisten und habe es so wie auf dem beispiel bild gemacht.
meine frage jetzt, ist das verkehrt? sollte ich beide profil-divs in ein extra div einfügen und flot left ohne <br/> oder kann man das ruhig so lassen?
ich möchte 50 bis 100 profile untereinander auflisten.
die andere alternative wäre ein <div id=außenbox> für jedes profil

danke für jede antwort.
Ich hoffe du meinst mit "div=bild" nicht <div id="bild">, denn dann wäre das ungültiges HTML (eine ID muss eindeutig sein). Die Struktur ist prinzipiell schonmal gut, allerdings mangelt es noch ein wenig an Semantik. Ich nehme an, der Text rechts beschreibt irgendetwas über das Profil, dann würde ich eine Defintionsliste nehmen:
HTML-Code:
<dl id="profile">
    <dt><img src="/profilbilder/foo.jpg" alt="Profilbild von Foo"></dt>
    <dd>Lorem Ipsum Dolor Sit amet</dd>

    <dt><img src="/profilbilder/foo2.jpg" alt="Profilbild von Foo2"></dt>
    <dd>Lorem Ipsum Dolor Sit amet</dd>
</dl>
Dann floatest du, wie auch schon bei dir zu sehen, #profile dt und #profile dd. Zusätzlich clearst du (clear:left) noch bei #profile dt, dadurch fällt das <br> weg. Da das letzte dt-dd-Pärchen nicht mehr gecleart wird, braucht #profile noch einen Clearfix (ich empfehle den von Nicolas Gallagher), damit die Floats eingeschlossen werden.
Das komplette CSS sähe dann etwa so aus:
Code:
#profile {
    width:990px;
    zoom:1; /* hasLayout für IE 6+7, Teil des Clearfix' */
}

#profile:before,
#profile:after {
    content:"";
    display:table;
}

#profile:after {
    clear:both;
}

#profile dt, #profile dd {
    float:left;
}

#profile dt {
    clear:left;
    width:290px;
}

#profile dd {
    width:700px;
}
Ich hoffe, ich habe hier jetzt nicht kompletten Quatsch erzählt und du kannst damit was anfangen

gruß,
take

Geändert von take_a_7 (23.01.2012 um 09:41 Uhr) Grund: Tippfehler im CSS
Mit Zitat antworten
Sponsored Links