Dreamweaver div anordnung?

webemil · 30.09.2009

Hallo Leute,

bin neu hier, super geiles Board !!!!

Hab mal eine frage zu Divs (ich pass die mit Dreamwaever an)

Ich habe eine Div ebene die als hintergrund+Rollover Effekt+verlinkung fungiert, es ist aber notwenig über diese Ebene eine weitere Text ebene (neuer Div) zu setzen, leider ist der neue Div dem alten übergeordnet und setzt somit die Rollover funktion so wie die verlinkung außer aus! Sobald man mit der Maus über den Text geht verschwindet alles.

Ich kann leider mein derzeitiges Projekt nicht hochladen, deswegen hab ich schnell ein beispiel erstellt das mein problem ebenso gut zeigt

Hat jmd. eine Idee wie ich das Lösen könnte? Der rollover Effekt und die verlinkung soll dabei trotzdem bleiben.

Hab schon alles mögliche mit dem z-index versucht, werte gleichzusetzen höher zu setzen etc.

Ich habe sehr wenig ahnung von CSS, Divs & PHP, wäre gut wenn jmd. eine simple lösung einfallen würde ^.^

Danke im Voraus

Beste Grüße, webemil

cebito · 30.09.2009

AW: Dreamweaver div anordnung?

Jaja, da wird schon jede Menge code für son Bissl erzeugt. So wie du es haben willst, kommst du mit gerade mal einem 1*1px transparenten png (wahlweise gif) und ohne jegliches javascript aus:

HTML:

<!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>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#apDiv1 {
    position:absolute;
    left:24px;
    top:26px;
    width:195px;
    height:147px;
    background-color:#999999;
}
#apDiv1:hover {
    background-color:#FF0000;
}
#apDiv2 {
    position:absolute;
    left:36px;
    top:44px;
    width:119px;
    height:65px;
}
.transparent {
position:absolute;
width:190px;
height:142px;
}
-->
</style>
</head>

<body>
<div id="apDiv1">
  <div id="apDiv2">TESTESTESTEST<br />

  TESTESTESTEST<br />
  TESTESTESTEST</div>
<a href="index.php"><img src="transparent.png" class="transparent" /></a></div>
</body>
</html>

webemil · 01.10.2009

AW: Dreamweaver div anordnung?

Hallo ,

vielen dank für die Antwort und den vorschlag, nur sollten die hintergrund bilder:

gfx/aaaaaaaaaaaaaaaaaaaa.png
und:
gfx/bbbbbbbbbbbbbbbbbbbbbbbb.png

dafür genutzt werden, da es in meinem Design auch komplexere Bilder sind bei dennen ich keine Hintergrund Farbe einsetzen kann.

Würde deine Methode damit auch funktionieren?

Hab es grade versucht so hinzukriegen, ist mir leider nicht gelungen :rolleyes:

Hier ein kleiner ausschnitt aus meinem Originalcode:
(Ich glaube das Javascript wird notwendig sein da dort noch ein image preload enthalten ist, da die bilder recht groß sind wäre es gut, wenn es bleiben könnte.)

PHP:

<style type="text/css">
<!--

#apDiv4 {
    position:absolute;
    left:50%;
    top:420px;
    width:247px;
    height:174px;
    z-index:10;
    margin-left: -390px;
}
#apDiv5 {
    position:absolute;
    left:50%;
    top:543px;
    width:141px;
    height:49px;
    z-index:10;
    margin-left: -376px;
}
.Stil18 {font-size: 12px}
.Stil19 {
    color: #666666;
    font-size: 11px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<div id="apDiv4"><a href="free.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Free','','gfx/free_light.png',1)"><img src="gfx/free_n.png" alt="Free" name="Free" width="247" height="174" border="0" id="Free" /></a></div>

<div class="Stil18" id="apDiv5"><span class="Stil19">Hier Text</span></div>

cebito · 01.10.2009

AW: Dreamweaver div anordnung?

webemil schrieb:
Würde deine Methode damit auch funktionieren?

Ja, indem du statt der Hintergrundfarbe ein Hintergrundbild in css definierst, für #apDiv1 und für #apDiv1:hover