vordergrund - hintergrund

saibo · 31 Mai 2007

hallo

wie kann ich regeln dass der inhalt eines css teil im vordergrund und der andere im hintergrund ist?

habe ein menügemacht und möchte nun dass bei ausklappen des menüs das bind darunter überdeckt wird?

hier mein erster entwurf:

HTML:

<html>
<head>
<style type="text/css">

#Kategorie1
{position:absolute;
left:40px;
top:40px;
border: solid 1px #FFFFFF;
}
#Kategorie2
{position:absolute;
left:160px;
top:40px;
border: solid 1px #FFFFFF;
}
#Kategorie3
{position:absolute;
left:280px;
top:40px;
border: solid 1px #FFFFFF;
}
#Kategorie4
{position:absolute;
left:400px;
top:40px;
border: solid 1px #FFFFFF;
}
#Kategorie5
{position:absolute;
left:520px;
top:40px;
border: solid 1px #FFFFFF;
}
#Kategorie6
{position:absolute;
left:640px;
top:40px;
border: solid 1px #FFFFFF;
}
#PicOben
{
position: absolute;
background:url(../../../Pictures/sda.jpg);
left: 40px;
top: 100px;
border: solid 1px #FFFFFF;
width:700px;
height:300px;
}

#Text
{
position: absolute;
background-color:#FFFF66;
left:40px;
top:400px;
border: solid 1px #000000;

width:700px;

}


#IDAllgemein
{
position:absolute;
left:1px;
background-color:#FFFF33;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
display:block;
width:118px;
}

.HauptMenue
{
    background-color:#FFFF66;
    width:200px;
    height:20px;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    border: solid 1px #FFFFFF;
    display:block;
    padding-top:10px;
    padding-bottom:5px;
    padding-left:2px;
    padding-right:2px;
}
a:link {  color:#993300; text-decoration:none; }
a:visited { color:#FF6600; text-decoration:none; }
a:focus { color:#000000; text-decoration:none; }
a:hover { color:#000000; text-decoration:none; }
a:active { color:#FF6600; text-decoration:none; }






</style>

<script type="text/javascript">
function outline(divid)
{

 if(document.getElementById(divid).style.display == 'none')
 {
  document.getElementById(divid).style.display = 'block';

 }
 else
 {
  document.getElementById(divid).style.display = 'none';

 }
}
</script>


</head>
<body>
<div id="Kategorie1">
<span class="Hauptmenue"><a href="www.google.de">&nbsp;Willkommen</a></span>
<span id="ID1" style="display:none">
<span id="IDAllgemein">
 
</span>
</span>
</div>
<div id="Kategorie2">
<span class="Hauptmenue"><a href="#" onClick="outline('ID2'); return false;">
&nbsp;Speisekarte</a></span>
<span id="ID2" style="display:none">
<span id="IDAllgemein">
<br>
  &nbsp; &nbsp;<a href="http://www.ARD.de">ARD</a><br><br>
  &nbsp; &nbsp;<a href="http://www.ZDF.de">ZDF</a><br><br>

  &nbsp; &nbsp;<a href="http://www.WDR.de">WDR</a><br><br>
  &nbsp; &nbsp;<a href="http://www.NDR.de">NDR</a><br><br>
  &nbsp; &nbsp;<a href="http://www.eurosport.de">Eurosport</a><br><br>
</span>
</span>
</div>

<div id="Kategorie3">
<span class="Hauptmenue"><a href="#" onClick="outline('ID3'); return false;">&nbsp;Bestellung</a></span>
<span id="ID3" style="display:none">
<span id="IDAllgemein">

  &nbsp;&nbsp;<a href="http://www.amazon.de">Amazon</a><br>
  &nbsp;&nbsp;<a href="http://www.ebay.de">ebay</a><br>
</span>
</span>
</div>

<div id="Kategorie4">
<span class="Hauptmenue"><a href="www.google.de">&nbsp;Mitarbeiter</a></span>
<span id="ID1" style="display:none">
<span id="IDAllgemein">
 
</span>
</span>
</div>

<div id="Kategorie5">
<span class="Hauptmenue"><a href="www.google.de">&nbsp;Gewinnspiel</a></span>
<span id="ID1" style="display:none">
<span id="IDAllgemein">
 
</span>
</span>
</div>

<div id="Kategorie6">
<span class="Hauptmenue"><a href="www.google.de">&nbsp;Kontakt</a></span>
<span id="ID1" style="display:none">
<span id="IDAllgemein">
 
</span>
</span>
</div>

<div id="PicOben">


Willkommen
</div>
<div id="Text">

Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas ligula nostra, accumsan taciti. Sociis mauris in integer, a dolor netus non dui aliquet, sagittis felis sodales

</div>

</body>

</html>

ok hab selber rausgefunden wie das geht: z-index!

das was im hintergrund sein soll eine niedige z-index zahl
vordergrund eine höhere

Mod-Edit: Beiträge zusammengeführt, es gibt einen Edit-Button! (Alti)

3UGENE · 1 Juni 2007

Mit z-index geht das.

Du weist dem Objekt das im Vordergrund stehe soll den höchsten Wert zu
und wechselst ihn dann mit CSS hover oder JS.

Dein Quellcode ist mir leider zu unübersichtlich, deshalb mache ich hier nur ne kleine Lösung in beiden Varianten.

CSS:

Code:

#linknr1{
 z-index: 4;
}

#linknr1:hover{
 z-index: 5;
}

#linknr2{
 z-index: 4;
}

JS:

HTML:

<div onmouseover="this.style.zIndex='5'">
</div>

Vorraussetzung für funktionierendes z-index ist die absolute Positionierung!
(CSS: | position: absolute; )

vordergrund - hintergrund

saibo

Neues Mitglied

3UGENE

Guest

Neueste Beiträge