Suche im Forum:
Suchen


Autor Nachricht
Beitrag18.02.2009 um 15:42 (UTC)    
Titel: Coolmenü

Hallo,

Ich habe folgendes Problem: Ich erstelle gerne mal Designs und habe mich diesmal an ein Coolmenü gewagt. Hat auch prima geklappt:
www.nicks-best.de.tl

Der Haken ist nur der: Im Firefox auf Widescreen zeigt er alles prima an. Denn so soll das Menü positioniert werden:
http://img.webme.com/pic/n/nicks-best/screenshot.jpg
Aber im Explorer hat es sich schon nach links verschoben. Wie ist das dann wohl auf normalen Bildschirmen?

Und: Kann man das irgendwie so fixieren, dass es, egal wie breit / hoch der Browser ist, das Menü da bleibt, wo es sein soll (Bild) ?

Danke im Vorraus und ich benutze das editerte Iceblue Design.
Beitrag18.02.2009 um 16:53 (UTC)    
Titel:

Poste mal deinen CSS Code, oder den bei "Text über dem Design" Wink
______________

Beitrag18.02.2009 um 17:01 (UTC)    
Titel:

Das ist bis jetzt alles, was ich für diese HP gemacht habe. Ist ja noch nicht fertig, wollte bei diesem Problem aber erstmal bleiben^.^

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: 154px;
left: 46%;
margin-left:-290px;
width: 100%;
}

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

.menu a
{
border: 1px solid #F2F2F2;
background-color:transparent;
background-image: url(http://img.webme.com/pic/n/nicks-best/unpressed2.png);
padding-top: 9px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 0px;
display: block;
height: 25px;
color: #FFFFFF;
}

.menu a:hover
{
background-color: transparent;
background-image: url(http://img.webme.com/pic/n/nicks-best/pressed2.png);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 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="Drake-%26-Josh.htm" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Drake & Josh</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
</ul>
</li>

<li><a href="Zoey-101.htm" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Zoey 101</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
</ul>
</li>

<li><a href="Neds-ultimativer-Schulwahnsinn.htm" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Neds u. Schulw.</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
</ul>
</li>

<li><a href="Unfabulous.htm" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Unfabulous</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
</ul>
</li>

<li><a href="iCarly.htm" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">iCarly</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
</ul>
</li>

<li><a href="Genie-In-The-House.htm" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">Genie In The House</a>
<ul id="smenu6" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
</ul>
</li>
</ul>
</div>



<style type="text/css"><!--

td.edit_content_top {background-image: url(http://img.webme.com/pic/n/nicks-best/2contenttop.png); height: 38px;}
td.edit_content {background-image: url(http://img.webme.com/pic/n/nicks-best/2contentedit.png);}
td.edit_content_bottom {background-image: url(http://img.webme.com/pic/n/nicks-best/test2.png);}
td.edit_content_bottom2 {background-image: url();}
td.edit_rechts_cbg {background-image: url();}
body {background-image: url(visbility:hidden); background-attachment: fixed;}

td.edit_header_full {background-image: url(http://img.webme.com/pic/n/nicks-best/headervorschau2.png); background-repeat: no-repeat; width: 921px; height: 130px;}
td.headline{visibility:hidden;}

td.edit_content_top {width:100%; background-image:url(BILD-URL Top); background-color:#XXXXXX}
td.edit_content {width:100%; background-image:url(BILD-URL Content); background-color:#XXXXXX}
td.edit_content_bottom{width:100%; background-image:url(BILD-URL Footer 1); background-color:#XXXXXX}
td.edit_content_bottom2{width:100%; background-image:url(BILD-URL Footer 2); background-color:#XXXXXX}
td.edit_rechts_cbg {width:100%; background-image:url(BILD-URL Hintergrund); background-color:#XXXXXX}
table.edit_rechts_tabelle{width:100%; background-image:url()}
td.edit_rechts_sbg {display:none}
td.edit_rechts_bottom {display:none}
--></style>
Beitrag21.02.2009 um 10:42 (UTC)    
Titel:

Hat keiner eine Idee?

Bei www.success4you.de bleibt das Coolmenü auch so positioniert, wenn man den Browser verkleinert.

Ich hab schon überall Lösungen gesucht, aber finde nichts, brauche Hilfe. Wink
Beitrag21.02.2009 um 10:47 (UTC)    
Titel:

Zitat:
div.menu
{
position: absolute;
z-index: 3;
top: 154px;
left: 46%;
left:10px;
width: 100%;
}
Ändere mal das rote ;)Eine andere Lösung wäre, statt px "%" zunehmen...

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

Iceblue Generator | Red Generator | Butterfly Generator


Zuletzt bearbeitet von der-bielefeld-club am 21.02.2009, 11:48, insgesamt einmal bearbeitet
Beitrag21.02.2009 um 11:47 (UTC)    
Titel:

Das habe ich auch schon ein paar mal versucht, mit verschiedenen Varianten, aber leider hat nichts geholfen. Deswegen bin ich ziemlich ratlos. Trotzdem danke! Very Happy
Beitrag22.02.2009 um 06:30 (UTC)    
Titel:

Schau mal in Deinen Code, dort hast Du Folgendes:

Zitat:
.menu li
{
width: 122px;
float: left;
}


Dann musst Du an dieser Stelle den gleichen Wert verwenden:

Zitat:
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}
Beitrag22.02.2009 um 11:31 (UTC)    
Titel:

Thx, das habe ich abgeändert, hat aber leider nichts gebracht.

Jetzt habe ich es damit versucht:

Zitat:
div.menu
{
position: absolute;
z-index: 3;
top: 154px;
left: 46%;
margin-left:-290px;
width: 100%;
}


--->

Zitat:
div.menu
{
position: relative;
z-index: 3;
top: 154px;
left: 46%;
margin-left:-290px;
width: 100%;
}


Jetzt verrutscht es im Firefox nur noch ganz leicht, wenn man ihn verkleinert, im Explorer sieht es jetzt aber ganz anders und falsch aus.^^
Beitrag22.02.2009 um 11:51 (UTC)    
Titel:

Wenn ich Deinen Quellcode nehme und relative wieder zu absolute mache, klappt bei mir alles.
Beitrag22.02.2009 um 11:59 (UTC)    
Titel:

Auf deiner Seite klappt das Coolmenü auch komplett. Es bleibt wo es ist. Kannst du vielleicht den Code deines Menüs reinstellen, damit ich vergleichen kann, was vielleicht abgeändert werden muss? Very Happy
Beitrag22.02.2009 um 12:00 (UTC)    
Titel:

Das habe ich so gemacht, wie ich es hier beschrieben habe:

http://www.homepage-baukasten.de/forum/viewtopic.php?t=89241
Beiträge der letzten Zeit anzeigen:   


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