Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag23.09.2009 um 17:39 (UTC)    
Titel: Menüleiste Positionieren und einklappen?

Also ich schreib seit neuesten in CSS und will jetzt ein Menü das ich gemacht habe zentrieren. Bekomm es aber ums***** nicht in die Mitte. Möchte das es auch nicht auf die Scallierung oder Größe des jeweiligen browsers oder Systhem abhängt. Hab es mit position:absolute;left:50%;top:265px;margin-left: -435px;} ausprobiert aber dann wird jeder Menükasten untereinander geschrieben.

Und dann möchte ich nich das Das Menü sich nicht wie bei mir schon am Start öffnet sondern eben nur wenn man darüber fährt.

Danke an jeden der eine gute Idee hat Very Happy


So wie es in diesem Code ist bleibt es hald nich bei jedem Systhem in der mitte.
Code:


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

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

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

div.menu
{
position: absolute;
z-index: 3;
top: 268px;
left: 195px;

width:870px;
}

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

.menu a
{
border: 1px solid #000000;
background-color: transparent;
background-image: url(http://img.webme.com/pic/s/saurons-armee/zgz.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 20px;
color: #000000;
}

.menu a:hover
{
background-color: transparent;
background-image: url(http://img.webme.com/pic/s/saurons-armee/zgzn.png);
}

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

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

</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 onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="javascript:void(0);"> General</a>
<ul onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" id="smenu1">
<li><a href="/Home.htm">Home</a></li>
<li><a href="/Ikariam.htm">Browsergame Ikariam</a></li>
<li><a href="/SA Portal.htm">SA Portal</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> SA/SR</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li><a href="/Vorteile.htm">Vorteile</a></li>
<li><a href="Friedensvertr.ae.ge.htm">Verträge</a></li>
<li><a href="/Allianzregeln.htm">Allianzregeln</a></li>
<li><a href="/Allianz History.htm">Allianz History</a></li>
<li><a href="/Saurons-Armee--k1-S-A-k2-.htm">Saurons Armee</a></li>
<li><a href="/Kontakt-f.ue.r-S-A-und-S-R.htm">Saurons Ring</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> Mitglieder</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
<li><a href="/SA%2C-SR-Mitglieder.htm">SA Log In</a></li>
<li><a href="/SA Toolbar.htm">SA toolbar</a></li>
<li><a href="/Bilder.htm">Bilder</a></li>
<li> </li>
</ul>
</li>
<li><a onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" href="javascript:void(0);"> Kontakt</a>
<ul onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" id="smenu4">
<li><a href="/Allianzbewerbung-f.ue.r-S-A-und-S-R.htm">Bewerbung</a></li>
<li><a href="/Kontakt-f.ue.r-S-A-und-S-R.htm">Kontakt</a></li>

</ul>
</li>
</font>
</div>
Beitrag23.09.2009 um 17:48 (UTC)    
Titel:

Füge mal folgenden Code ein:
Zitat:
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 15px;
overflow: auto;
padding: 10px;
margin: 0px;
}

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

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

div.menu
{
position: absolute;
z-index: 3;
left: 50%;
top: 268px;
margin-left: -400px;

width:900px;
}

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

.menu a
{
border: 1px solid #000000;
background-color: transparent;
background-image: url(http://img.webme.com/pic/s/saurons-armee/zgz.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 20px;
color: #000000;
}

.menu a:hover
{
background-color: transparent;
background-image: url(http://img.webme.com/pic/s/saurons-armee/zgzn.png);
}

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

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a,
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #000000;
}
//-->
</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 onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="javascript:void(0);"> General</a>
<ul onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" id="smenu1">
<li><a href="/Home.htm">Home</a></li>
<li><a href="/Ikariam.htm">Browsergame Ikariam</a></li>
<li><a href="/SA Portal.htm">SA Portal</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> SA/SR</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li><a href="/Vorteile.htm">Vorteile</a></li>
<li><a href="Friedensvertr.ae.ge.htm">Verträge</a></li>
<li><a href="/Allianzregeln.htm">Allianzregeln</a></li>
<li><a href="/Allianz History.htm">Allianz History</a></li>
<li><a href="/Saurons-Armee--k1-S-A-k2-.htm">Saurons Armee</a></li>
<li><a href="/Kontakt-f.ue.r-S-A-und-S-R.htm">Saurons Ring</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> Mitglieder</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
<li><a href="/SA%2C-SR-Mitglieder.htm">SA Log In</a></li>
<li><a href="/SA Toolbar.htm">SA toolbar</a></li>
<li><a href="/Bilder.htm">Bilder</a></li>
<li> </li>
</ul>
</li>
<li><a onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" href="javascript:void(0);"> Kontakt</a>
<ul onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" id="smenu4">
<li><a href="/Allianzbewerbung-f.ue.r-S-A-und-S-R.htm">Bewerbung</a></li>
<li><a href="/Kontakt-f.ue.r-S-A-und-S-R.htm">Kontakt</a></li>
</ul>
</li>
</div>
Beim roten dann das ganze positionieren Wink

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag23.09.2009 um 17:57 (UTC)    
Titel: Funzt

Also mal ein großes dank bist echt Genial. hätte mir eigentlich auch gelingen müssen. War aber schon zu 50% dran.

Aber wie kann ich es machen das es sich nicht von anfang an öffnet? Erst wenn man einmal drüber gegangen ist dann bleibt es zu. Es soll sich erst aufklappen wenn man darüber fährt.

Danke!!!
Beitrag23.09.2009 um 19:11 (UTC)    
Titel:

Hallo,

füge mal folgenden Code in deinen CSS Teil hinzu:
Code:
#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
}


Mfg. Arne
Beitrag23.09.2009 um 19:25 (UTC)    
Titel: Danke

Danke genau das hab ich noch gebraucht Very Happy
Beiträge der letzten Zeit anzeigen:   


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