Divs untereinander mit jeweiligen Border

[Sympatisant]

Hallo,

da ich derzeit an einer kompletten Umstellung von Tabellen nach Div (oder
alternative Elemente) beschaeftigt bin, habe ich mal wieder eine Frage:

Und zwar moechte gerne mehrere Div-Container untereinander auflisten.
Jeder Container besitzt eine ihn umschliessende Border.
Nun ist es jedoch so, dass wenn die Container direkt untereinander
liegen, die Border zwischen den jeweiligen Divs ausschaut, als
waere sie doppelt so breit (da der untere Rand des einen, und der
obere Rand des anderen ja direkt zusammen liegen).
Gibt es da eine kluge Moelgichkeit das zu umgehen?

So ist es:
|-------------|

-------------
-------------

So soll es sein:
|-------------|

-------------

Besten Dank fuer Tipps.

MfG,
Sympatisant

[suit]

Und zwar moechte gerne mehrere Div-Container untereinander auflisten.

hört sich nach einer liste an, oder liege ich da falsch - was sollen die elemente denn darstellen?

mach dir zuerst darüber gedanken, was es ist und dann erst, wie du es darstellen könntest - damit hast dus viel leichter

es kann gut sein, dass du gar keine <div />-elemente möchtest sondern ganz etwas anders ;)

[Sympatisant]

Hallo,

ja, fuerwahr, eine Liste.. das ist es durchaus ;-)

MfG,
Sympatisant

[Sympatisant]

Hi,

Ich habe nun eine Liste gewaehlt.
Es sollen bis zu drei ListItems pro Zeile dargestellt werden.
Hierzu verwende ich fuer die LI-Elemente float:left und eine
definierte Breite (in %).
Nun ist es so, dass, gebe ich dem umliegenden UL eine Border,
die einzelnen LIs nicht innerhalb dieser visuellen Begrenzung
liegen.

  
<ul class="listContainer">  
 <li class="odd">BMW</li>  
 <li class="even">Alfa</li>  
 <li class="odd">Mercedes</li>  
 <li class="even">Audi</li>  
</ul>  

Ich habe bereits davon gehoert, dass man das Floaten mittels
clear:both wieder aufloesen muss.

Doch fuege ich zB folgende Zeile unter der Liste hinzu:

  
<div style="clear:both;"></div>  

so bekomme ich das selbe Ergebnis.

Packe ich es vor das schliessende UL-Element, so klappt
es zwar im FF, aber die Element-Referenz sagt ja eindeutig,
dass das so nicht erlaubt ist.

---

Des weiteren wuerde ich mal gerne erfahren, wie man drei
Elemente pro "Zeile" so anlegen kann, dass sie 100% der Breite
des sie umliegenden ULs einnehmen?
Arbeite ich mit 33% fuer die Breitenangabe, so fehlt natuerlich
das restliche 1% und zwischen der Border der UL und dem aeussersten
LI-Item ist eine kleine Luecke.

---

Verzeiht mir wenn ich so viele Fragen habe, doch so manches finde
ich derzeit einfach noch muehselig resp. unlogisch.

---

Code CSS

  
.listContainer {  
 border-width:1px;  
 border-style:solid;  
 margin:0px;  
 padding:0px;  
 float:none;  
 clear:both;  
}  
.listContainer li {  
 border-width:0px 1px 1px 0px;  
 border-style:solid;  
 margin:0px;  
 padding:0px 2px 0px 4px;  
 float:left;  
 height:45px;  
 width:32%;  
}  
  
.listContainer li.odd {  
 background-color:white;  
}  
.listContainer li.even {  
 background-color:#EFEFEF;  
}  

Vielen Dank & Gruesse,
Sympatisant

[suit]

Ich habe bereits davon gehoert, dass man das Floaten mittels
clear:both wieder aufloesen muss.

müssen nicht, aber in deinem fall wahrscheinlich sinnvoll

Doch fuege ich zB folgende Zeile unter der Liste hinzu:

<div style="clear:both;"></div>

> so bekomme ich das selbe Ergebnis.  
  

