|
|||
Ein Bild im Vordergrund, DIVs im Hintergrund
Zitat:
HTML: HTML-Code:
<?php // No direct access. defined('_JEXEC') or die; JHtml::_('behavior.framework', true); ?> <!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=utf-8"> <title>Wedding 2013</title> <link rel="stylesheet" href="/wedd/templates/wedd/css/general.css" type="text/css" media="screen,projection"> <script type="text/javascript"> <!-- function show_pic(picID){ var myObj = document.getElementById(picID); if(myObj.style.display == "none"){ myObj.style.zindex=10; myObj.style.display = "block"; }else{ myObj.style.display = "none"; } } //--> </script> </head> <body> <div id="divMainWrapper"> <div class="scase" onmouseover="show_pic('imgID')" onmouseout="show_pic('imgID')"> <img id="imgID" style="display: none" src="images/ablauf.png">Div 1</div> <div class="scase" onmouseover="show_pic('imgID')" onmouseout="show_pic('imgID')"> <img id="imgID" style="display: none" src="images/ablauf.png">Div 2</div> <div class="scase" onmouseover="show_pic('imgID')" onmouseout="show_pic('imgID')"> <img id="imgID" style="display: none" src="images/ablauf.png">Div 3</div> <div class="scase" onmouseover="show_pic('imgID')" onmouseout="show_pic('imgID')"> <img id="imgID" style="display: none" src="images/ablauf.png">Div 4</div> <div class="scase" onmouseover="show_pic('imgID')" onmouseout="show_pic('imgID')"> <img id="imgID" style="display: none" src="images/ablauf.png">Div 5</div> </div> </body> </html> CSS: Code:
body { text-align: justify; font-size: 24px; font-family: Calibri; background-image:url(../images/back1.jpg); margin: 0; padding: 0; z-index: 1; } #divMainWrapper { margin: auto; width: 1000px; height: 700px; box-shadow: 0px 0px 8px #666; margin-top: 110px; margin-right: auto; /* Abstand rechts */ margin-bottom: 10px; margin-left: auto; /* Abstand links */ z-index: 2; } #divHeader { height: 100px; width: 100px; background-color: #ff0000; position: absolute; } .scase{ /* background-image:url(../images/bla4.png); */ background-color: #ff0000; position:relative; text-align:center; float: left; width: 200px; height: 700px; margin-right: 0px; font: bold .9em Times; z-index: 3; } #imgID{ position:relativ; } Geändert von Violette (31.03.2013 um 10:40 Uhr) |
Sponsored Links |
|
||||
wir können dein Bild nicht sehen deshalb bitte einen Link zum Problem posten, damit man live probieren kann.
Zitat:
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Zitat:
Wenn ein Element nur 200px breit ist wird es dann breiter, wenn ich es als Ebene über andere Elemente darstelle? Nur mal so als Denkansatz.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
||||
Vielleicht ändert das JS ja auch die Breite. Das geht aus dem Quelltext nicht hervor. Ein Problem mit dem z-index ist meiner Meinung nach wahrscheinlicher.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
|
|||
Zitat:
Ich habe gerade den Code eingefügt. |
|
|||
Zitat:
Danke für die Antwort. Ich habe mit Z-Index auch versucht aber es hat nicht geklappt. Gerade habe ich den Code hier eingefügt. Vielleicht kannst Du mir genauer sagen, wo ich den Z-Index einfügen muss. Liebe Grüsse |
Sponsored Links |
|
||||
kein Wunder, du hast mein verlinktes Tut nicht durchgearbeitet. Einfach ohne jedes Verständnis z-index mit der Streubüchse verteilen ist Lotterie sonst nix.
der unvollständig ist. Was hast du an meiner Bitte einen Link zum Problem zu setzen nicht verstanden. Nein, warum. Ein Forum bietet Hilfe zur Selbsthilfe und ist kein Machsmir-Forum. Sei nicht so faul und arbeite bitte das Tut durch, dann wirst du dein Problem leicht selber lösen können. *break* Einfach zu empfehlen mal ein z-index einzustreuen halte ich persönlich für nicht ganz so toll. Oft genug kann man aufs z-index verzichten, wenn man Stapelung ein bißchen verstanden hat und das für sein Problem methodisch aufbaut. Methodisch heißt in so einem Fall erst mal alle Positionierungen und z-index entfernen. Dann sich vor Augen führen, dass ein im Quelltext nach einem anderen Element notiertes in der Schichtung oben ist. Ausgestattet mit dieser Erkenntnis wird dann punktuell positioniert (relativ). Oft genug reicht das ja schon. Sollte es nicht reichen kann man es ebenfalls punktuell z-index vergeben. Das bitte nicht mit absurd hohen Zahlen. Es reicht normalerweise eine einstellige Zahl. Auch wenn ich jetzt vielleicht übermäßig belehrend rüberkomme, es ist nicht böse gemeint. Ich habe nur versucht der Fragenden Hilfe zur Selbsthilfe zu geben.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Vordergrund bzw. Hintergrund | sams2000 | CSS | 5 | 20.01.2011 01:34 |
Bild als Vordergrund für eine Seite | css_on_fire | CSS | 10 | 25.09.2010 10:55 |
Link Hintergrund Bild ohne Link Text | sTikKen | CSS | 1 | 03.09.2010 00:56 |
In einen bestehenden Text ein Bild im Vordergrund einfügen.... | eBase2009 | (X)HTML | 1 | 28.06.2009 23:53 |
Probleme mit Hintergrund eines div's | Ramires | CSS | 4 | 16.02.2007 20:13 |