nicht angemeldet
frueher gab es das blind(transparent)gif
Hallo ihr,
frueher, als HTML-Seiten noch mit Blindgifs zusammengenagelt wurden, wurde ja mittels eines transparenten 1pixel großen Gifs Abstände genauestens definiert.
Nun wollen wir uns ja so gaaanz laaaangsam von alten eingefahrenen Wegen verabschieden und dies per CSS erledigen. Bisher tu ich dies mit einer solchen Anweisung:
<div style="font-size:5px"> </div>
je nachdem wie gross der Abstand sein soll. jetzt meine Frage(n). Ist dies Style-konform oder gibt es diesbezueglich eine andere einfachere Moeglichkeit oder ist es vielleicht einfach nur schlechter Code.
Es versteht sich von selbst, dass wir bei verlassen der eingefahrenen Wege einen Old-Browser wie NS 4.x vernachlaessigen koennen.
viele Gruesse
scribble
-
hi
<div style="font-size:5px"> </div>
je nachdem wie gross der Abstand sein soll. jetzt meine Frage(n). Ist dies Style-konform oder gibt es diesbezueglich eine andere einfachere Moeglichkeit oder ist es vielleicht einfach nur schlechter Code.
das IST schlechter Code. Überleg lieber, wozu der Abstand da ist, meistens geht's dann mit padding oder margin besser.
Es versteht sich von selbst, dass wir bei verlassen der eingefahrenen Wege einen Old-Browser wie NS 4.x vernachlaessigen koennen.
nicht wirklich.
-
Hallo Scribble,
das geht einfacher, obwohl div's schon der richtge Ansatz sind. Du kannst aber mit "Koordinaten" genau angeben, wo ein Text oder eine Grafik plaziert sein soll und sie auch mehrfach übereinander legen.
Sowohl
http://selfhtml.teamone.de/html/text/bereiche.htm
als auch
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm
sind in dem Zusammenhang sehr lesenswert!
Greetz,
Andreas -
MoiN!
<div style="font-size:5px"> </div>
Ist dies Style-konform oder gibt es diesbezueglich eine andere einfachere Moeglichkeit oder ist es vielleicht einfach nur schlechter Code.
Der angeführte Code ist valide. Nur ist er nicht sehr schön, und das aus mehreren Gründe:
1. Der Sinn der Übung ist ja, Content von Formatierung zu trennen. Das verbietet den Einsatz von style="" praktisch vollkommen! Es mag ganz ganz winzige Ausnahmen geben, aber in der Regel ist eine ID oder eine class die schönere Lösung.
2. Wenn es nur darum geht, ein rechteckiges Feld mit gewissem Platzanspruch zu erzeugen: width und height können auch einem leeres <div> zugewiesen werden. Das ist dort also extrem störend, wenn man plötzlich nur noch 1x1 Pixel haben möchte - oder garkeinen mehr.
3. Welcher Font ist denn dort wirksam? Eventuell ist das Leerzeichen deshalb unterschiedlich breit! Das könnte ganz üble Auswirkungen haben.
Lösungsmöglichkeiten sind extrem davon abhängig, was du machen willst.
Ein Block-Bereich hat drei Außenbereiche um sich herum: Padding, Border und Margin. Padding ist innerhalb und wird mit der zugewiesenen Hintergrundfarbe ausgefüllt. Border erklärt sich irgendwie von selbst, und ist außen ums Padding herum. Margin ist ein immer transparenter Bereich außerhalb der Border. Jeder einzelne Randbereich ist beliebig in der Größe veränderbar, und das für jede einzelne der vier Seiten unabhängig von den anderen Seiten. Jeder Block-Bereich ist grundsätzlich beliebig positionierbar.
Wenn du also das erreichen willst, was früher von Blind-GIFs übernommen wurde, dann kommt es ganz stark darauf an, WAS du erreichen willst. Einrückung von Text, Abstand jeder Art? Padding oder Margin verändern. Nur Einrücken der ersten Zeile? text-indent!
Es gibt nur sehr wenig (eigentlich nichts), was man noch mit irgendwelchen fest definierten Elemente machen muß, um Platz zu schaffen.
- Sven Rautenberg
-
Hi Sven,
Wenn du also das erreichen willst, was früher von Blind-GIFs übernommen wurde, dann kommt es ganz stark darauf an, WAS du erreichen willst. Einrückung von Text, Abstand jeder Art? Padding oder Margin verändern. Nur Einrücken der ersten Zeile? text-indent!
Nach <br[/]> wird nicht mehr eingerückt. Was tun?
Bye,
Peter-
MoiN, Peter!
Nach <br[/]> wird nicht mehr eingerückt. Was tun?
Neuen Absatz machen.
<p>Absatz 1 Blablahkahj ghghjgjhasdfgh gkjhgk</p>
<!-- hier war ein <br> -->
<p>Absatz 2 blakldjklhjl sagjhkghjk </p>Wenn die Default-Formatierungen von <p> nerven, nimm <div>.
- Sven Rautenberg
-
-
n'abend
<div style="font-size:5px"> </div>
Der angeführte Code ist valide. Nur ist er nicht sehr schön, und das aus mehreren Gründe:
- Der Sinn der Übung ist ja, Content von Formatierung zu trennen. Das verbietet den Einsatz von style="" praktisch vollkommen! Es mag ganz ganz winzige Ausnahmen geben, aber in der Regel ist eine ID oder eine class die schönere Lösung.
ja, mach ich auch immer, nur hier war es die schnellste und einfachste Art etwas zu zeigen :-)
- Wenn es nur darum geht, ein rechteckiges Feld mit gewissem Platzanspruch zu erzeugen: width und height können auch einem leeres <div> zugewiesen werden. Das ist dort also extrem störend, wenn man plötzlich nur noch 1x1 Pixel haben möchte - oder garkeinen mehr.
das stimmt, an diese Moeglichkeit hatte ich noch nicht gedacht. werde ich wohl height und weight in Betracht ziehen
Ein Block-Bereich hat drei Außenbereiche um sich herum: Padding, Border und Margin. Padding ist innerhalb und wird mit der zugewiesenen Hintergrundfarbe ausgefüllt. Border erklärt sich irgendwie von selbst, und ist außen ums Padding herum. Margin ist ein immer transparenter Bereich außerhalb der Border.
:-)) um eben aber diverse inkombatibilitaeten(unvermoegen) mit den verschiedensten Browsern zu umgehen, wollte ich eben nicht auf padding, margin und border zurueckgreifen (macht der opera jetzt das padding, rechnet der IE5 beim padding anders als der 6er usw usf)
ich wollte winfach einen fest definierten abstand, wenn ich eine Box mache, dann weiss ich schon richtig mit den Begriffen umgehen zu koennen :-)Es gibt nur sehr wenig (eigentlich nichts), was man noch mit irgendwelchen fest definierten Elemente machen muß, um Platz zu schaffen.
jepp, deswegen werde ich in bestimmten Faellen eben auf ein div mit einer height/weight angabe zurueckgreifen. in einer Box tut es halt wie bisher ein margin/padding.
Aber Fliesstext formatiere ich dann halt gern per:<div class="box">
Fließtext, Fließtext, Fließtext,
<div class="abstand5"></div>
Fließtext, Fließtext, Fließtext,
</div>vielen Dank
scribble-
MoiN!
:-)) um eben aber diverse inkombatibilitaeten(unvermoegen) mit den verschiedensten Browsern zu umgehen, wollte ich eben nicht auf padding, margin und border zurueckgreifen (macht der opera jetzt das padding, rechnet der IE5 beim padding anders als der 6er usw usf)
Standards-Mode einschalten durch Angabe einer URL im DOCTYPE - dann sollte der IE korrekt rechnen. :)
Aber Fliesstext formatiere ich dann halt gern per:
<div class="box">
Fließtext, Fließtext, Fließtext,
<div class="abstand5"></div>
Fließtext, Fließtext, Fließtext,
</div>Sieht für mich irgendwie scheiße aus - verzeihe das offene Wort. :)
Gewöhnlich würde ich sowas machen:
<div class="box">
<div class="absatz">
Flietext
</div>
<div class="absatz">
Fließtext
</div>
</div>Das Padding rechnet beim IE ja nur unterschiedlich, wenn die width (oder height) angegeben ist.
Die Breite eines Bereichs ist laut Standard:
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.
Der IE rechnet aber normal falsch so die Breite aus:
margin-left + border-left + width + border-right + margin-right
Das Padding wird zwar beachtet und eingetragen, es wird aber von der width abgezogen, so daß dem Inhalt weniger Platz zur Verfügung steht.
Das ist aber uninteressant, wenn gar keine width explizit angegeben ist, weil dann beide Berechnungen automatische Werte annehmen - die sind zwar dann unterschiedlich, aber das ist für die Darstellung irrelevant.
Wenn du also 5 px Abstand unten haben willst, bieten sich padding oder margin an, ohne daß es Auswirkungen auf die unterschiedlichen Browser hätte.
- Sven Rautenberg
-
guten morgen auch,
Aber Fliesstext formatiere ich dann halt gern per:
<div class="box">
Fließtext, Fließtext, Fließtext,
<div class="abstand5"></div>
Fließtext, Fließtext, Fließtext,
</div>Sieht für mich irgendwie scheiße aus - verzeihe das offene Wort. :)
verzeihung angenommen, war ja auch ein Grund warum ich fragte - weil es einfach nicht schoen aussieht
Gewöhnlich würde ich sowas machen:
<div class="box">
<div class="absatz">
Flietext
</div>
<div class="absatz">
Fließtext
</div>
</div>ich werde jetzt mein ganzes Gerassel nochmal ueberarbeiten.
dank dir
gruss scribble
-
-
-
hi Du,
frueher, als HTML-Seiten noch mit Blindgifs zusammengenagelt wurden, wurde ja mittels eines transparenten 1pixel großen Gifs Abstände genauestens definiert.
versuch das mal, css:
p.space {
margin-bottom: 5px;
}html:
<p class="space">Test</p>
<p class="space">mehr Test</p>
<p class="space">weiterer Test</p>Gruesse Joachim