zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Ein Bild im Vordergrund, DIVs im Hintergrund

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.03.2013, 17:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2013
Beiträge: 5
Violette befindet sich auf einem aufstrebenden Ast
Standard Ein Bild im Vordergrund, DIVs im Hintergrund

Zitat:
Zitat von Violette Beitrag anzeigen
Hallo zusammen

Zu1: danke, dass es eure Hilfe gibt!!
Ich bin seit paar Std. vor dem PC und probiere ein Problem zu lösen, das nicht gelöst werden will.

Ich mache im Moment eine Wedding-Webseite. Die Seite soll ein bisschen speziell aussehen. Ich habe 5 DIVs erzeugt und wenn man mit Mouse drüber fahrt, soll ein Bild angezeigt werden. Das Bild ist so gross, wie alle 5 DIVs zusammen. Das Problem ist, wenn ich über DIV fahre, zeigt es mir nur die Hälfte vom Bild an, die andere Hälfte bleibt unter anderen DIVs. Wie kann ich ein Bild übe DIVs anzeigen lassen?
Die Bild-Datei habe ich selber gemacht. Es ist eine PNG, also transparent.
Damit es klarer ist, zeige ich einen Stuck-Code an(Anhang):

DANKE sehr!!!!

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;
}
Angehängte Grafiken
Dateityp: png sc.png (157,6 KB, 13x aufgerufen)

Geändert von Violette (31.03.2013 um 10:40 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.03.2013, 18:17
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Füge bitte den Code hier ein unter Verwendung der Code-Tags aus dem Editor.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.03.2013, 18:30
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Violette Beitrag anzeigen
soll ein Bild angezeigt werden. ..........
wir können dein Bild nicht sehen deshalb bitte einen Link zum Problem posten, damit man live probieren kann.

Zitat:
Zitat von Violette Beitrag anzeigen
Das Problem ist, wenn ich über DIV fahre, zeigt es mir nur die Hälfte vom Bild an, die andere Hälfte bleibt unter anderen DIVs. Wie kann ich ein Bild übe DIVs anzeigen lassen?
Wenn ich mal rate tippe ich dass dir die Feinheiten der Stapelung noch nicht so vertraut sind. Guckst du hier zum verstehen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #4 (permalink)  
Alt 30.03.2013, 19:02
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Wahrschienlich löst sich dein Problem, wenn du dem Element, welches gerade gezeigt temporär einen utopisch hohen z-index gibst. Also irgendwas um die 999.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 30.03.2013, 19:46
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen
Wahrschienlich löst sich dein Problem, wenn du dem Element, welches gerade gezeigt temporär einen utopisch hohen z-index gibst. Also irgendwas um die 999.
Wie kommst du darauf?

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 30.03.2013, 20:02
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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!
Mit Zitat antworten
  #7 (permalink)  
Alt 30.03.2013, 20:09
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Gut, das wäre dann eine Möglichkeit.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #8 (permalink)  
Alt 31.03.2013, 10:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2013
Beiträge: 5
Violette befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
wir können dein Bild nicht sehen deshalb bitte einen Link zum Problem posten, damit man live probieren kann.


Wenn ich mal rate tippe ich dass dir die Feinheiten der Stapelung noch nicht so vertraut sind. Guckst du hier zum verstehen.
Danke sehr!
Ich habe gerade den Code eingefügt.
Mit Zitat antworten
  #9 (permalink)  
Alt 31.03.2013, 10:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2013
Beiträge: 5
Violette befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen
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.
Hallo

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 31.03.2013, 12:35
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Violette Beitrag anzeigen
Ich habe mit Z-Index auch versucht aber es hat nicht geklappt.
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.

Zitat:
Zitat von Violette Beitrag anzeigen
Gerade habe ich den Code hier eingefügt.
der unvollständig ist. Was hast du an meiner Bitte einen Link zum Problem zu setzen nicht verstanden.

Zitat:
Zitat von Violette Beitrag anzeigen
Vielleicht kannst Du mir genauer sagen, wo ich den Z-Index einfügen muss.
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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:06 Uhr.