Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag21.05.2009 um 15:19 (UTC)    
Titel: Oberes Menü aneinander schieben?

Hi, ich heute an meiner homepage ein wenig rumgebastelt und dabei ein menü erstellt, welches unter dem header zu sehen ist.

Wie man auf meiner Homepage sehen kann, gibt es aber zwischen den 3 Menüpunkten Lücken.
Diese Lücken möchte ich gerne weg haben.

Wie kann man diese Lücken schließen?

hier ist mein code für das obere menü:

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: 145px;
left: 50%;
margin-left:-330px;
width: 100%;
}

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

.menu a
{
border: 1px solid #000000;
background-color:#506f3f;
padding-top: 9px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 25px;
color: #00000;
}

.menu a:hover
{
background-image:url(http://img.webme.com/pic/r/realsoccerleague/buttonversion2menuo.png);
}

#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');">Communitypokale</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://realsoccerleague.de.tl/Pokal-1-.--Real-Soccer-League.htm" target="_self">Pokal 1. Liga</a></li>
<li><a href="http://realsoccerleague.de.tl/Pokal-2-.--Real-Soccer-League.htm" target="_self">Pokal 2. Liga</a></li>
<li><a href="http://realsoccerleague.de.tl/Realsoccer-Cup.htm" target="_self">Realsoccer Cup</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Real Soccer League</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://realsoccerleague.de.tl/-Ue-ber-Uns.htm" target="_self">Über Uns</a></li>
<li><a href="http://realsoccerleague.de.tl/Regeln.htm" target="_self">Regeln</a></li>
<li><a href="http://realsoccerleague.de.tl/Pr.ae.miensystem.htm" target="_self">Prämiensystem</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Manager des Monats</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://realsoccerleague.de.tl/Manager-des-Monats--Ue-bersicht.htm" target="_self">Regeln</a></li>
<li><a href="http://realsoccerleague.de.tl/Manager-des-Monats-1-.--Liga.htm" target="_self">1. Liga</a></li>
<li><a href="http://realsoccerleague.de.tl/Manager-des-Monats-2-.--Liga.htm" target="_self">2. Liga</a></li>
</ul>
</li>
</ul>
</div>


Danke schon mal für eure hilfe.
ich bin für jede hilfe dankbar


Zuletzt bearbeitet von realsoccerleague am 21.05.2009, 17:00, insgesamt 2-mal bearbeitet
Beitrag21.05.2009 um 16:01 (UTC)    
Titel:

Hi, ich habe dir oben mal im Code das rot makiert,
was du verbessern musst Wink

Denn "margin: 0px 6px;" macht eine 6 Pixel Große Lücke.

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

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag21.05.2009 um 18:09 (UTC)    
Titel:

Danke für deine Hilfe. Hat super geklappt.

Kannst du mir noch sagen, wie ich die menüpunkte größer bekomme.
Man sieht über den 3 punkten noch einen kleinen grünen streifen. Diesen möchte ich gerne weg haben, indem ich die 3 menüpunkte etwas größer mache.

Danke schon mal im Voraus.
Beitrag21.05.2009 um 18:13 (UTC)    
Titel:

Du kannst den Streifen auch entfernen indem du das menü einfach 3 pixel höher setzt.

Hier der Codeauschnitt:

Zitat:

div.menu
{
position: absolute;
z-index: 3;
top: 145px;
left: 50%;
margin-left:-330px;
width: 100%;
}


du verkleinerst einfach top um 3 pixel:

Zitat:

div.menu
{
position: absolute;
z-index: 3;
top: 142px;
left: 50%;
margin-left:-330px;
width: 100%;
}


So brauchst du nicht die Buttons zu vergrößern.

MfG SmaX
______________


Zuletzt bearbeitet von pro-gfx am 21.05.2009, 19:14, insgesamt einmal bearbeitet
Beitrag21.05.2009 um 18:43 (UTC)    
Titel:

wenn ich das menü weiter hoch setze, dann ist der streifen unter dem menü zu sehen. Der streifen sollte aber gar nicht zu sehen sein.
Deshalb möchte ich die drei menüpunkte vergrößern.

Aber danke für deine Hilfe.
Beitrag22.05.2009 um 11:42 (UTC)    
Titel:

weiss keiner, wie man die 3 menüpunkte vergrößern kann?
Beitrag22.05.2009 um 21:09 (UTC)    
Titel:

Hi,
jetzt passen doch die Menüpunkte oder?

Vergrößern kannst du sie in diesem Codeteil:
Zitat:

.menu a
{
border: 1px solid #000000;
background-color:#506f3f;
padding-top: 9px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 25px;
color: #00000;
}


height = höhe in Pixel.

MfG SmaX
______________
Beitrag22.05.2009 um 21:23 (UTC)    
Titel:

ja, die menüpunkte passen jetzt.

Ich habe jetzt die klasse "edit_content_top" verkleinert und das menü noch ein bisschen verschoben.

Danke nochmal für deine Hilfe!!!
Beiträge der letzten Zeit anzeigen:   


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