profile auflisten
 

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.

Moin,

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: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:Ich hoffe, ich habe hier jetzt nicht kompletten Quatsch erzählt und du kannst damit was anfangen ;)

gruß,
take

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???

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?

Moin,

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

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

Moin,

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

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???

Moin,

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.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

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...

wenn ich mehrere <div id=profilContent> schreibe dann vergebe ich doch nicht das id doppelt? es ist ja immer der selbe div.

Machen wir einen Test:

Ich zähle hier 2x mal die ID profilContent :p

Die ' "" ' habe ich auch mal weggelassen.

Du auf einer Seite zwei Mal <div id="profilContent"> hast, dann ist die ID an zwei Elemente vergeben. Damit ist sie zweimal im selben Dokument und das ist nicht zulässig.

Wenn du also valide über IDs gehen willst, dann brauchst du für jedes Profil eine neue ID. Das dürfte ab ca. 10 Profilen gar nicht mehr so einfach zu handeln werden.

Du könntest es mit einer Klasse umgehen, ich würde jedoch, wie take zeigte, ebenfalls auf Definitionslisten setzen. Sind gar nicht so schwer zu verstehen, eigentlich ist einer Tabelle sehr ähnlich, nur für deine Zwecke besser geeignet.

ich hab grad nochmal einige seiten aufgerufen wo id / class nochmal erklärt wird. es stimmt, ihr habt recht.
ich muss es wohl irgendwann als ich den unterschied zwischen den beiden gelesen habe die namen verwechselt haben.
sorryyy

also leute, ich hab mir den quell text von ebay angeschaut und die arbeiten auch nicht mit definitionslisten. die haben ihre artikel profile mit <td></td> aufgebaut.
und ich arbeite auch an einer seite die so ähnlich aufgebaut ist, lauter profile aufgelistet (bild/beschreibung), mit großer und vielfältiger suchfunktion.

Millionen Mücken können nicht irren... :mrgreen:

Ebay und Konsorten brauchen nicht drauf zu achten. Sind ja schon bekannt genug.

Du willst erst bekannt werden, oder?
Aber egal, mach wie es dir gefällt.

Hi gandalf_hh

nur weil andere es falsch machen, heißt das nicht, dass man es selbst nicht besser machen darf. ;)

Und ebay ist in Sachen Webdesign garantiert kein Vorbild! :lol:


Gruß
Webcoder

Ich weiß echt nicht wieso du jedes mal danach schreist das wir dir Little Boxes nahelegen *seufz* versucht doch bitte erstmal die Basics zu verstehen, bevor du dich an was größeres wagst.

Basics:

- Tabellen == Das ultimative Böse
- Semantik == Das beste wo(! JA WO!!) gibt ;)

Wenn eine deiner Komponenten das Wort Liste enthält, dann ists auch eine Liste und keine Tabelle

Um Corina mal vorzugreifen: das ist falsch. Tabellen sind nur böse wenn sie nicht semantisch eingesetzt werden. Wie alle Elemente. Tabellarische Daten gehören auch weiterhin in Tabellen :p

Danke :).. Hier hab ichs sogar in meine "edith sagt" reingeschrieben, dann den Tab geschlossen und dann war ich zu faul erneut zu schreiben :D

Gibts eig, keine <del> Funktion im Forum? O.o

Was ist denn eine <del>-Funktion? :shock:

Tjaaaaaaa, jetzt hab ich dich verwirrt ;)
Ich mein' eigentlich eine Funktion um Seine Posts zu korrigieren also quasi falsches durchstreichen und durch was anderes ersetzen:

Tryit Editor v1.5
quasi so ;) :D

Nein :pSo etwas will doch keiner :mrgreen: