divś mit ueberlappungen

edi · 31 August 2007

ich habe mit css mehrer container angelegt.
div1 hat ein kleines Bild mit mouseover-effekt, folge ist:
in div2 liegt ein kleines Bild ohne Ihnhalt welches bei o.g. Effekt gegen ein grosses Bild ausgetauscht wird.
funktioniert perfekt aber ..........

des grosse Bild im div2 liegt hinter dem kleinen Bild in div1. Ich will aber das es vorn liegt.
die Reihenfolge der div im code zu tauschen bringt nichts.
"Was tun?" sprach Zeus

Frank · 31 August 2007

gib div 1 die eigenschaft

Code:

z-index:1;

und div 2 die eigenschaft

Code:

z-index:2;

dann sollte div 2 vor div 1 liegen

edi · 1 September 2007

mit dem index funktioniert leider nicht.
da ich bei mouseover gleichzeitig mehrere images wechseln kann, bekommen die kleinen divs jetzt ein transparentes Bild mit nichts. Damit kann ich leben. Jetzt muss ich nur noch den Text weg bekommen.
Oder jemand hat noch eine Loesung.

css scheint die kleinen divs immer nach vorn zu legen damit sie optisch nicht komplett verschwinden koennen.

nichtsgeht · 1 September 2007

Wie hast du die DIV´s deklariert. Mit

Code:

position: absolute;

müsste es eigendlich klappen.

edi · 1 September 2007

okay ich stell mal den etwas langen code rein. (index hab ich wieder raus genommen)

Code:

 <!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Wo wir zu finden sind.</title>
<meta name="description" content="Hier finden Sie deutsche Freimaurer in Spanien">
<meta name="keywords" content="Freimaurer, mason, Spanien,Mittelmeer">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Hardy">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link rel="stylesheet" href="../standard.css" type="text/css">
<script language="JavaScript" type="text/javascript">
<!--
if (parent.location.href==location.href) {
parent.location.href="deutsch.html";
}

//-->
</script>

<style type="text/css">
<!--
body {background-position:95% 0px;
      background-image:url(../bilder/leuchter.gif);
      background-attachment:fixed;
}

div.bigmap  {position: absolute;
       top:50%;
       left:2%;
       height:auto;
       width:auto;
}

div.map1 {position: absolute;
       top:4%;
       left:2%;
       height:180px;
       width: 252px;
}

div.map2 {position: absolute;
       top:4%;
       left:35%;
       height:180px;
       width:252px;
}

div.button {position: absolute;
       top:90%;
       left:2%;
       height:30px;
       width: 600px;
}

div.map3 {position: absolute;
       top:48%;
       left:2%;
       height:180px;
       width:252px;
}

div.map4 {position: absolute;
       top:48%;
       left:35%;
       height:180px;
       width:252px;
}



//-->
</style>

</head>

<body>

<div id="bigmap" align="center"><img src="../maps/leer.gif" border="0" name="image6"> </div>



<div id="map1" class="map1">
<img src="../maps/alicque1.gif" name="image1" border="0" alt="Karte" onmouseover="image6.src='../maps/alicque2.gif';image1.src='../maps/leer.gif';image2.src='../maps/leer.gif';image3.src='../maps/leer.gif';image4.src='../maps/leer.gif';image7.src='../maps/leerklein.gif';image8.src='../maps/leerklein.gif';image9.src='../maps/leerklein.gif';"
onmouseout="image6.src='../maps/leer.gif';image1.src='../maps/alicque1.gif';image2.src='../maps/questmp1.gif';image3.src='../maps/rocajun1.gif';image4.src='../maps/espana1.gif';image7.src='button/weg1pdf.gif';image8.src='button/weg2pdf.gif';image9.src='button/weg.gif';">
<p></p>
</div>

<div id="map2" class="map2">
<img src="../maps/questmp1.gif" name="image2" border="0" alt="Karte" onmouseover="image6.src='../maps/questmp2.gif';image1.src='../maps/leer.gif';image2.src='../maps/leer.gif';image3.src='../maps/leer.gif';image4.src='../maps/leer.gif';image7.src='../maps/leerklein.gif';image8.src='../maps/leerklein.gif';image9.src='../maps/leerklein.gif';"
onmouseout="image6.src='../maps/leer.gif';image1.src='../maps/alicque1.gif';image2.src='../maps/questmp1.gif';image3.src='../maps/rocajun1.gif';image4.src='../maps/espana1.gif';image7.src='button/weg1pdf.gif';image8.src='button/weg2pdf.gif';image9.src='button/weg.gif';">
<p></p>
</div>



<div id="map3" class="map3"><img src="../maps/rocajun1.gif" name="image3" border="0" alt="Karte" onmouseover="image6.src='../maps/rocajun2.gif';image1.src='../maps/leer.gif';image2.src='../maps/leer.gif';image3.src='../maps/leer.gif';image4.src='../maps/leer.gif';image7.src='../maps/leerklein.gif';image8.src='../maps/leerklein.gif';image9.src='../maps/leerklein.gif';"
onmouseout="image6.src='../maps/leer.gif';image1.src='../maps/alicque1.gif';image2.src='../maps/questmp1.gif';image3.src='../maps/rocajun1.gif';image4.src='../maps/espana1.gif';image7.src='button/weg1pdf.gif';image8.src='button/weg2pdf.gif';image9.src='button/weg.gif';">
<p></p></div>

