nicht angemeldet
Hintergrund in DIV Firefox und IE
Gunnar Bittersmann
MudGuardHallo zusammen,
ich bin dabei meine Homepage von Tabellen zur Layoutgestaltung und von Frames zu befreien.
Ich verwende jetzt SSI um die Navigation einzubinden und DIV's für das Layout.
Nun habe ich im IE und in Firefox ein unterschiedliches Verhalten. Die background Eigenschaft funktioniert in Firefox nicht richtig.
Die linke Navileiste soll mit Hilfe eines kleinen wiederholenden Hintergrundbildes so weit nach unten aufgefüllt werden bis das Browserfenster zu Ende ist.
Das versuche ich mit der overflow:hidden Eigenschaft zu erreichen:
<style type="text/css">
<!--
#navi_links { position:absolute; top:0px; left:0px; height:100%; overflow:hidden}
-->
Im Body-Bereich binde ich über SSI die Datei mit der Navigation ein.
Dort wird die class "navi_fuss_3" verwendet.
<div id= "navi_links">
...
<div class = "navi_fuss_3"></div>
...
</div>
Diese class habe ich in einer externen css-Datei untergebracht:
.navi_fuss_3 {
position:absolute;
top:547px;
left:0px;
width:100%;
height:1000px;
background:url(../images/fuss_3.jpg) background-repeat:repeat-y; }
Die Höhe von 1000px soll bewirken, dass der Hintergrund über das Browserfenster hinaus angezeigt wird, durch overflow:hidden wird
er dann passend an das Browserfenster angepasst.
Ist wahrscheinlich eine blöde Methode, aber wie kann man es besser machen?
Im IE funktioniert es. Hab es mit 1024*768 und 1280*1024 Auflösung getestet. Das Hintergrundbild fuss_3.jpg wird bis zum Seitenende
wiederholt. In Firefox wird der Hintergrund aber überhaupt nicht angezeigt.
Ich habe die Testseite auch mal hochgeladen:
www.technolust-stuttgart.de/test/home.shtml
Ich hoffe mir kann jemand weiterhelfen?
Vielen Dank & Grüße
Michael
-
Hallo Michael.
<div id= "navi_links">
^ Das...
<div class = "navi_fuss_3"></div>
^ ^ Und das...
... ist mir vermehrt in deinem Quelltext aufgefallen.
wozu diese Leerzeichen? Spätestens bei den Höhen- und Breitenangabe für die Bilder erzeugst du so ungültige Werte.Dann könntest du ohne große Mühe sicher noch etwas hiergegen machen, oder?
Die Höhe von 1000px soll bewirken, dass der Hintergrund über das Browserfenster hinaus angezeigt wird, durch overflow:hidden wird
er dann passend an das Browserfenster angepasst.
Ist wahrscheinlich eine blöde Methode, aber wie kann man es besser machen?Mit min-height, unter Berücksichtigung des üblichen Spielchens für den IE (Soll heißen: Zuweisung von
height:100%;mittels Hack)Ich habe die Testseite auch mal hochgeladen:
http://www.technolust-stuttgart.de/test/home.shtml- Siehe </faq/#Q-19> als Anleitung zum Verlinken.
Ich hoffe mir kann jemand weiterhelfen?
Das denke ich auf jeden Fall, da dein Posting eine angenehme Ausnahme darstellt.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days-
Ashura,
<div class = "navi_fuss_3"></div>
^ ^ Und das...
wozu diese Leerzeichen?Wozu weiß ich nicht. Aber warum auch nicht?
In XML ist das erlaubt:
[41] Attribute ::= Name Eq AttValue
[25] Eq ::= S? '=' S?
[3] S ::= (#x20 | #x9 | #xD | #xA)+Ich wüsste nicht, warum das in SGML anders sein sollte.
Gunnar
--
“I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)-
Hallo Gunnar.
Wozu weiß ich nicht. Aber warum auch nicht?
Gut. In Scripts sehe ich es als sehr vorteilhaft, wenn Leerzeichen mit Bedacht eingesetzt werden, aber in normalem HTML-Code irritieren sie mich.
Ich wollte mich eigentlich hierauf beziehen:
<div class =" navi_rand_li"> <img src="images/rand_li.jpg" width=" 16" height=" 74" border="0" alt=""></div> <!-- ^ Dies führt schließlich zu ungültigen Werten. -->Davon konnte ich insgesamt 10 Stück entdecken, wogegen Michael etwas machen sollte.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days-
Hi Ashura,
Gut. In Scripts sehe ich es als sehr vorteilhaft, wenn Leerzeichen mit Bedacht eingesetzt werden, aber in normalem HTML-Code irritieren sie mich.
Irrelevant.* ;-) Solange sie den Parser nicht irritieren ...
Ich wollte mich eigentlich hierauf beziehen:
[code lang=html]<div class =" navi_rand_li">Ach so. Wollteste, haste aba nich ... *G*
Gunnar
* Quelltextleser! ;-)
--
“I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)-
Hallo Gunnar.
Irrelevant.* ;-) Solange sie den Parser nicht irritieren ...
Damit arbeiten muss aber immer noch ich. ;)
* Quelltextleser! ;-)
Aber immer doch! ;)
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days
-
-
-
-
Hi,
<div id= "navi_links">
^ Das...
<div class = "navi_fuss_3"></div>
^ ^ Und das...
... ist mir vermehrt in deinem Quelltext aufgefallen.Ja und? Ist zulässig.
wozu diese Leerzeichen? Spätestens bei den Höhen- und Breitenangabe für die Bilder erzeugst du so ungültige Werte.
Moment, das ist aber was ganz anderes - im einen Fall stehen die Leerzeichen rund um das =, im anderen Fall im Attributwert.
Im Attributwert DARF Whitespace am Anfang oder Ende ignoriert werden. Er sollte vom Autor vermieden werden.
@Michael: schon mal probiert, dem div einen echten Inhalt zu geben (z.B. oder irgendeinen Text)?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard.
Ja und? Ist zulässig.
Ist ja gut. ;)
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days
-
-
Hallo Zusammen,
danke für eure Hilfe.
Ich habe das Problem inzwischen gefunden. Es lag an einem fehlenden Strichpunkt vor der background-repeat Angabe.Allerdings funktioniert das mit dem overflow:hidden noch nicht.
Das Ziel soll sein, dass die Navileiste oben und links sich immer an die aktuelle Fensterbreite/höhe anpasst.
Ich habe es versucht indem ich die Breite und Höhe über die Fensterbreite hinaus (1000px) vergrössert habe und dann mit overflow:hidden abgeschnitten haben. Das klappt aber nicht richtig.
Die linke Navileiste wird dann z.B. überhaupt nicht mehr angezeigt.Die relevanten Ausschnitte aus dem Code:
.navi_fuss_3 { position:absolute; top:547px; left:0px; width:100%; height:1000px; background:url(../images/fuss_3.jpg); background-repeat:repeat-y;}
#navi_links { position:absolute; top:0px; left:0px; height:100%; overlfow:hidden; }
<div id="navi_links">
...
<div class = "navi_fuss_3"> </div>
...
</div>Ich habe eine Testseite hochgeladen:
http://www.raumhafen-moseisley.de/test/home.shtmlIch hoffe mir kann jemand weiterhelfen.
Vielen Dank & Grüße
Michael