Hintergrundbild trotz <div>-Elementen?
0 0 
Gunnar Bittersmann
0 
Jonathan
1
Hintergrundbild trotz <div>-Elementen?
MudGuardGuten Tag!
Es dreht sich um Folgendes: Ich möchte bei meiner Website auf Frames verzichten und habe mich für eine Lösung mit PHP entschieden. In die eigentlichen Seiten binde ich per include-Funktion die Navigation (siehe Link) ein.
Dabei tritt allerdings folgendes Problem auf: Sobald ich innerhalb der Navigation mit <div>-Elementen arbeite, wird damit das Hintergrundbild überblendet.
Wie kann ich diese Elemente ausrichten, ohne dass dabei das Hintergrundbild überschrieben wird?
Danke schonmal im Voraus!
mfg Jan
-
Hallo.
Dabei tritt allerdings folgendes Problem auf: Sobald ich innerhalb der Navigation mit <div>-Elementen arbeite, wird damit das Hintergrundbild überblendet.
Natürlich. Es liegt dann ja auch ein Element _über_ dem _Hinter_grund. Element können, mit etwas Arbeit, auch transparent sein. Eine googleSuche hilft dir bei diesem Thema immer weiter.
Wie kann ich diese Elemente ausrichten, ohne dass dabei das Hintergrundbild überschrieben wird?
http://de.selfhtml.org/css/eigenschaften/positionierung.htm
Bei der von dir verlinkten Seite fehlt der gesamte Aufbau einer html Seite (Doctype, head, body, etc.). Das ist natürlich absoluter Unsinn, allemal, wenn man auf Fehlersuche ist. Achte immer auf valide Dokumente.
MfG, Kungschu.
--
Brain: an apparatus with which we think we think.-
Hallo! Erstmal danke für deine Antwort.
Damit habe ich bereits herumexperimentiert, siehe hier: http://www.saftladen.byto.de/test.htm
Leider ist mir dennoch nicht so ganz ersichtlich, was ich falsch gemacht habe, denn ich arbeite ja ebenfalls mit <div>-Elementen und absoluten Positionierungen.
Bei der von dir verlinkten Seite fehlt der gesamte Aufbau einer html Seite (Doctype, head, body, etc.). Das ist natürlich absoluter Unsinn, allemal, wenn man auf Fehlersuche ist. Achte immer auf valide Dokumente.
Ich rufe ja normal auch nicht die navbar.htm direkt auf, sondern binde sie per PHP in einen anderen Quelltext ein, etwa so:
<html>
<head></head>
<body>
- Einbindung der Navbar
</body></html>Wenn ich daher aus der navbar.htm ein normal aufgebautes Dokument mache, habe ich später zwei einleitende <html> und <body> Tags.
Damit entstünde dann auf der per PHP zusammengefügten Seite invalider Code.mfg Peter
-
Hello out there!
Damit habe ich bereits herumexperimentiert, siehe hier: http://www.saftladen.byto.de/test.htm
Verweise einbinden, siehe hier: </hilfe/bedienung.htm#verweise-einbinden>
Wenn ich daher aus der navbar.htm ein normal aufgebautes Dokument mache, habe ich später zwei einleitende <html> und <body> Tags.
Sollst du ja nicht. Im Include steht kein vollständiges HTML-Dokument.
Die durch PHP generierte Ressource sollte aber ein vollständiges HTML-Dokument sein, incl. DOCTYPE-Angabe.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Die durch PHP generierte Ressource sollte aber ein vollständiges HTML-Dokument sein, incl. DOCTYPE-Angabe.
So ist es auch: http://www.saftladen.byto.de
-
-
-
Hi,
Element können, mit etwas Arbeit, auch transparent sein.
Hä? Wo soll da Arbeit nötig sein?
Der Default für Elemente ist, daß sie kein Hintergrundbild und als Hintergrund-"Farbe" transparent haben - sprich: daß sie transparent sind.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
Element können, mit etwas Arbeit, auch transparent sein.
Hä? Wo soll da Arbeit nötig sein?
Der Default für Elemente ist, daß sie kein Hintergrundbild und als Hintergrund-"Farbe" transparent haben - sprich: daß sie transparent sind.Scheinbar sind sie das ja nicht, sonst würden die beiden "durchsichtigen" Elemente das Element mit vorgegebenem Hintergrundbild durchscheinen lassen!
Genau das versuche ich ja zu erreichen.-
Hi,
Scheinbar sind sie das ja nicht, sonst würden die beiden "durchsichtigen" Elemente das Element mit vorgegebenem Hintergrundbild durchscheinen lassen!
Genau das versuche ich ja zu erreichen.Vielleicht solltest Du erstmal die Fehler im Quellcode beseitigen, z.B. das style-Attribut des zweiten div:
style="position:absolute; top:4px; left: 4px;>
<img src="Oder das CSS im letzten div: 100%-170px ist kein gültiger Wert für width.
(Weitere Fehler nicht ausgeschlossen, laß Dich von den Validatoren beraten ...)
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
Hallo Andreas.
Element können, mit etwas Arbeit, auch transparent sein.
Hä? Wo soll da Arbeit nötig sein?
Der Default für Elemente ist, daß sie kein Hintergrundbild und als Hintergrund-"Farbe" transparent haben - sprich: daß sie transparent sind.Full ACK.
Hier habe ich Elemente und images verdreht.MfG, Kungschu.
--
Brain: an apparatus with which we think we think.
-
-
-
Hello out there!
In die eigentlichen Seiten binde ich per include-Funktion die Navigation (siehe Link) ein.
Warum? readfile() dürfte es auch tun. [</archiv/2007/6/t154721/#m1007138>]
SSI statt PHP vielleicht auch. [ebenda]
Beachtest du dabei auch Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien: „Verlinke niemals auf die aktuelle Seite“? [Nielsen]
Dabei tritt allerdings folgendes Problem auf: Sobald ich innerhalb der Navigation mit <div>-Elementen arbeite, wird damit das Hintergrundbild überblendet.
?? Was meinst du damit?
Deine Seite ist übrigens recht unbrauchbar, da man, obwohl man nicht das ganze Menü zu sehen bekommt, keine Möglichkeit hat runterzuscrollen.
<p><a href="index.php"><img alt="Home" border=0 ID=tab9432 width=160 height=30 src="navbar/home-off.gif" onmouseover='document.getElementById("tab9432").src="navbar/home-on.gif"' onmouseout='document.getElementById("tab9432").src="navbar/home-off.gif"'></a> <img alt="Home" width=0 height=0 src="navbar/home-on.gif"><br> <a href="saftladen.php"><img alt="Saftladen" border=0 ID=tab2476 width=160 height=30 src="navbar/saftladen-off.gif" onmouseover='document.getElementById("tab2476").src="navbar/saftladen-on.gif"' onmouseout='document.getElementById("tab2476").src="navbar/saftladen-off.gif"'></a> <img alt="Saftladen" width=0 height=0 src="navbar/saftladen-on.gif"><br>Ich möchte gern eine Liste sein, bitte bitte lass mich ein 'ul' ('ol') sein! (frei nach wahsaga), siehe [https://forum.selfhtml.org/?t=157408&m=1024098]
Zu 'style'-Attributen siehe [https://forum.selfhtml.org/?t=157408&m=1024223] im selben Thread.
Zu Attributwerten ohne Anführungszeichen siehe [HTML401 §3.2.2]
Und warum sind alle Bilder doppelt?
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hello out there!
In die eigentlichen Seiten binde ich per include-Funktion die Navigation (siehe Link) ein.
Warum? readfile() dürfte es auch tun. [</archiv/2007/6/t154721/#m1007138>]
SSI statt PHP vielleicht auch. [ebenda]
Beachtest du dabei auch Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien: „Verlinke niemals auf die aktuelle Seite“? [Nielsen]
Durchaus bedenkenswerte Punkte. Das ist allerdings momentan nicht mein Problem. ;-)
Dabei tritt allerdings folgendes Problem auf: Sobald ich innerhalb der Navigation mit <div>-Elementen arbeite, wird damit das Hintergrundbild überblendet.
?? Was meinst du damit?
Ich möchte erreichen, dass per background-repeat das Hintergrundbild über den gesamten Bildschirm ausgedehnt wird. Wie man in der Ecke oben links sieht, funktioniert das auch, bis zu dem Punkt im Quelltext, wo ich unwillentlich den Hintergrund durch die <div>-Elemente überschreiben lasse!
Deine Seite ist übrigens recht unbrauchbar, da man, obwohl man nicht das ganze Menü zu sehen bekommt, keine Möglichkeit hat runterzuscrollen.
Ich lass mir was einfallen. =)
Und warum sind alle Bilder doppelt?
Die Bilder sind nicht wirklich doppelt, sondern es gibt je eine Standartversion für jeden Link und eine, die per mouseover aktiviert wird. ;-)
mfg Jan
-
Hello out there!
Ich möchte erreichen, dass per background-repeat das Hintergrundbild über den gesamten Bildschirm ausgedehnt wird.
Würdest du ertmal sagen, wovon du eigentlich sprichst? Von http://www.saftladen.byto.de/navbar.htm oder von http://www.saftladen.byto.de/?
Auf beiden Seiten ist von 'background-repeat' nichts zu finden.
Und welches Hintergrundbild soll sich über den gesamten Bildschirm ausdehnen?
Und warum sind alle Bilder doppelt?
Die Bilder sind nicht wirklich doppelt, sondern es gibt je eine Standartversion für jeden Link und eine, die per mouseover aktiviert wird. ;-)Doch, sind sie wirklich – wenn man CSS abschaltet, was man bei deiner Seite wegen fehlender Scrollmöglichkeit tun muss.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hello out there!
Würdest du ertmal sagen, wovon du eigentlich sprichst? Von http://www.saftladen.byto.de/navbar.htm
Ah, verstehe, das ist das Include. Diese Datei muss gar nicht von außen über HTTP verfügbar sein.
oder von http://www.saftladen.byto.de/?
Davon sprichst du offenbar. Warum 'Frameset'-Doctype, wenn du 'Transitional' benutzt?
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hello out there!
Würdest du ertmal sagen, wovon du eigentlich sprichst? Von http://www.saftladen.byto.de/navbar.htm
Ah, verstehe, das ist das Include. Diese Datei muss gar nicht von außen über HTTP verfügbar sein.
richtig. ;-)
Davon sprichst du offenbar. Warum 'Frameset'-Doctype, wenn du 'Transitional' benutzt?
Das ist noch ein Überbleibsel aus Zeiten, in denen ich die Navbar per Frame eingebunden habe. Ich glaube das ändere ich gleich mal.
-
-
-
-
-
Hallo Jan,
Ich verstehe dein problem nicht. Rufe ich http://www.saftladen.byto.de/ aus, hat die Seite gar kein Hintergrundbild, dass überschrieben werden könnte.
Auf z.B. http://www.saftladen.byto.de/philosophie.php hast du ein Hintergrundbild. Aber auch da sehe ich kein <div> (ohne eigenen Hintergrund), dass das Hintergrund irgendwie überdecken würde.
Bitte liefer eine anständige Problembeschreibung.
Jonathan
-
Hallo Jan,
Dabei tritt allerdings folgendes Problem auf: Sobald ich innerhalb der Navigation mit <div>-Elementen arbeite, wird damit das Hintergrundbild überblendet.
nicht ganz. Du hast ein positioniertes div-Element mit Hintergrund, das wieder von absolut positionierten divs gefüllt ist. Ich vermute, daß der absolute Inhalt das div nicht "aufspannt", also die Höhe nicht beeinflußt, deshalb wird das Hintergrundbild nur für den Bereich angezeigt, wo Text steht.
Wie kann ich diese Elemente ausrichten, ohne dass dabei das Hintergrundbild überschrieben wird?
Schmeiß mal den ganzen Positionierungskram raus, Du brauchst ihn nicht. Halte Elemente stattdessen mit margin und padding auf Abstand. Damit dürften sich einige Deiner Probleme erledigen.
Gruß aus Köln-Ehrenfeld,
Elya
--
-