<div id="map4" class="map4"><img src="../maps/espana1.gif" name="image4" border="0" alt="Karte" onmouseover="image6.src='../maps/espana2.gif';image1.src='../maps/leer.gif';image2.src='../maps/leer.gif';image3.src='../maps/leer.gif';image4.src='../maps/leer.gif';image7.src='../maps/leerklein.gif';image8.src='../maps/leerklein.gif';image9.src='../maps/leerklein.gif';"
onmouseout="image6.src='../maps/leer.gif';image1.src='../maps/alicque1.gif';image2.src='../maps/questmp1.gif';image3.src='../maps/rocajun1.gif';image4.src='../maps/espana1.gif';image7.src='button/weg1pdf.gif';image8.src='button/weg2pdf.gif';image9.src='button/weg.gif';">
<p></p></div>

<div id="button" class="button"  align="justify">

<img src="button/weg.gif" name="image9" width="200" height="30" border="0" alt=""><a href="../maps/weg1.pdf" target="top" onmouseover="image7.src='button/weg1pdfa.gif';" onmouseout="image7.src='button/weg1pdf.gif';"><img src="button/weg1pdf.gif" name="image7" width="200" height="30" border="0" alt="click"></a><a href="../maps/weg2.pdf" target="top" onmouseover="image8.src='button/weg2pdfa.gif';" onmouseout="image8.src='button/weg2pdf.gif';"><img src="button/weg2pdf.gif" name="image8" width="200" height="30" border="0" alt="click"></a>

</div>

</body>
</html>

also ich lege auf der Oberlaeche vier bilder in je einem kleinem div ab.
wenn ich eins mit der Maus ueberstreiche, wird im grossen div das leere Bild gegen ein grosses getauscht.
die kleinen beiben aber immer ueber dem grossen div.

als Loesung bekommen die kleinen divs jetzt immer ein leeres bild wenn das grosse erscheinen soll.

nichtsgeht · 1 September 2007

2 Fehler sind mir auf anhieb aufgefallen.

1) Falscher DOCTYPE
2) Wieso das:

Code:

<div id="map1" class="map1">

Es genügt doch

Code:

<div class="map1">

Den Rest muß ich mir mal genauer ansehen, habe allerdings keine Zeit mehr.
Aber vielleicht liegt es ja daran.

Frank · 1 September 2007

soweit ich es jetzt gesehen habe ist bigmap der container der das große bild fassen soll

Code:

div {
       z-index : 1;
}
div.bigmap  {
       position: absolute;
       top:50%;
       left:2%;
       height:auto;
       width:auto;
       z-index : 2;
}

edi · 1 September 2007

falscher doctyp? was geht? wonach richte ich mich? Nehme immer den ohne drueber nachzudenken.

ID="...." kommt nicht von mir sondern aus einem kleinen Lehrheft. Bin davon ausgegangen das verschiedene Browser verschiedene Befehle haben.
Kann aber veraltet sein.

nichtsgeht · 2 September 2007

Der von dir Verwendete DOCTYPE ist für Framesets. Ich würde dir diesen hier empfehlen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

Wenn du dich strickt an das W3C-Standard hälst, und Befehle vermeidest, die als deprecated (missbilligt) eingestuft sind, kannst du auch diesen DOCTYPE benutzen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

Desweiteren gibt es noch andere für XHTML.

Zu id und class: ID sind individuelle Formate, die mit einer # deklariert sind, diese dürfen nur einmal verwendet werden z.B.

Code:

  #rot { border:6px double red; }

CLASS sind Klassen, und werden mit einem Punkt deklariert, diese dürfen mehrmals verwendet werden:

Code:

  .rot { border:6px double red; }

Du hast deine Formate mit einem Punkt deklariert, alse benutze CLASS

EDIT: Mit den Browsern hat dies nichts zu tun, bzw. sehr alte Browser kennen eins von beiden nicht, aber ich weiss jetzt nicht mehr welche es war.

edi · 2 September 2007

nichtsgeht schrieb:
Der von dir Verwendete DOCTYPE ist für Framesets. Ich würde dir diesen hier empfehlen:

die datei um die es geht, ist eine Teil eines frameset. deshalb der doctyp

guckst Du
Freimauerer in Torrevieja bei Standort.

nichtsgeht · 2 September 2007

Der DOCTYPE Frameset ist nur für die erste Seite (bei dir deutsch.html). Die Dateien, die Innerhalb des Framesets angezeigt werden (kopf.html, navi1.html,...) bekommen das normale DOCTYPE.

edi · 2 September 2007

danke dafuer.

ich teste mal alles aus

also alles geprueft. mit dem doctype und nur Verwendung von class funktioniert auch die Indexierung der Reihenfolge. Sehr gut.
Fuer meinen Bedarf ist der index aber ungeeignet. Ich hab ja einen mouseovereffekt auf den kleinen maps und der geht verloren wenn das grosse Bild sie abdeckt. "Herzkammerflimmern" :-)
Also mach ich zwar die Korrektur aber ohne index und mit leeren Bildern

divś mit ueberlappungen

edi

Neues Mitglied

Frank

Neues Mitglied

edi

Neues Mitglied

nichtsgeht

Neues Mitglied

edi

Neues Mitglied

nichtsgeht

Neues Mitglied

Frank

Neues Mitglied

edi

Neues Mitglied

nichtsgeht

Neues Mitglied

edi

Neues Mitglied

nichtsgeht

Neues Mitglied

edi

Neues Mitglied

Neueste Beiträge