Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag31.05.2007 um 19:45 (UTC)    
Titel: [erledigt] Menüpunkte im Coolmenu nebeneinander, wie?

Hallo,

ich habe folgendes Problem:

Die Menüpunkte im Coolmenu sind bei mir untereinander, aber ich würde sie gerne nebeneinander haben und ich finde den Haken nicht. Deshalb bitte ich um Hilfe.

Hier mein Code:

Code:
<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;
}

div.menu
{
position: absolute;
z-index: 3;
top: 150px;
left: 50%;
}

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

.menu a
{
border: 1px solid #000000;
background-color: #0000CC;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 2px;
display: block;
height: 20px;
color: #FFFFFF;
}

.menu a:hover
{
background-color: #00CCFF;
}

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

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->

</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="http://pazox.de.tl/G.ae.stebuch.htm">
Gästebuch</a>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
HTML-Tutorials</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">

<li><a href="http://pazox.de.tl/Ausrichten.htm">Ausrichten</a></li>
<li><a href="http://pazox.de.tl/Farbtabelle--k1-16-k2-.htm">Farbtabelle (16)</a></li>
<li><a href="http://pazox.de.tl/Grafiken-einf.ue.gen.htm">Grafiken einfügen</a></li>
<li><a href="http://pazox.de.tl/Marquee.htm">Marquee</a></li>
<li><a href="http://pazox.de.tl/Schriftattribute.htm">Schriftattribute</a></li>
<li><a href="http://pazox.de.tl/Schriftfarben.htm">Schriftfarben</a></li>
<li><a href="http://pazox.de.tl/Schriftgr.oe..ss.en.htm">Schriftgrößen</a></li>
<li><a href="http://pazox.de.tl/Tabelle.htm">Tabelle</a></li>
<li><a href="http://pazox.de.tl/Verlinken.htm">Verlinken</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
Vorlagen</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">

<li><a href="http://pazox.de.tl/Buttons-Iceblue.htm">Buttons Iceblue</a></li>
<li><a href="http://pazox.de.tl/Header-Iceblue.htm">Header Iceblue</a></li>
<li><a href="http://pazox.de.tl/%3Cimg-src%3Dhttp-d--s--s-88-.-198-.-45-.-22-s-pic-s-p-s-pazox-s-new-.-gif%3E-Banner.htm">Banner</a></li>

</ul>
</li>

<li><a href="http://pazox.de.tl/%3Cimg-src%3Dhttp-d--s--s-88-.-198-.-45-.-22-s-pic-s-p-s-pazox-s-new-.-gif%3E-Geld-verdienen.htm">
Geldverdienen</a>

</ul>
</li>
</ul>
</div>


Zuletzt bearbeitet von pazox am 31.05.2007, 21:25, insgesamt einmal bearbeitet
Beitrag31.05.2007 um 20:11 (UTC)    
Titel:

Probier mal so:

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;
}

div.menu
{
position: absolute;
z-index: 3;
top: 150px;
left: 50%;
margin-left:-300px;
width:600px;

}

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

.menu a
{
border: 1px solid #000000;
background-color: #0000CC;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 2px;
display: block;
height: 20px;
color: #FFFFFF;
}

.menu a:hover
{
background-color: #00CCFF;
}

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

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->

</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="http://pazox.de.tl/G.ae.stebuch.htm">
Gästebuch</a>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
HTML-Tutorials</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">

<li><a href="http://pazox.de.tl/Ausrichten.htm">Ausrichten</a></li>
<li><a href="http://pazox.de.tl/Farbtabelle--k1-16-k2-.htm">Farbtabelle (16)</a></li>
<li><a href="http://pazox.de.tl/Grafiken-einf.ue.gen.htm">Grafiken einfügen</a></li>
<li><a href="http://pazox.de.tl/Marquee.htm">Marquee</a></li>
<li><a href="http://pazox.de.tl/Schriftattribute.htm">Schriftattribute</a></li>
<li><a href="http://pazox.de.tl/Schriftfarben.htm">Schriftfarben</a></li>
<li><a href="http://pazox.de.tl/Schriftgr.oe..ss.en.htm">Schriftgrößen</a></li>
<li><a href="http://pazox.de.tl/Tabelle.htm">Tabelle</a></li>
<li><a href="http://pazox.de.tl/Verlinken.htm">Verlinken</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
Vorlagen</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">

<li><a href="http://pazox.de.tl/Buttons-Iceblue.htm">Buttons Iceblue</a></li>
<li><a href="http://pazox.de.tl/Header-Iceblue.htm">Header Iceblue</a></li>
<li><a href="http://pazox.de.tl/%3Cimg-src%3Dhttp-d--s--s-88-.-198-.-45-.-22-s-pic-s-p-s-pazox-s-new-.-gif%3E-Banner.htm">Banner</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
Was auch immer</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">

<li><a href="http://pazox.de.tl/%3Cimg-src%3Dhttp-d--s--s-88-.-198-.-45-.-22-s-pic-s-p-s-pazox-s-new-.-gif%3E-Geld-verdienen.htm">
Geldverdienen</a>

</ul>
</li>
</ul>
</div>
Beitrag31.05.2007 um 20:25 (UTC)    
Titel:

Als ich das letzte rote von dir einsetzen wollte ist mir aufgefallen, dass die beiden letzten </ui> unnötig waren Rolling Eyes

Trotzdem Danke für deine Hilfe Wink
Beitrag31.05.2007 um 21:14 (UTC)    
Titel:

könntet ihr mir bitte das mal erklären wollte nähmlich auch sowas machen ob mir das jemand sagt als ich das nähmlich machen wollte war es senkrecht und nicht waagerecht
Beiträge der letzten Zeit anzeigen:   


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