> Packe ich es vor das schliessende UL-Element, so klappt  
> es zwar im FF, aber die [Element-Referenz](http://de.selfhtml.org/html/referenz/elemente.htm#ul) sagt ja eindeutig,  
> dass das so nicht erlaubt ist.  
  
du musst die clear-eigenschaft innerhalb der liste anweden, da du ja willst dass das <ul /> aufgezogen wird - daher musst du diese eigenschaft dem letzten <li />-element in der liste zuweisen  
  
es zwingt dich niemand clear: both in ein div-element zu setzen  
  

> Des weiteren wuerde ich mal gerne erfahren, wie man drei  
> Elemente pro "Zeile" so anlegen kann, dass sie 100% der Breite  
> des sie umliegenden ULs einnehmen?  
> Arbeite ich mit 33% fuer die Breitenangabe, so fehlt natuerlich  
> das restliche 1% und zwischen der Border der UL und dem aeussersten  
> LI-Item ist eine kleine Luecke.  
  
wenn du drei elemente nebeneinaner haben willst sind die klassen even/odd etwas unpraktisch, da du ja 3 wechselnde zustände hast - natürlich trennst du damit nicht sauber design von inhalt, aber in diesem fall hilfts nicht  
  
klassen  
.item1, .item2, .item3 {  
  width: 33%;  
}  
  
.item3 {  
  width: 34%;  
}  
  
geht leider nicht anders in dem fall, da bekanntlicherweise 1/3 eine reationale zahl bzw ein periodischer dezimalbruch  
  

> Verzeiht mir wenn ich so viele Fragen habe, doch so manches finde  
> ich derzeit einfach noch muehselig resp. unlogisch.  
  
wer nicht frägt, stirbt dumm oder so ;) wenn mans mal halbwegs begriff hat, ist es nicht mehr so schwer

[Sympatisant]

Hallo suit,

danke fuer dein Verstaendnis ;-)

du musst die clear-eigenschaft innerhalb der liste anweden, da du ja
willst dass das <ul /> aufgezogen wird - daher musst du diese
eigenschaft dem letzten <li />-element in der liste zuweisen

Screenshot:
http://imgplace.com/image/view/f0d0088267b8819bad9673a7961ef87d

Der gruene Pfeil zeigt, dass das letzte Element ein float:none bekommen hat.
Der rote Pfeil zeigt die Border der umliegenden Ul.
Der gelbe Pfeil zeigt das Element mit float:none.

Komischerweise ist der Mercedes-Eintrag als letztes aufgelistet, obwohl
VW der letzte  Eintrag sein sollte.

klassen
.item1, .item2, .item3 {
  width: 33%;
}

.item3 {
  width: 34%;
}

Das scheint logisch.

wenn du drei elemente nebeneinaner haben willst sind die klassen even/odd
etwas unpraktisch

Naja, im Screenshot erkennt man ja vllt. wie es gemeint sein soll.

wer nicht frägt, stirbt dumm oder so ;) wenn mans mal halbwegs begriff
hat, ist es nicht mehr so schwer

bis dahin ist es noch ein langer weg bei mir ;-)

MfG,
Sympatisant

[suit]

Der gelbe Pfeil zeigt das Element mit float:none.

float: none; ist dein fehler - auch wenn das letzte element nicht floatet, das davor tuts und somit darf das nachfolgende auch noch rein, zudem scheint der ul selbst noch nichts vom float zu wissen bzw von seinem verhalten

Komischerweise ist der Mercedes-Eintrag als letztes aufgelistet,

beim mercedes-logo musst du vorsichtig sein, mercedes-benz bzw daimler hat sehr strenge vorgaben was deren logo betrifft (auf welchen hintergrundfarben usw) ich meine mich auch erinnern zu können, dass es nicht horizontal neben einem anderen logo eines anderen autoherstellers sein darf

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>float</title>  
  <style type="text/css">  
   * { margin: 0; padding: 0; }  
  
   body { margin: 20px; }  
  
   ul {  
    width: 500px;  
    border: 1px solid green;  
    float: left;  
   }  
  
   li {  
    width: 33%;  
    float: left;  
    list-style: none;  
   }  
  
   .even {background: red; }  
   .odd {background: blue; }  
  
   li.item3 { width: 34%; }  
   li.last-child { clear: right; }  
  </style>  
 </head>  
 <body>  
  <ul>  
   <li class="odd item1">blah 1</li>  
   <li class="even item2">blah 2</li>  
   <li class="odd item3">blah 3</li>  
   <li class="even item1">blah 4</li>  
   <li class="odd item2">blah 5</li>  
   <li class="even item3">blah 6</li>  
   <li class="odd item1 last-child">blah 7</li>  
  </ul>  
 </body>  
</html>  

[Sympatisant]

Salvete,

danke sehr! Dein Beispiel funktioniert wunderbar.

Fuegt man den LI-Elementen jedoch noch eine Border hinzu,
so wirkt sich das auf die gesamte Breite aus, so dass sich
das dritte Element in die neue Zeile verschiebt.

