Autor
Nachricht
zt-test
27.03.2009 um 19:27 (UTC) Titel: coolmenü abstand veringern
Habe mir ein coolmenü fürn css design gemacht aba irgend wie funktioniert es nicht das ich den abstand zwischen den buttons auf 0px setze.
Hier mal der code:
<style type="text/css" media="screen">
<!--
body
{
font-family: Arial, sans-serif;
font-size: 11px;
overflow: auto;
padding: 13px;
margin: 0px;
}
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
div.menu
{
position: absolute;
z-index: 3;
top: 218px;
left: 50%;
margin-left:-290px;
width: 100%;
}
.menu li
{
width: 200px;
float: left;
}
.menu a
{
border: 1px solid #F2F2F2;
background-color:#000C32;
padding-top: 1px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 2px;
display: block;
background-image:url(http://s7b.directupload.net/images/090327/k7jhyg57.png);
width: 190px;
height: 20px;
color: #FFFFFF;
}
.menu a:hover
{
background-color: #000C32;
background-image:url(http://s4b.directupload.net/images/090327/o9d28gx9.png);
height: 20px;
}
#smenu1, #smenu2, #smenu3
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}
#smenu1 a, #smenu2 a, #smenu3 a
{
font-size: 13px;
font-weight: bold;
padding-top: 9px;
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="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">TITEL NAVI-Button 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">TITEL NAVI-BUTTON 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>
</ul>
</div>
↑
coolplace
Wohnort: USB = United States of Bücken
27.03.2009 um 22:34 (UTC) Titel:
In meinem Versuch sind die Grafiken schön untereinander, kannst Du mal einen Screenshot machen?
↑
zt-test
↑
der-bielefeld-club
Premium
Support-Team
Wohnort: Bielefeld
27.03.2009 um 23:17 (UTC) Titel:
Hi, versuch mal diesen Code:
Zitat: <style type="text/css" media="screen">
<!--
body
{
font-family: Arial, sans-serif;
font-size: 11px;
overflow: auto;
padding: 13px;
margin: 0px;
}
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
div.menu
{
position: absolute;
z-index: 3;
top: 218px;
left: 50%;
margin-left:-290px;
width: 100%;
}
.menu li
{
width: 200px;
float: left;
}
.menu a
{
border: 1px solid #F2F2F2;
background-color:#000C32;
padding-top: 1px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
background-image:url(http://s7b.directupload.net/images/090327/k7jhyg57.png);
width: 190px;
height: 20px;
color: #FFFFFF;
}
.menu a:hover
{
background-color: #000C32;
background-image:url(http://s4b.directupload.net/images/090327/o9d28gx9.png);
height: 20px;
}
#smenu1, #smenu2, #smenu3
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}
#smenu1 a, #smenu2 a, #smenu3 a
{
font-size: 13px;
font-weight: bold;
padding-top: 9px;
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="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">TITEL NAVI-Button 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">TITEL NAVI-BUTTON 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>
</ul>
</div>
Das
rot makierte wurde geändert
mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:
Iceblue Generator |
Red Generator |
Butterfly Generator Zuletzt bearbeitet von der-bielefeld-club am 28.03.2009, 00:25, insgesamt einmal bearbeitet
↑
coolplace
Wohnort: USB = United States of Bücken
27.03.2009 um 23:22 (UTC) Titel:
Auf dem ersten Blick sehe ich jetzt nicht, was mein Vorredner geändert hat, aber Du müsstest diesen Punkt ändern:
Zitat: .menu li
{
width: 190 px;
float: left;
}
Zuletzt bearbeitet von coolplace am 28.03.2009, 00:22, insgesamt einmal bearbeitet
↑
zt-test
27.03.2009 um 23:29 (UTC) Titel:
thx hat wunderbar geklappt..
↑
coolplace
Wohnort: USB = United States of Bücken
27.03.2009 um 23:41 (UTC) Titel:
Vielen Dank für die Rückmeldung
Ich schließe das Thema dann mal...
↑