Steckbrief - Verbaut

[Loon3y]

Hallo,

sitze momentan an einen steckbrief dran..allerdings haben sich da ein paar (zu viele) fehler eingeschlichen und momentan steh ich da und überlege ob ich es nicht komplett anders machen sollte…aber vllt habe ich auch nur etwas übersehen….

Eine Tabelle ist hier schwer zu realisieren, denke ich, denn das würde zu verschachtel sein alles….

So folgendes problem…ich möchte gerne einen „steckbrief“ über mich machen.

Dabei habe ich oben ein paar daten wie name, herkunft usw, zweispaltig, daneben das bild.

Darunter wird eine kurze beschreibung von anderen über mich sein. (Glaub ich bin mir noch nicht sicher) und darunter eine auflistung von „lieblings…“ (..essen, …getränk, ……).

Mein problem ist, das das bild mit float right ist und wenn ich danach cleare einen rießen abstand zu „über mich“ habe. Deshalbe habe ich „div#main div.clear“ eingefügt mit einer height..aber das ist keine saubere lösung…..irgendwie habe ich mich da verbaut…ich find da nichtmehr so ganz zurrecht….

Vllt fällt euch ja der fehler auf. Anbei der code und ein bild davon.

Danke Schonmal

Loon3y


Css:

  div#main div.profil                   { width: 38%; margin-bottom: 10px; float: left; }  
  div#main div.profil_about         { width: 98%; margin: 0 2000px 0 0; padding: 0; min-height: 105px; }
  div#main div.profil_loves          { width: 98%; margin: 0 1% 10px 1%; padding: 0; }               
   
  div#main div.profil_picture       { width: 114px; height: 170px; border: solid 1px #000000; padding: 1px; text-align: center; 
                                                   float:right; background: url("me.jpg") no-repeat; background-position: center center; }

  div#main p.profil_person          { margin: 0 141px 0 0; padding: 0; }
  div#main p.profil_me               { width: 98%; height: 100%; margin: 0 1% 10px 1%; padding: 0; }
  div#main p.profil_large             { width: 98%; margin: 0 1% 10px 1%; padding: 0; float: left; }
  div#main p.profil_info              { border-bottom: dotted 1px #000000; margin: 0 1% 2px 1%; }
  div#main p.profil_description   { font-size: 0.8em; color: #999; font-weight: bold; }
  div#main div.clear                    { height: 280px; }

 

[Loon3y]

html:

<div class="profil_picture"> </div>
    <div class="profil_person">

    <!-- Name -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">Name</p>
    </div>

    <!-- Spitzname -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">Spitzname</p>
    </div>
                
    <!-- Geburtstag -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">Geburtstag</p>
    </div>
    
    <!-- Geschlecht -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">Geschlecht</p>
    </div>
                    
    <!-- Wohnort -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">Wohnort</p>
    </div>
                    
    <!-- Herkunft -->
    <div class="profil">
    <p class="profil_info">  -  </p>
    <p class="profil_description">Herkunft</p>
    </div>
                    
    <!-- Beruf -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">Beruf</p>
    </div>
                    
    <!-- Familienstand -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">Familienstand</p>
    </div>

    </div>     

    <div class="clear"> </div>
    
    <!-- Über Mich -->
    <div class="profil_about">        
    <h2>Über mich</h2><br />
    <p class="profil_me">
    N/A
    </p>     
    </div>

    <!-- Persönliches -->
    <h2>Lieblings...</h2><br />
    <div class="profil_loves">
    
    <!-- AUTOREN -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">..authoren</p>
    </div>

    <!-- ESSEN -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">..essen</p>
    </div>

    <!-- FARBE -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">...farben</p>
    </div>
                     
    <!-- GETRÄNK 1 -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">...getränk (alkoholisch): </p>
    </div>

    <!-- GETRÄNK 2 -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">...getränk (nicht-alkoholisch)</p>
    </div>

    <!-- GEGENSTAND -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">...gegenstand bei mir</p>
    </div>

    <!-- MUSIK -->
    <div class="profil">
    <p class="profil_info"> - </p>
    <p class="profil_description">...musik</p>
    </div>
<div style="clear:both; margin:0; padding:0"></div>
</div>

 

[Efchen]

Also für mich sieht das aus wie tabellarische Daten...heißt ja nicht umsonst auch "tabellarischer Lebenslauf" ;-)

 

[Loon3y]

Also für mich sieht das aus wie tabellarische Daten...heißt ja nicht umsonst auch "tabellarischer Lebenslauf" ;-)

Ja das stimmt...allerdings müsste ich dann die tabelle verschachteln und z.b. beim benutzerbild über 6 zeilen das bild machen. oder kann ich da dennoch dann das bild in ein div nehmen und rechts floaten?

ist die darstellung, also so wie ich es gemacht habe, völlig falsch?

 

[Efchen]

Wozu ein div? Immer dieses "kann ich da ein div nehmen"...

Das Bild muss nicht zwangsläufig ein Bestandteil der Tabelle sein. Es könnte (auch ohne div!) neben der Tabelle floaten.
Oder es wird Bestandteil der Tabelle und bekommt dann eben ein rowspan="6".

Und ich wüsste nicht, wo Du was verschachteln willst. Zumindest erkenne ich dafür aus dem Image keinen Grund dafür.

