zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden overflow:scroll + hintergrund der kindelemente

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.08.2010, 18:59
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard overflow:scroll + hintergrund der kindelemente

Moin,

ich möchte Quellcode darstellen, zwecks Zeilennummerierung hab ich mit einer <ol> angefangen (inzwischen aber auf die list-items verzichtet, daher an der Stelle flexibel). Die <ol> hat eine quasi feste Breite, soll bei zu langen Zeilen scrollen. Die Zeilen haben eine Hintergrundfarbe, allerdings nur auf der Breite der initialen Anzeigebreite, scrolle ich horizontal, passiert das, was zu erwarten, jedoch nicht gewünscht ist.

Code:
<ol class="source">
  <li class="even d2"><span class="line d2"> [...] </li>
</ol>
Code:
.source {
  list-style: none;
  max-height: 400px;
  overflow: scroll; /** explizit, auch wenns nix zu scollen gibt **/
}
.source li {
  white-space: pre;
}
Zum Testen: .css { overflow-scroll; } - .css .child { background:#color; }

(Hab grad 90 Minuten lang per Telefon mit einer älteren Dame ein Computer-Problem gelöst, hatte also viel Zeit, daher das Beispiel angehübscht, gegooglet, Forum durchsucht, etc. - aber keine _sinnvolle_ Lösung gefunden).

Bin also für eure Ideen offen, eine Lösung scheint so naheliegend zu sein, nur seh ich sie offenbar nicht.
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.08.2010, 20:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Die ol nimmt die Breite ihres Eltern-divs an, und li wiederum die der ol. Daher wirkt der enthaltene Text de facto wie horizontaler overflow von li, die nicht ausgedehnt werden.

Abhilfe: shrink-to-fit-width mal im umgekehrten Sinne. Du floatst ol ohne width, und entfernst overflow, das stattdessen das div bekommt.

P.S.: max-height geht natürlich ebenfalls von der ol ans div.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (04.08.2010 um 20:38 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.08.2010, 20:11
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

Danke.
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Mit Zitat antworten
  #4 (permalink)  
Alt 04.08.2010, 20:16
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Siehe noch mein edit bzgl. max-height (versteht sich zwar eh von selbst, aber ich hatte es halt vergessen explizit dazuzuschreiben).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 04.08.2010, 21:42
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

Kann grad sowieso nicht basteln, werd nachher mal drüber schauen, auch was das Verhalten bei zu schmalen Inhalten angeht.
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Mit Zitat antworten
  #6 (permalink)  
Alt 04.08.2010, 23:12
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Es funktioniert einwandfrei, sogar in alten Browsern wie z.B. Netscape 7.0 und Opera 7.5. Nur der IE < 8 braucht die üblichen Listen-Sonderbehandlungen.

Für das Verhalten bei zu schmalen Inhalten bekommt ol min-width.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div Hintergrund wird im IE durch Hintergrund des unteren divs überlagert ren83 CSS 6 19.10.2008 16:50
Hintergrund Yada` CSS 10 21.09.2008 18:03
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
Hintergrund SPMan CSS 0 16.05.2007 09:58
Hintergrund wird im IE abgehackt lekim CSS 0 29.03.2006 15:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:32 Uhr.