zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden profile auflisten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.01.2012, 09:06
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard 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.
Angehängte Grafiken
Dateityp: png Unbenannt.png (11,2 KB, 14x aufgerufen)

Geändert von gandalf_hh (23.01.2012 um 09:12 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.01.2012, 09:40
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
  #3 (permalink)  
Alt 23.01.2012, 10:11
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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???
Mit Zitat antworten
  #4 (permalink)  
Alt 23.01.2012, 10:15
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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?

Geändert von gandalf_hh (23.01.2012 um 10:19 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 23.01.2012, 19:05
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
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
Mit Zitat antworten
  #6 (permalink)  
Alt 23.01.2012, 19:41
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

selbstverständlich habe ich das gelesen.
du klangst sehr unsicher deswegen habe ich auf weitere antworten warten wollen.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.01.2012, 19:47
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
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
Mit Zitat antworten
  #8 (permalink)  
Alt 23.01.2012, 21:35
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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???
Mit Zitat antworten
  #9 (permalink)  
Alt 23.01.2012, 21:44
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
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 anzeigen
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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.01.2012, 22:28
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von gandalf_hh (23.01.2012 um 22:30 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Mit PHP Datein aus verzeichniss auflisten und löschen rommy (X)HTML 4 07.08.2011 02:22
Dateien aus Ordner auflisten und selektiv löschen? sepp88 Serveradministration und serverseitige Scripte 9 06.06.2010 20:52
Profile anlegen b74 Serveradministration und serverseitige Scripte 1 30.05.2009 19:37
2 Myspace Profile tichy Site- und Layoutcheck 18 15.01.2008 11:05
head profile Despairing (X)HTML 9 24.09.2006 15:56


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