Gitternetzlinien zwischen postings
Jonathan
0 Jonathan
0 0 Jonathan
0
0 Update
Jonathan
0 0 0 Jonathan
Gitternetzlinien zwischen postings
Jonathan
Hallo,
bei großen Threads finde ich es manchmal schwierig zu sehen, wer auf wen geantwortet hat. Deshalb hab ich mir ein kleines CSS gebastelt, dass wie in einem Treeview so Linien zwischen den Postings anzeigt.
#root ul ul {padding-left:2em;overflow:hidden;}
#root ul ul li:before{content:' ';font-size:0;vertical-align:bottom;padding-left:20px;padding-top:990px;top:-1000px;position:relative;background:url(http://home.arcor.de/jonha/line.png) bottom right no-repeat;}
.posting *{position:relative;z-index:10000;background:white;}
#root li {overflow:hidden;}
#root li + li {overflow:visible;}
.active .posting {background-color:inherit;}
.active .posting * {background-color:inherit;}
a img {vertical-align:bottom;}
Funktioniert anscheinend nur im Firefox und ich bin mir nicht sicher, ob alles darin wirklich nötig oder valide ist. Jedenfalls viel Spaß damit. Vielleicht kann es ja einer aufräumen, sodass es auch in anderen Browsern geht.
Jonathan
-
Hallo,
OK, mit einigen Anzeigefehlern gehts auch so in Opera.:
#root ul ul {padding-left:2em;overflow:hidden;} #root ul ul li:before{content:' ';font-size:0;vertical-align:bottom;padding-left:20px;padding-top:990px;background:url(http://home.arcor.de/jonha/line.png) bottom right no-repeat;} .posting *{position:relative;z-index:10000;background:white;} #root li {overflow:hidden;} #root li + li {overflow:visible;} .active .posting {background-color:inherit;} .active .posting * {background-color:inherit;} a img {vertical-align:bottom;}Die Anzeigefehler verschwinden wenn man die größe des Fensters ändert, deshalb gehe ich davon aus, dass das Problem beim Opera liegt.
Jonathan
-
Hallo Jonathan,
sieht im FF echt gut aus. Danke.
Mit freundlichen Grüßen,
André-
Hallo,
sieht im FF echt gut aus. Danke.
Ja, gibt aber noch ein paar kleinere Probleme. Z.B. werden bei kleinen Fenstergrößen die Postings rechts abgeschnitten. Da könnte man evtl. mit unterschiedlichen Werten für overflow-x und overflow-y was machen...
Jonathan
-
Hallo!
sieht im FF echt gut aus. Danke.
Da kann ich mich nur anschließen!
ciao, ww
--
Schäuble:
"Wir können alles. Außer Rechtsstaat."
-
-
Hallo,
Code wieder etwas aufgeräumt. Auch breite Threads sollten jetzt besser angezeigt werden.
#root ul {padding:0;} #root ul ul {padding-left:2em;overflow:hidden;width:1000px;} #root ul ul li:before{content:' ';font-size:0;vertical-align:bottom;padding-left:20px;padding-top:990px;background:url(http://home.arcor.de/jonha/line.png) bottom right no-repeat;} .posting > *{position:relative;z-index:10000;background:white;} a img {vertical-align:bottom;}Zusätzlich benutze ich übrigens noch:
#nachricht-text, #antwortformular textarea {font-family:monospace;} code,kbd,tt {font-family:monospace;} .active{font-weight:normal !important;} .active > span .title {color:red;font-weight:bold;}Jonathan
-
Hallo,
Code wieder etwas aufgeräumt. Auch breite Threads sollten jetzt besser angezeigt werden.
Wunderbar Es ist wirklich eine echte Hilfe!
Ich habe das für mich etwas reduziert:
#root ul ul {padding-left:2em;overflow:hidden;width:1000px;}
#root ul ul li:before{content:' ';font-size:0;vertical-align:bottom;padding-left:20px;padding-top:990px;background:url(http://home.arcor.de/jonha/line.png) bottom right no-repeat;}WICHTIG: ich habe jetzt das Bild ins src-Vezeichnis gestellt. Schließlich wollen wir nicht, dass dein Domain überlastet wirde ;-) Man kann das Bild also jetzt so referenzieren: background:url(forum\_threadoutline.png) http://src.selfhtml.org/forum\_threadoutline.png Danke und Grüße Thomas-
ehm ...
Man kann das Bild also jetzt so referenzieren:
so:
background:url(http://src.selfhtml.org/forum_threadoutline.png)
Thomas
-
Hallo,
#root ul ul {padding-left:2em;overflow:hidden;width:1000px;} #root ul ul li:before{content:' ';font-size:0;vertical-align:bottom;padding-left:20px;padding-top:990px;background:url(http://home.arcor.de/jonha/line.png) bottom right no-repeat;}Danke. Gab das auch mal so übernommen.
WICHTIG: ich habe jetzt das Bild ins src-Vezeichnis gestellt. Schließlich wollen wir nicht, dass dein Domain überlastet wirde ;-)
Man kann das Bild also jetzt so referenzieren:background:url(forum_threadoutline.png)
http://src.selfhtml.org/forum_threadoutline.pngAuch hier sag ich danke!
Jonathan
-
-
-