Und die *Darstellung* kann nicht falsch sein, sie ist entweder so, wie Du sie willst, oder nicht. Wenn Du die *Auszeichnung* meinst, die würde ich wie gesagt mit einer Tabelle machen. Dein Code ist für mich div-Suppe. Allein wie die divs aufgeführt sind, sieht das schon eher noch nach einer Liste aus, aber als solches ist das auch nicht ausgezeichnet.

Nein, ich würde eine Tabelle nehmen...

 

[Loon3y]

Wozu ein div? Immer dieses "kann ich da ein div nehmen"...

Das Bild muss nicht zwangsläufig ein Bestandteil der Tabelle sein. Es könnte (auch ohne div!) neben der Tabelle floaten.
Oder es wird Bestandteil der Tabelle und bekommt dann eben ein rowspan="6".

ok, daran hab ich jetzt nicht gedacht...das stimmt, ich könnte ja dem bild auch eine klasse zuweißen ohne etwas drumrum zu klatschen....allerdings..mit "verschachtelt" meinte ich eben das ich das bild in die tabelle tue und ein rowspan="6" gebe. Mir gefällt das ehrlich gesagt nicht so, weil es nicht zu den tabellarischen daten dazu gehört, oder? es ist ja "nur" ein bild.

Und die *Darstellung* kann nicht falsch sein, sie ist entweder so, wie Du sie willst, oder nicht. Wenn Du die *Auszeichnung* meinst, die würde ich wie gesagt mit einer Tabelle machen. Dein Code ist für mich div-Suppe. Allein wie die divs aufgeführt sind, sieht das schon eher noch nach einer Liste aus, aber als solches ist das auch nicht ausgezeichnet.

endschuldige...hab mich falsch ausgedrückt....nicht so meine woche irgendwie.

dann werde ich mich mal an eine tabelle setzen. habs eigentl schon im koppe wies aufgebaut ist. danke dir vielmals.

 

[Efchen]

mit "verschachtelt" meinte ich eben das ich das bild in die tabelle tue und ein rowspan="6" gebe.

Das hat nichts mit "Verschachtelung" zu tun. Das ist, wie wenn Du Deine Weihnachtsgeschenke in zwei Verpackungen einpackst. Oder eben, wenn Du eine Tabelle in eine Tabellenzelle packst.

Mir gefällt das ehrlich gesagt nicht so, weil es nicht zu den tabellarischen daten dazu gehört, oder? es ist ja "nur" ein bild.

Dann würde ich es außerhalb und neben der Tabelle anordnen.

danke dir vielmals.

Keine Ursache. Wie immer gern geschehen!

Gruß,
-Efchen

 

[Loon3y]

Das hat nichts mit "Verschachtelung" zu tun. Das ist, wie wenn Du Deine Weihnachtsgeschenke in zwei Verpackungen einpackst. Oder eben, wenn Du eine Tabelle in eine Tabellenzelle packst.

interessante erklärung. Dennoch hat ein bild doch nichts mit tabellarischen daten zu tun, oder? Tabellarische Daten zeichnen sich doch gerade dadurch aus, dass sie sich über mehrere zeilen und spalten ziehen mit Erläuterungen und Zusammenhängen. Hab die Sache mit dem Bild jetzt anders gelöst, einfacherer...sollte so besser und vor allem außerhalb der Tabelle sein.


Eine Frage hab eich noch. Wie stelle ich es an,wenn ich diese css-formatierung habe:

div#main td.profil_info     { border-bottom: dotted 1px #000000;  }

dass der border nicht über 100% des bodens scih erstreckt sondern nur 90%? der befehl "border-width:90%;" funktioniert hier irgendwie nicht. Woran liegt das? Das Problem bei der ganzen sache ist, das ich zwei Spalten habe, und dadurch das ich "border:0px;" bei der tabelle setze, bleibt dennoch ein 1px abstand von spalte zu spalte. der ist allerdings so gering das man ihn kaum wahr nimmt und somit denkt man es wäre eine durchgezogene linie. Vor allem weil ich "border: 1px dotted;" habe.

Gruß und, wie immer, besten Dank.

Loon3y

 

[Loon3y]

Und ein Bild kann durchaus zu tabellarischen Daten gezählt werden. Und das nicht nur, wenn auf dem Bild Text steht. Ich musste da jetzt spontan an die Kinder-Sudokus meines Sohnes denken, die nicht aus Zahlen, sondern Bildern bestehen.

ja aber das ist eben der unterschied, wie eben auch hier

Aber auch Bilder können ....

Es ist ja nur EIN bild, keine mehrere. Deshalb ist das ja nicht etwas was man tabellarisch auszeichnen muss. Da es nur Einfach vorkommt. Wenn man EINE Zeile schreibt, macht man ja auch keine Tabelle sondern einen Textabsatz.

Ich denke das würde aber wieder in einer Grundsatzdiskussion enden, von wegen was html'iger ist ;) *grinz*

Das, was Du willst, ist bisher in CSS nicht vorgesehen.
Das ist was anderes, setze doch mal order-collapse:collapse, damit die Rahmen zusammenfallen.

aber ich will ja nicht das sie zusammenfallen, sondern das ein größerer abstand zwischen den zwei spalten ist. :)