SELFHTML Forum
SELFHTML Forumsarchiv
2008
Mai
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: Sympatisant, 30. 05. 2008, 12:22
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
--
"Non dura iubeantur, non prohibeantur inpura."
Die folgende Nachricht zum Thema stammt von: suit, 30. 05. 2008, 12:28
»» 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 ;)
Die folgende Nachricht zum Thema stammt von: Sympatisant, 30. 05. 2008, 12:57
Hallo,
ja, fuerwahr, eine Liste.. das ist es durchaus ;-)
MfG,
Sympatisant
--
"Non dura iubeantur, non prohibeantur inpura."
Die folgende Nachricht zum Thema stammt von: Sympatisant, 30. 05. 2008, 13:28
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
Die folgende Nachricht zum Thema stammt von: suit, 30. 05. 2008, 13:44
»» 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 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
Die folgende Nachricht zum Thema stammt von: Sympatisant, 30. 05. 2008, 14:19
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
--
"Non dura iubeantur, non prohibeantur inpura."
Die folgende Nachricht zum Thema stammt von: suit, 30. 05. 2008, 14:36
»» 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>
Die folgende Nachricht zum Thema stammt von: Sympatisant, 30. 05. 2008, 15:16
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
--
"Non dura iubeantur, non prohibeantur inpura."
Die folgende Nachricht zum Thema stammt von: suit, 30. 05. 2008, 15:38
»» 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 ;)
Die folgende Nachricht zum Thema stammt von: gooxsy, 30. 05. 2008, 12:29
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
--
SELFCODE: sh:( fo:| ch:? rl:° br:& n4:? ie:% mo:) va:} de:> zu:) fl:( ss:( ls:& js:{
Die folgende Nachricht zum Thema stammt von: suit, 30. 05. 2008, 12:37
»» 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 ;)
Die folgende Nachricht zum Thema stammt von: Cheatah, 30. 05. 2008, 12:41
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
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
Die folgende Nachricht zum Thema stammt von: suit, 30. 05. 2008, 12:55
»» 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
Die folgende Nachricht zum Thema stammt von: Sympatisant, 30. 05. 2008, 12:56
Hallo Cheatah,
das war ja mein erster Ansatz. Dank der Forenbeitraege bin
ich dann ja zu einem anderen Ergebnis(*) gelangt.
MfG,
Sympatisant
--
"Non dura iubeantur, non prohibeantur inpura."
© 1998-2006 
Impressum, Software: Classic Forum
(CSS)