Suche im Forum:
Suchen


Autor Nachricht
Beitrag11.08.2008 um 17:38 (UTC)    
Titel: [erledigt] "Drop Down" Menü

Hallo Leute!

http://tutorials-area.de.tl/Script-Coolmenue.htm

Was ist das "z-index"
(da wo es rot ist)

mfg
______________
Neu: kostenlose und professionelle Webtools wie Newssystem, Newsletter oder Gästebuch nun auf 1atools.eu!
>> Jetzt anmelden!


Zuletzt bearbeitet von designtests am 14.08.2008, 13:09, insgesamt 2-mal bearbeitet
Beitrag11.08.2008 um 17:41 (UTC)    
Titel:

Die Höhe der Ebene.

Z-Index1 = Ganz unten,

Je höher die Zahl, desto höher ist das Bild oder was auch immer
______________
My MSN: Twista_styler@yahoo.de

Beitrag13.08.2008 um 17:49 (UTC)    
Titel:

Hm da hat sich aber auch nix verändert...

ps. ich habe jetzt die breite (width) auf 905px (standard), und das menü ist fast so breit wie mein header, und der ist etwa 800px breit, was ist mit dem rest??

Und unter dem Header ist da noch so ein komischer schwarzer streifen. wie kriegt man ihn weg?

hier mal der gesamte code:

Zitat:
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 22px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 160px;
left: 51%;
margin-left:-405px;
width:905px;
}

.menu li
{
width: 160px;
float: left;
}

.menu a
{
border: 0px solid #000000;
background-color: #042338;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF;
}

.menu a:hover
{
background-color: #004F7A;
background-image: url(URL);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 160px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a href="LINK1"> TITEL1</a> </li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> TITEL2</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li><a href="UNTERLINK2.3">Titel</a></li>
<li><a href="UNTERLINK2.3">Titel</a></li>
<li><a href="UNTERLINK2.4">Titel</a></li>
<li><a href="UNTERLINK2.5">Titel</a></li>
<li><a href="UNTERLINK2.6">Titel</a></li>
<li><a href="UNTERLINK2.7">Titel</a></li>
<li><a href="UNTERLINK2.8">Titel</a></li>
<li><a href="UNTERLINK2.9">Titel</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> TITEL3</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
<li><a href="UNTERLINK3.2">Titel</a></li>
<li><a href="UNTERLINK3.3">Titel</a></li>
<li><a href="UNTERLINK3.4">Titel</a></li>
<li> </li>
</ul>
</li>
<li><a href="LINK4"> TITEL4</a></li>
<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);"> TITEL5</a>
<ul onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" id="smenu5">
<li><a href="LINK5.1">Titel</a></li>
<li><a href="LINK5.2">Titel</a></li>
</ul>
</li>
</div>

______________
Neu: kostenlose und professionelle Webtools wie Newssystem, Newsletter oder Gästebuch nun auf 1atools.eu!
>> Jetzt anmelden!
Beitrag14.08.2008 um 14:09 (UTC)    
Titel:

hi - erstmal zu dem Teil :
Hier wird das gesamte Menue positioniert:
Zitat:
div.menu
{
position: absolute; Absolute Positionierung
z-index: 3; würde hier 1 stehen ist das Menue unter den Bildern, etc. bei 3 steht das Menue über allem
top: 124px; Abstand des Coolmenues vom oberen Rand
left: 50%; Ausrichtung des Coolmenues (50% = zentriert)
margin-left:-405px; Abstand des Coolmenues nach rechts auf dem Bildschirm
width:900px; Breite des gesamten Coolmenues (in diesem Fall 5 x 160px = 900px)
}

zu dem schwarzen - das coolmenue muß bei dir einfach etwas weiter nach rechts, dann paßt es - den Wert solange Stück für Stück ändern, bis es paßt
Ciao Michael
______________
Ciao Michael
Wenn man keine Ahnung hat, einfach mal fragen!


No Support via PN, E-Mail or Messenger - only here : FORUM


Zuletzt bearbeitet von success4you am 14.08.2008, 15:10, insgesamt einmal bearbeitet
Beitrag14.08.2008 um 17:31 (UTC)    
Titel:

success4you hat Folgendes geschrieben:
hi - erstmal zu dem Teil :
Hier wird das gesamte Menue positioniert:
Zitat:
div.menu
{
position: absolute; Absolute Positionierung
z-index: 3; würde hier 1 stehen ist das Menue unter den Bildern, etc. bei 3 steht das Menue über allem
top: 124px; Abstand des Coolmenues vom oberen Rand
left: 50%; Ausrichtung des Coolmenues (50% = zentriert)
margin-left:-405px; Abstand des Coolmenues nach rechts auf dem Bildschirm
width:900px; Breite des gesamten Coolmenues (in diesem Fall 5 x 160px = 900px)
}

zu dem schwarzen - das coolmenue muß bei dir einfach etwas weiter nach rechts, dann paßt es - den Wert solange Stück für Stück ändern, bis es paßt
Ciao Michael


Danke!

Also ich hab jetzt bei left: 50% eingestellt, trotzdem ist von rechts noch ein kleiner Abstand vorhanden. Mache ich 49% oder 51%, ist es wieder zu weit. Was ist da falsch?

5x160=800^^

lg
______________
Neu: kostenlose und professionelle Webtools wie Newssystem, Newsletter oder Gästebuch nun auf 1atools.eu!
>> Jetzt anmelden!
Beitrag14.08.2008 um 19:34 (UTC)    
Titel:

was habe ich denn rot gemacht ?? ^^

margin-left:-405px;

ciao michael

die 50 % laß die zentrieren das ganze ist besser für die verschiedenen browser - ff ie etc.
ciao
______________
Ciao Michael
Wenn man keine Ahnung hat, einfach mal fragen!


No Support via PN, E-Mail or Messenger - only here : FORUM
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de