Ich dachte, Prozentangaben waeren genau fuer so etwas geeignet?

MfG,
Sympatisant

[suit]

Fuegt man den LI-Elementen jedoch noch eine Border hinzu,
so wirkt sich das auf die gesamte Breite aus, so dass sich
das dritte Element in die neue Zeile verschiebt.

funktioniert so wie es soll
die breiter der box = margin + border + padding + width

mit deiner rechnung hast du also 33% + 33% + 34% + 6x einen rahmen von X breite, das sind auf jeden fall mehr als 100%

Ich dachte, Prozentangaben waeren genau fuer so etwas geeignet?

wenn du einen absoluten rand (1px) haben willst nein - da bleibt dir nur ein zusätzliches element im <li /> über mit welchem du dann den rand erzeugst (1px solid black) - damit umgehst du diesen schönheitsfehler

mit einem relativen rand wäre es kein problem - aber einen 1%-dicken rahmen auf jeder seite zu haben sieht wahrscheinlich blöd aus

in manchen fällen gibts leider kleine tücken, die man über umwege lösen muss, aber allgemein ist es wesentlich verständlicher

die klassen item1 bis x sowie even/odd bräuchte man ansich auch nicht, dafür gibst die pseudoklasse :nth-child
[http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#nth-child-pseudo]

auch die klasse .last-child von mir ist eine verlegenheitslösung - die gibts ebenfalls schon als :last-child

aber 3x darfst du raten, woran es scheitert ;)

[gooxsy]

Hi Sympatisant,

Und zwar moechte gerne mehrere Div-Container untereinander auflisten.
Jeder Container besitzt eine ihn umschliessende Border.
Nun ist es jedoch so, dass wenn die Container direkt untereinander
liegen, die Border zwischen den jeweiligen Divs ausschaut, als
waere sie doppelt so breit (da der untere Rand des einen, und der
obere Rand des anderen ja direkt zusammen liegen).
Gibt es da eine kluge Moelgichkeit das zu umgehen?

ja, gib dem _obersten_ div einen Rahmen auf allen 4 Seiten und allen anderen nur links, rechts und unten einen Rahmen. Bewerkstelligen kannst Du das, in dem Du dem obersten div eine andere Klasse zuteils als den darunterliegenden.

MfG

gooxsy

[suit]

ja, gib dem _obersten_ div einen Rahmen auf allen 4 Seiten und allen anderen nur links, rechts und unten einen Rahmen. Bewerkstelligen kannst Du das, in dem Du dem obersten div eine andere Klasse zuteils als den darunterliegenden.

alternativ gibst du allen einen entsprechenden rahmen und verschiebst alle nachfolgenden elemente mit negativem margin in der stärke des rahmens drüber ;)

[Cheatah]

Hi,

kompletten Umstellung von Tabellen nach Div

diese Formulierung alleine ist schon erschreckend. Meine Befürchtungen werden durch den von Dir verlinkten Artikel bestätigt: Du schreibst weiterhin kein HTML, sondern bleibst bei Tabellenlayout. Der Unterschied ist, dass Deine Elemente nicht mehr "<table>", "<tr>" und "<td>" heißen, sondern "<div>". Dass Du diese Reduzierung der (falschen) Semantik auf Null durch Klassen wie "div_table_row" kompensierst, war abzusehen.

Beschäftige Dich mit semantischem Markup. Was Du derzeit an Code produziert hast, hat *nichts* mit HTML zu tun. Dein Code ist nicht besser und nicht schlechter als Dein vorheriges Tabellenlayout, er bedient sich nur anderer Namen. Der Umstand, dass Du Probleme mit der Darstellung bekommst, ist zwangsläufige Folge davon.

Cheatah

[suit]

diese Formulierung alleine ist schon erschreckend. Meine Befürchtungen werden durch den von Dir verlinkten Artikel bestätigt: Du schreibst weiterhin kein HTML, sondern bleibst bei Tabellenlayout. Der Unterschied ist, dass Deine Elemente nicht mehr "<table>", "<tr>" und "<td>" heißen, sondern "<div>". Dass Du diese Reduzierung der (falschen) Semantik auf Null durch Klassen wie "div_table_row" kompensierst, war abzusehen.

das hab ich ihm ja schon ausgeredet, das formular ist mittlerweile KUHL :D

[Sympatisant]

Hallo Cheatah,

das war ja mein erster Ansatz. Dank der Forenbeitraege bin
ich dann ja zu einem anderen Ergebnis(*) gelangt.

MfG,
Sympatisant