Div: Background scrollbar im FF

[pascal007]

Hallo ihr CSS-Profis

Ich habe ein kleines Problem. Ich wollte ein Div machen, in welchen ich Code schreiben kann (php, html, etc.). Dazu habe ich eine Backgroundgrafik gemacht, die die Zeilennummerierung enthält. Dann hat der Div noch overflow:auto;, damit er das Design nicht sprengt.

Hier mal mein CSS-Schnipsel:

div.code {
	background-image:url('../images/line-numbers.png');
	background-repeat:no-repeat;
	background-attachment:scroll;
	overflow:auto;
	line-height:7px;
	width:90%;
	background-color:#eeeeee;
	border:1px solid #dddddd;
	padding-top:7px;
	padding-left:30px;
	padding-right:13px;
	font-size:13px;
}

Oke, das Problem ist jetzt, dass der FF die Backgroundgrafik einfach nicht mitscrollen will. Also sie bleibt stehen und das ist natürlich nicht gerade günstig bei einer Zeilennummerierung . Kann mir da jemand verraten, wie ich das Scrollen der BG-Grafik dem FF beibringen kann? Am liebsten ohne JS.

neben bei noch eine Frage: ich habe jetzt immer einen senkrechten Scrollbalken (den kann ich paar Milimeter bewegen), aber er ist immer da. Das ist ja zu nichts zu gebrauchen... wo liegt da der Fehler in meinem CSS-Code? Ich hab ja keine Höhe vorgegeben, also sollte der Div automatisch gestreckt werden und es sollte nicht der overflow einsetzen.

[tontechniker]

Statt für die Zeilennummern eine Hintergrundgrafik zu verwenden kannst du einen einfachen Trick anwenden: Du nimmst du einzelnen Codezeilen als Listenelemente und nimmst dann eine nummerierte Liste. Die kannst du dann natürlich auch in ein scrollbares div-Element einsetzen.

[pascal007]

Hm das wäre eine Möglichkeit, aber ich müsste dann den Code-Teil mit PHP zerpflücken und in eine Liste speichern und zudem wird dann, wenn ich etwas rauskopieren möchte, die Zeilennummer mitkopiert. Das ist auch nicht so das wahre.

Aber ich könnte mich auch damit abfinden, dass ich dem div einfach die Freiheit vertikal lasse. Dann muss ich aber diesen hässlichen Scrollbalken noch wegbekommen.

[tontechniker]

zudem wird dann, wenn ich etwas rauskopieren möchte, die Zeilennummer mitkopiert.

Nein, die Listennummern werden nicht mitkopiert:[list=1][*]a[*]b[*]c[*]d[/list=1]

[Kropff]

mal geshi ausprobiert? der macht das auch mit zeilennummern.

gruß
peter

[PHP-Desaster]

Bei mir im Notepad++ wird es als

# a
# b
# c
# d

kopiert. Kann aber auch nur GeSHi empfehlen!

[matz0r]

Hast du keine URL für uns, damit man sich das mal "echt" ansehen kann?

[pascal007]

Klar kann ich euch ein Beispiel geben. Hoffe es hilft euch weiter. Betrachtet die Codebox mit dem vertikalen Scrollbalken doch mal im FF und dem IE... IE hat zu den Problemen im FF noch weitere (wen wundert's ).

http://pascal007.homelinux.com/phptu...php?tutorial=1

[Kropff]

mach es ohne zeilennummern. hab ich auch nicht . oder leg ein preg_match_all drüber, suche nach jedem ersten <br /> nach einem zeilenumbruch und setz dort die zahlen direkt in den code ein. ggf. mit einem zusätzlichen <span>-element, wo du die entsprechende graue formatierung einbaust.

und bitte code umbrechen, keiner scrollt gerne horizontal

gruß
peter

[pascal007]

Ja, ist mir klar, würd auch gerne umbrechen, aber das Problem ist im Moment dann halt wieder die Zeilennummerierung. Kann ich <code></code> auch beibringen selber umzubrechen, wenn er am Rand des Divs ist.
Schade, die Zeilennummerierung hätte ich ein schönes Feature gefunden, aber wenn's denn sein muss ... dann halt ohne. Geht auch.

[Kropff]

du arbeitest doch sicher mit highlight_string, oder? sobald damit der quellcode formatiert wurde, jagst du ein entsprechendes preg_match_all auf <br /> mit den modifiern U und s drüber und baust die zeilennummern per programmierung ein. schau dir ggf. mal das hier an. der rest ist css-formatierung.

gruß
peter

EDIT:

---

ups, korrigiert

---

[pascal007]

Der Link funktioniert leider nicht .

Ich lasse die Zeilennummern lieber ganz weg, als wenn danach mit Copy-Paste die Zeilennummern oder sonst ein Zeichen mit kopiert werden. Das Nervt mehr, als keine Zeilennummerierung zu haben .

[Kropff]

ich habe da gerade bei php-friends gesehen, dass die das haben, was du möchtest. schau es dir mal an.

gruß
peter

[pascal007]

Meinst du dort wo das Script steht im Thread? Das hat aber einen Bug. Die ersten und letzten 6 Linien werden gar nicht angeschrieben... auf jeden Fall danke für den Tipp, ich werde es mir trotzdem mal anschauen. Vllt kann ich ja was draus machen .