Größe von Hintergrundbild in <div>
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
browser
code
dank
design
detail
dokument
http
image
index
info
mitte
paar
problem
raten
stelle
test
url
vergeben
zahl
-
Hallo,
Ich Schreibe Grade ein Design (neu).
Aber CSS funktioniert nicht so wie ich es will!
(Siehe Code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unbenanntes Dokument</title> <style type="text/css"> <!-- #1 { position:absolute; left:0px; right:0px; top:0px; height:120px; z-index:1; } #2 { position:relative; width:60px; height:120px; z-index:2; background-image: url(Bild1.png); background-repeat: no-repeat; } #3 { position:relative; left:70px; right:70px; height:120px; z-index:2; background-image: url(Mitte.png); background-repeat:repeat-x; } --> </style> </head> <body> <div id="1"><div id="2"><div id="3"></div></div> </div> </body> </html>
Das Bild im Div Code 3 Wird nicht so angezeigt wie ich es will!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hm, auch wenn ich es sehr gerne wollte, ich kann leider keine Gedanken lesen. Sage doch, was genau nicht geht: Was wird nicht angezeigt, was wird stattdessen angezeigt? Am besten lädst du das Design mal hoch. Weiterhin ist der Titel nicht besonders genau.
-
So ich rate jetzt einfach mal, was dein Problem ist:
Das background-image in div 3 wird nicht angezeigt, weil du den z-index 2 doppelt vergibst und der Browser an der stelle dann logischerweise einen Fehler erkennt und es nicht richtig ausfuehrt.
Loesung ist, einen anderen z-index zu vergeben.
Falls es das nicht ist, dann schreib mal nen paar details, was los ist
Beitrag zuletzt geändert: 30.10.2009 17:20:16 von minialanguageschool -
minialanguageschool schrieb:
So ich rate jetzt einfach mal, was dein Problem ist:
Das background-image in div 3 wird nicht angezeigt, weil du den z-index 2 doppelt vergibst und der Browser an der stelle dann logischerweise einen Fehler erkennt und es nicht richtig ausfuehrt.
Loesung ist, einen anderen z-index zu vergeben.
Falls es das nicht ist, dann schreib mal nen paar details, was los ist
den z-index bei 2 hätt er auch doppelt vergeben -
Wenn ich gerade nicht total daneben liege, dann dürfen ID-Selektoren sowie Class-Selektoren nicht mit einer Zahl beginnen.
-
Also das Bild wurde nicht in der Original Größe angezeigt sonder eher ganz klein!
Und der test gibt es hier http://privatecitypage.de/test
Info: Hab nur Code Schnipsel Genommen!
-
privatecitypage schrieb:
Also das Bild wurde nicht in der Original Größe angezeigt sonder eher ganz klein!
Und der test gibt es hier http://privatecitypage.de/test
Info: Hab nur Code Schnipsel Genommen!
Änder mal das 1, 2 und 3 überall in id1, id2, id3!
IDs dürfen nicht mit Zahlen anfangen!
LG cookies -
privatecitypage schrieb:
Oh danke,
aber das Eigentliche ist immer noch nicht behoben.
Wie soll es denn aussehen?
LG cookies -
Das was man oben in der Mitte sieht soll von 60px links nach 60px rechts gehen!
-
position:relative;
left:70px;
right:70px;
Ich blick nicht was das soll. Soll es nun um 70 nach links oder nach rechts?
ich glaube, dass was du willst ist ein margin-left: 70px; und ein margin-right: 70px; und #id2 nach links floaten.
Beitrag zuletzt geändert: 30.10.2009 20:30:33 von nikic -
70 war nur für ein Platzhalter!
Mit deiner Idee wird nichts von der Mitte angezeigt :D -
Ähem, ja, das liegt daran, dass das div id3 aus dem div id2 raus muss.
-
Nun aber jetzt sind die Bilder nicht mehr in einer Reihe!
Edit: Hab das Problem Selbst Gelöst
!
Beitrag zuletzt geändert: 31.10.2009 0:42:41 von privatecitypage -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unbenanntes Dokument</title> <style type="text/css"> <!-- #id1 { position:absolute; left:0px; right:0px; top:0px; height:120px; z-index:1; } #id2 { position:absolute; top: 0px; left: 0px; width:60px; height:120px; background: url(Bild1.png) no-repeat; } #id3 { position:absolute; top:0px; left: 60px; right: 60px; height:120px; background: url(Mitte.png) repeat-x; } --> </style> </head> <body> <div id="id1"><div id="id2"></div><div id="id3"></div> </div> </body> </html>
Versuch das mal so... Im FF hat das funktioniert
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
