nicht angemeldet
Zeilenabstand entfernen
1 0 
Der Martin
0 1 Der Martin
0 0 0 Der Martin
0 0 Der Martin
0 0 
Gunnar Bittersmann
0
0 0 
MudGuard
0
0
Zeilenabstand entfernen
Hallo,
gibt es eine Möglichkeit, den Zeilenabstand in einem div zu entfernen?
Ich habe es mit line-height: 0; probiert, das funktioniert auch soweit, nur wird dann die Hintergrundfarbe in untergeordneten divs nicht mehr angezeigt.
Ideen?
Danke!
-
Hi,
gibt es eine Möglichkeit, den Zeilenabstand in einem div zu entfernen?
Wozu, was willst du erreichen?
Ich habe es mit
line-height: 0;probiert, das funktioniert auch soweit, nur wird dann die Hintergrundfarbe in untergeordneten divs nicht mehr angezeigt.
Ideen?Ja - beschreibe dein Problem so, dass wir es nachvollziehen können.
Valides (vorzugweise Online-) Beispiel, genaue Beschreibung von gewünschtem Ergebnis.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Wozu, was willst du erreichen?
Es soll mit Hilfe von verschiedenen Grafiken ein Baum dargestellt werden, der ungefähr so aussieht:
Ja - beschreibe dein Problem so, dass wir es nachvollziehen können.
Valides (vorzugweise Online-) Beispiel, genaue Beschreibung von gewünschtem Ergebnis.Beispielcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> .dirtree .node { line-height: 0; } .dirtree .node div:not(.node):not(.children) { display: inline-block; } .dirtree .node .join { background-image: url(./img/join.gif); /* Bild in der Größe von 18x18 */ height: 18px; width: 18px; } .dirtree .node .desc { background-color: #c0d2ec; } </style> </head> <body> <div class="dirtree"> <div class="node"><div class="join"></div><div class="desc">Knoten 1</div></div> <div class="node"><div class="join"></div><div class="desc">Knoten 1</div></div> <!-- die gleiche Zeile evtl. noch öfters --> </div> </body> </html>Das
line-height: 0;ist dazu da, dass die Grafiken join.gif (
) nahtlos übereinander stehen, was zu einem guten Effekt führt, allerdings wird die Hintergrundfarbe nicht angezeigt. Ohne diese Angabe wird die Hintergrundfarbe zwar angezeigt, dafür gibt es einen Abstand zwischen den beiden Grafiken, der nicht gewollt ist.Problem klar? :)
-
Hi,
Es soll mit Hilfe von verschiedenen Grafiken ein Baum dargestellt werden, der ungefähr so aussieht:
Dann setze das doch erst mal mit vernünftigem HTML um - also bspw. als verschachtelte Listen - bevor du so eine DIV-Suppe zusammenbraust.
Davon abgesehen:
Das
line-height: 0;ist dazu da, dass die Grafiken join.gif () nahtlos übereinander stehen, was zu einem guten Effekt führt, allerdings wird die Hintergrundfarbe nicht angezeigt. Ohne diese Angabe wird die Hintergrundfarbe zwar angezeigt, dafür gibt es einen Abstand zwischen den beiden Grafiken, der nicht gewollt ist.Zwischen den Knoten-Divs gibt es bei mir keinen Abstand - wenn ich die 18px Höhe der .join-Divs, die natürlich die Zeilenhöhe beeinflussen, auskommentiere.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Zwischen den Knoten-Divs gibt es bei mir keinen Abstand - wenn ich die 18px Höhe der .join-Divs, die natürlich die Zeilenhöhe beeinflussen, auskommentiere.
Hast du auch
line-height: 0;auskommentiert? Damit ist es ja kein Problem, nur wird dann die Hintergrundfarbe von den divs mit der Klasse .desc nicht angezeigt.
Die 18px sind ja beabsichtigt, da das Bild auch 18x18px hat.
-
-
-
-
Hi,
gibt es eine Möglichkeit, den Zeilenabstand in einem div zu entfernen?
setze line-height auf denselben Wert wie font-size, dann kleben die Zeilen ohne Abstand aneinander.
Schön oder gar praktisch ist das aber nicht.Ich habe es mit
line-height: 0;probiertDas ist unbrauchbar, dann klatscht du ja die Zeilen direkt aufeinander. Unlesbar.
das funktioniert auch soweit, nur wird dann die Hintergrundfarbe in untergeordneten divs nicht mehr angezeigt.
Hää?
So long,
Martin--
Lieber arm dran als Arm ab.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
setze line-height auf denselben Wert wie font-size, dann kleben die Zeilen ohne Abstand aneinander.
Schön oder gar praktisch ist das aber nicht.Das klappt nicht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> .dirtree .node { line-height: 16px; } .dirtree .node div:not(.node):not(.children) { display: inline-block; } .dirtree .node .join { background-image: url(./img/join.gif); /* Bild in der Größe von 18x18 */ height: 18px; width: 18px; } .dirtree .node .desc { background-color: #c0d2ec; font-size: 16px; } </style> </head> <body> <div class="dirtree"> <div class="node"><div class="join"></div><div class="desc">Knoten 1</div></div> <div class="node"><div class="join"></div><div class="desc">Knoten 1</div></div> <!-- die gleiche Zeile evtl. noch öfters --> </div> </body> </html>Ergebnis:
-
Hallo,
setze line-height auf denselben Wert wie font-size, dann kleben die Zeilen ohne Abstand aneinander.
Schön oder gar praktisch ist das aber nicht.
Das klappt nicht:davon bin ich noch nicht überzeugt, aber dein Beispiel ist mir zu "wüst", um es auszuprobieren.
Ich frage mich nämlich etwas ganz anderes:Das soll eine hierarchisch organisierte Baumstruktur darstellen, schön. Also eine Liste gleichartiger Einträge; eventuell auch eine mehrfach verschachtelte Liste. Aber ich käme nicht auf die Idee, das durch so einer div-Wüste mit Klassengesellschaft darzustellen.
<div class="dirtree">
<div class="node"><div class="join"></div><div class="desc">Knoten 1</div></div>
<div class="node"><div class="join"></div><div class="desc">Knoten 1</div></div>
<!-- die gleiche Zeile evtl. noch öfters -->
</div>Ich sehe das eher so:
<ul class="dirtree"> <li>Knoten 1</li> <li>Knoten 2</li> [...] </ul>Den üblichen Aufzählungspunkt (Bullet) nehmen wir mit list-style-type:none weg, die Verbindungslinie kommt als links ausgerichtetes und nicht wiederholtes Hintergrundbild in die li-Elemente; das letzte seiner Art bekommt ein abweichendes Bild (eines, das keine Linienfortsetzung nach unten mehr hat). Wenn man dann noch die Höhe der li-Elemente an das Bild anpasst, stimmt die Chose schon beinahe. Das kann man dann sogar verschachteln, und die Darstellung passt immer noch.
Das je nach Browser unterschiedliche Handling der Listeneinrückung muss man eventuell normalisieren, indem man padding-left und margin-left sowohl des ul- als auch der li-Elemente explizit setzt.So long,
Martin--
Lebensmotto der Egoisten:
Was ist so schlimm daran, dass jeder nur an sich selbst denkt? Dann ist doch an alle gedacht!
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Ich sehe das eher so:
<ul class="dirtree">
<li>Knoten 1</li>
<li>Knoten 2</li>
[...]
</ul>> > Den üblichen Aufzählungspunkt (Bullet) nehmen wir mit list-style-type:none weg, die Verbindungslinie kommt als links ausgerichtetes und nicht wiederholtes Hintergrundbild in die li-Elemente; das letzte seiner Art bekommt ein abweichendes Bild (eines, das keine Linienfortsetzung nach unten mehr hat). Wenn man dann noch die Höhe der li-Elemente an das Bild anpasst, stimmt die Chose schon beinahe. Das kann man dann sogar verschachteln, und die Darstellung passt immer noch. > Das je nach Browser unterschiedliche Handling der Listeneinrückung muss man eventuell normalisieren, indem man padding-left und margin-left sowohl des ul- als auch der li-Elemente explizit setzt. Das ist das Ergebnis des tatsächlichen Codes, generiert durch JavaScript:  Und das kriegt man mit der Technik, die du erwähnt hast, sicher schlecht hin. Außerdem sind auch noch die Minus- bzw. Plus-Buttons anklickbar, dementsprechend wird der Baum erweitert/zusammengeklappt. Außerdem kann der Baum theoretisch in eine unbegrenzte Tiefe gehen.-
Hi,
Das ist das Ergebnis des tatsächlichen Codes, generiert durch JavaScript:
Und das kriegt man mit der Technik, die du erwähnt hast, sicher schlecht hin.Wieso sollte man das nicht hinkriegen?
Außerdem sind auch noch die Minus- bzw. Plus-Buttons anklickbar, dementsprechend wird der Baum erweitert/zusammengeklappt.
Gut, dafür wäre vor den jeweligen List-Items dann ggf. ein entsprechendes Element einzufügen.
Außerdem kann der Baum theoretisch in eine unbegrenzte Tiefe gehen.
Listen lassen sich auch in beliebiger Tiefe verschachteln.
Deine Gegenargumente sind alle keine.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Wieso sollte man das nicht hinkriegen?
Machen kann man es schon, nur bringt das nichts wirklich. Ich kann dann wieder ein paar divs oder img-Elemente in jedes li einfügen, damit der Strich (ein Bild) je nach Tiefe der Verschachtelung mehrfach dargestellt wird.
-
@@ChrisB:
nuqneH
Gut, dafür wäre vor den jeweligen List-Items dann ggf. ein entsprechendes Element einzufügen.
„Entsprechend“ heißt dann wohl input[@type="checkbox"]. Dann braucht man für das ganze Auf und Zu nicht eine Zeile JavaScript (IE ausgenommen).
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
Hi,
<ul class="dirtree">
<li>Knoten 1</li>
<li>Knoten 2</li>
[...]
</ul>> Das ist das Ergebnis des tatsächlichen Codes, generiert durch JavaScript: >  ja schön, also tatsächlich mehrere Ebenen bzw. verschachtelte Listen. > Und das kriegt man mit der Technik, die du erwähnt hast, sicher schlecht hin. Warum? Sie erscheint mir prädestiniert dafür. > Außerdem sind auch noch die Minus- bzw. Plus-Buttons anklickbar, dementsprechend wird der Baum erweitert/zusammengeklappt. Ja, und? > Außerdem kann der Baum theoretisch in eine unbegrenzte Tiefe gehen. Ja, und? Das mit den anklickbaren Minus- und Plus-Symbolen ist jetzt eine neue Forderung, die das Konzept aber nur minimal aufwendiger macht - ein Icon (also img-Element) mit onclick-Handler, der die untergeordnete Liste sichtbar bzw. unsichtbar macht. Ciao, Martin -- [Es existiert kein Weg](http://community.de.selfhtml.org/zitatesammlung/zitat40), "für" etwas zu optimieren, sondern nur gegen alles andere. (Cheatah) Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Und das kriegt man mit der Technik, die du erwähnt hast, sicher schlecht hin.
Warum? Sie erscheint mir prädestiniert dafür.
siehe hier
Und abgesehen davon, was hätte ich davon, wenn ich mit ul/lis arbeite?-
Hi,
Und das kriegt man mit der Technik, die du erwähnt hast, sicher schlecht hin.
Warum? Sie erscheint mir prädestiniert dafür.
siehe hierwas jetzt? Die Fortsetzung der senkrechten Linie? Ich sagte ja schon, dass man zwei verschiedene Grafiken braucht, um die Verbindungslinien darzustellen. Eine, die nur von oben nach rechts └ verbindet, und eine, die auch nach unten ├ fortsetzt. Letztere machst du einfach sehr, sehr hoch, so dass sie an der ganzen linken Kante des li-Elements entlangläuft.
Und abgesehen davon, was hätte ich davon, wenn ich mit ul/lis arbeite?
Ein Markup, das die Struktur des darzustellenden Inhalts auch angemessen beschreibt.
Mit anderen Worten: Eine passende Semantik.
Übersichtlicher wird's außerdem auch noch.Ciao,
Martin--
Lieber eine Fliege im Porzellanladen
als ein Elefant in der Suppe.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
was jetzt? Die Fortsetzung der senkrechten Linie? Ich sagte ja schon, dass man zwei verschiedene Grafiken braucht, um die Verbindungslinien darzustellen. Eine, die nur von oben nach rechts └ verbindet, und eine, die auch nach unten ├ fortsetzt. Letztere machst du einfach sehr, sehr hoch, so dass sie an der ganzen linken Kante des li-Elements entlangläuft.
Sollen die auch per CSS bewerkstelligt werden, oder über ein eigenes Element (<img> oder so)?
-
was jetzt? Die Fortsetzung der senkrechten Linie? Ich sagte ja schon, dass man zwei verschiedene Grafiken braucht, um die Verbindungslinien darzustellen. Eine, die nur von oben nach rechts └ verbindet, und eine, die auch nach unten ├ fortsetzt. Letztere machst du einfach sehr, sehr hoch, so dass sie an der ganzen linken Kante des li-Elements entlangläuft.
Sollen die auch per CSS bewerkstelligt werden, oder über ein eigenes Element (<img> oder so)?ich würde sie, wie anfangs schon erklärt, als Hintergrundbilder setzen.
Und die Plus/Minus-Symbole als img-Element draufsetzen.Wobei ... man kann die Symbole natürlich auch zusammenfassen; das Plus/Minus-Symbol kann ja nur auf einer Verzweigung sitzen, niemals auf dem letzten Listeneintrag. Also könnte man auch je nach Status das Hintergrundbild austauschen. Das wäre dann eine CSS-only-Lösung; Javascript setzt oder löscht beim Anklicken nur eine zusätzliche Klasse, z.B. "expanded", die zugehörige Darstellung wird ausschließlich per CSS festgelegt. Schöner wär's ...
So long,
Martin--
Lache, und die Welt wird mit dir lachen.
Schnarche, und du schläfst allein.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
das Plus/Minus-Symbol kann ja nur auf einer Verzweigung sitzen, niemals auf dem letzten Listeneintrag.
*rechtsguck* ... *linksguck* ... *überdieschulterguck*
Hat keiner gemerkt, dass das Blödsinn ist?
*stirnabwisch*
Hab ich ja nochmal Glück gehabt. ;-)Schönen Abend noch,
Martin--
Wieso heißen die Dinger eigentlich Anrufbeantworter? Eigentlich sind es doch nur Anrufanhörer.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
@@Der Martin:
nuqneH
dass man zwei verschiedene Grafiken braucht
zwei verschiedene Grafiken != zwei verschiedene Grafikdateien
Beide Grafiken sollten in einer Grafikdatei sein – CSS-Sprites.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
dass man zwei verschiedene Grafiken braucht
zwei verschiedene Grafiken != zwei verschiedene Grafikdateien
Beide Grafiken sollten in einer Grafikdatei sein – CSS-Sprites.richtig, so konkret war ich mit dem Gedanken noch gar nicht. Und dein Vorschlag mit den Checkboxen ist natürlich auch elegant. Man müsste allerdings die Checkbox selbst verstecken und nur das zugehörige Label stylen.
Ciao,
Martin--
Frauen sind wie Elektrizität: Fasst man sie an, kriegt man eine gewischt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
[latex]Mae govannen![/latex]
Und das kriegt man mit der Technik, die du erwähnt hast, sicher schlecht hin.
Warum? Sie erscheint mir prädestiniert dafür.
siehe hierIch sehe dort wirklich keinen Grund, der _gegen_ Listen sprechen würde. Ob du nun „außen rum“ ein »div« (Klasse: node)
schreibst oder ein »li« nimmst, ist auch egal. Mit Listen hast du aber weitere Vorteile.Und abgesehen davon, was hätte ich davon, wenn ich mit ul/lis arbeite?
Klar definierte Semantik. Eine klar ersichtliche Einrückungs-Struktur. Ggf. bestimmte Klassen unnötig.
Stur lächeln und winken, Männer!
Kai--
Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
in Richtung "Mess up the Web".(suit)
SelfHTML-Forum-Stylesheet-
@@Kai345:
nuqneH
Ggf. bestimmte Klassen unnötig.
Den Fall sehe ich hier als gegeben an. _Alle_ Klassen sind unnötig, evtl. bis auf die für äußerste Liste.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
-
-
-
-
Hallo,
gibt es eine Möglichkeit, den Zeilenabstand in einem div zu entfernen?
Ich habe es mitline-height: 0;probiert, das funktioniert auch soweit, nur wird dann die Hintergrundfarbe in untergeordneten divs nicht mehr angezeigt.
Ideen?Danke!
Hallo
hmm meinst du vielleicht das?
*{ padding: 0; margin: 0; color: #white; }mfg
-
Hi,
color: #white;
Die Anzahl der Hexziffern muß 3 oder 6 betragen, Du hast 5. Und davon sind die ersten 4 auch noch keine Hexziffern ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
hmm meinst du vielleicht das?
*{
padding: 0;
margin: 0;
color: #white;
}Das mit dem Sternchen ist wenig sinnvoll, in meinem Beispiel habe ich das so versucht: ~~~css .dirtree .node, .dirtree .node * { padding: 0; margin: 0; }Der Abstand zwischen den divs mit der Klasse .node bleibt weiterhin bestehen.
-
-
Das Problem hat sich nun gelöst, nachdem ich statt divs spans genommen habe:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> .dirtree .node, .dirtree .node span { padding: 0 0 0 0; margin: 0 0 0 0; /*line-height: 16px;*/ font-size: 16px; } .dirtree .node, .dirtree .node .children { display: block; clear: left; line-height: 0; } .dirtree .node .join { display: inline-block; } .dirtree .node .join { background-image: url(./img/join.gif); /* Bild in der Größe von 18x18 */ height: 18px; width: 18px; } .dirtree .node .desc { background-color: #c0d2ec; font-size: 16px; } </style> </head> <body> <div class="dirtree"> <span class="node"><span class="join"></span><span class="desc">Knoten 1</span></span> <span class="node"><span class="join"></span><span class="desc">Knoten 2</span></span> <!-- die gleiche Zeile evtl. noch öfters --> </div> </body> </html>Ich weiß, das ist nicht eure Musterlösung...
-
Hallo,
Das Problem hat sich nun gelöst, nachdem ich statt divs spans genommen habe:
oh mann ... *resignier*
Ich weiß, das ist nicht eure Musterlösung...
Ein wunderbares Beispiel für einen Euphemismus.
Schönes Wochenende,
Martin--
F: Was ist ekliger als ein angebissener Apfel mit einem Wurm drin?
A: Ein angebissener Apfel mit einem halben Wurm.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-