Autor |
Nachricht |
-
designtests
|
11.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
|
|
↑
|
|
|
-
twisted-style
|
11.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
|
|
↑
|
|
|
-
designtests
|
13.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! |
|
↑
|
|
|
-
success4you
Wohnort: RheinMainArea
|
14.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
|
|
↑
|
|
|
-
designtests
|
14.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! |
|
↑
|
|
|
-
success4you
Wohnort: RheinMainArea
|
14.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
|
|
↑
|
|
|
|