XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   profile auflisten (http://xhtmlforum.de/showthread.php?t=66686)

gandalf_hh 23.01.2012 09:06

profile auflisten
 
Liste der Anhänge anzeigen (Anzahl: 1)
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.

take_a_7 23.01.2012 09:40

Moin,

Zitat:

Zitat von gandalf_hh (Beitrag 509849)
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

gandalf_hh 23.01.2012 10:11

ich kenn mich mit clear nicht aus aber zum schluss von mein css text steht immer:

/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
float: right;
margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
float: left;
margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
clear:both;
height:0;
}

reicht das nicht wenn clear da schon steht???

gandalf_hh 23.01.2012 10:15

ich hab den aufbau so ausgetestet und es klappt ganz gut:

<div id="profilcontent">.........................flot:l eft width:990px: height:200px;

<div id ="profilbild"><img /></div>.......flot:left width:290px: height:200px;
<div id ="text"></div>...........................flot:left width:700px: height:200px;

</div>


stellt euch vor ich stapel solche profile 100x untereinder, wäre das ein problem?

take_a_7 23.01.2012 19:05

Moin,

Zitat:

Zitat von gandalf_hh (Beitrag 509861)
stellt euch vor ich stapel solche profile 100x untereinder, wäre das ein problem?

Hast du meinen Beitrag überhaupt gelesen? Gehe zurück zu Beitrag #509853. Begib dich direkt dorthin, gehe nicht über Los, ziehe keine 2000 Gummipunkte ein.

gruß,
take

gandalf_hh 23.01.2012 19:41

:lol: selbstverständlich habe ich das gelesen.
du klangst sehr unsicher deswegen habe ich auf weitere antworten warten wollen.

take_a_7 23.01.2012 19:47

Moin,

Zitat:

Zitat von gandalf_hh (Beitrag 509926)
:lol: selbstverständlich habe ich das gelesen.
du klangst sehr unsicher deswegen habe ich auf weitere antworten warten wollen.

Achso. Naja, es war früh am Morgen und ich habs nicht getestet. Jetzt hab ich es getestet und kann es voll und ganz empfehlen.

EDIT: Meine Testseite: http://test.take-weiland.de/profile.htm

gruß,
take

gandalf_hh 23.01.2012 21:35

danke für die antwort.
was ich mich jetzt frage ist, warum veränderst du den ganzen aufbau?
was genau hat dich dazu gebracht den aufbau mit: dl, dt, dd zu schreiben?

ich mein das funktioerniert doch ganz gut:

<div id="profilcontent">.........................flot: l eft width:990px: height:200px;
<div id ="profilbild"><img /></div>.......flot:left width:290px: height:200px;
<div id ="text"></div>...........................flot:left width:700px: height:200px;
</div>

ich hab noch nie mit dl, dt, dd zutun gehabt. vorhin hab ich gelesen es seien definitionslisten.
gibt es ein nachteil mit meinen "div id" aufbau???

take_a_7 23.01.2012 21:44

Moin,

Zitat:

Zitat von gandalf_hh (Beitrag 509932)
danke für die antwort.
was ich mich jetzt frage ist, warum veränderst du den ganzen aufbau?
was genau hat dich dazu gebracht den aufbau mit: dl, dt, dd zu schreiben?

Das Stichwort heißt Semantik. Du kannst theoretisch (!) deine ganze Seite (außer body, head, usw. natürlich) nur mit dem Element div bauen. Sieht genauso aus. Warum gibt es denn dann überhaupt p, ul, ol, dl, img, blockquote, strong, em, a, usw. usf.? Genau: Sie haben eine Bedeutung. p bedeutet: Das was hier drin steht, ist ein Absatz. ul bedeutet: Das ist eine Liste. Und dl kann eben ziemlich viel heißen. Grob gesagt ist es eine Vereinfachte Tabelle mit nur 2 Spalten (dt und dd).
Und genau diese Struktur hat dein Inhalt. HTML zeichnet eben den Inhalt aus, und zwar so, dass seine Bedeutung klar wird. Das geschieht mit den verschiedenen Elementen.
Zitat:

Zitat von gandalf_hh (Beitrag 509932)
ich mein das funktioerniert doch ganz gut:

<div id="profilcontent">.........................flot: l eft width:990px: height:200px;
<div id ="profilbild"><img /></div>.......flot:left width:290px: height:200px;
<div id ="text"></div>...........................flot:left width:700px: height:200px;
</div>

Es "funktioniert ganz gut" ist für mich bisher immer ein Zeichen für das Gegenteil gewesen. Spätestens bei 2 Profilbildern wird das ganze ungültiges HTML, da eine ID doppelt vergeben wird. Aber selbst wenn du das auf das class-Attribut umbaust, ist es noch nicht optimal. Denn semantisch wird kein Zusammenhang zwischen dem Profilbild und dem Text deutlich. Schau dir deine Seite mal komplett ohne CSS an. Der Inhalt muss komplett erkennbar sein. Dann ist dein HTML gut.
Nochmal: Ich weiß nicht, was genau in das div#text rein soll, schreib das doch mal bitte. Evtl. passt dann die Definitionsliste doch nicht, es hängt eben vom Inhalt ab.

gruß,
take

gandalf_hh 23.01.2012 22:28

also, im linken kasten soll immer eine <img/> datei, sagen wir mal vom tisch oder schrank.
im rechten text kasten soll eine beschreibung in tabellenform mit 4 spalten und mehreren zeilen.

<table>
<colgroup span="4"><col width="120"><col width="150"><col width="120"><col width="150"></colgroup>
<tr><td>TISCH</td></tr>
<tr><td>Tisch Größe</td><td>Hoch: 2 m</td><td>Lang: 1,8 m</td><td>Tief: 50cm</td></tr>
<tr><td>Tisch Größe</td><td>Hoch: 2 m</td><td>Lang: 1,8 m</td><td>Tief: 50cm</td></tr>
</table>

da unter kommen noch 2 tabellen...


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020