Suche im Forum:
Suchen


Autor Nachricht
Beitrag04.08.2009 um 14:21 (UTC)    
Titel: Design CSS: Navibild verschoben

Hey Leute.

Ich habe gerade schon im Forum gefragt wie man in meiner Navi den Text 4 Pixel weiter nach unten bekommt. Aber nun ist der Text nicht nur 4 Pixel weiter unten sondern auch wenn man mit der Maus drüberfährt (Mousover) das Bild.
Arrow http://pn-test.de.tl/Startseite.htm
Das ist der Code:
Code:
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 12px;
overflow: auto;
padding: 10px;
margin: 0px;
}

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

.menu
{
position: absolute;
z-index: 2;
top: 140px;
left: 8px;
padding-top:4px; 
}

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

.menu a
{
border: 1px solid #transparent;
background-color: #transparent;
bachground-image:url();
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 27px;
color: #000000;
}

.menu a:hover
{
background-color: #ccc;
background-image:url(http://img.webme.com/pic/p/pn-test/over2.png);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, #smenu9
{
font-size: 14px;
display: none;
width: 140px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7 a, #smenu8 a, #smenu 9 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>

</head>
<body>

<div class="menu">
<ul>
<li><a href="/Startseite.htm" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Startseite</a>
</li>

<li><a href="/G_Book.htm" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">G-Book</a>
</li>

<li><a href="/Grafiken.htm" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Grafiken</a>
</li>

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

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

<li><a href="/Vote-4-me.htm" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">Vote 4 me</a>
</li>

<li><a href="/Link-me.htm" onmouseover="montre('smenu7');" onmouseout="cache('smenu7');">Link me</a>
</li>

<li><a href="/Partner.htm" onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">Partner</a>
</li>

<li><a href="/Impressum.htm" onmouseover="montre('smenu9');" onmouseout="cache('smenu9');">Impressum</a>
</li>
</ul>
</div>

</body>
</html>

Schonmal danke...

MFG


Zuletzt bearbeitet von pn-test am 04.08.2009, 21:16, insgesamt einmal bearbeitet
Beitrag04.08.2009 um 20:18 (UTC)    
Titel:

Hey,

Kannst du deine Frage etwas deutlicher formulieren, dass sich die User besser etwas darunter vorstellen können.

Bei mir wird es übrigens richtig angezeigt, welchen Browser nutzt du?

mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING
Beitrag05.08.2009 um 05:50 (UTC)    
Titel:

Hallo,

erster Fehler im Code der Navigation Wink
Zitat:

#nav_container{
position: absolute;
left: -50%;
top:140px;
margin-left: -490px;
width: 160px;
border:1px solid #FFFFFF;}


Entferne dort das Minuszeichen . Korrekt wäre : left:50%;

Dann zu deinem Design-Bild :
Es ist 1266 Pixel breit . Alle Besucher mit einer Auflösung von 1024 x 768 haben in der Breite einen Scrollbalken Wink

Wir empfehlen immer (wenn 1 Bild das Design ist) maximale Breite 980 Pixel.
User mit 1024 x 768 Monitor haben ein sichtbares Internetfenster von ca 1000 Pixel.
Wenn links und rechts vom Design noch 10 Pixel sauberer Abstand zum Bildschirmrand sichtbar sein soll,
bleiben für das Designbild noch 980 Pixel Gesamtbreite .

Dann würde ich auch das Bild bei #mein_Bild so positionieren, wie alle anderen Klassen auch .
Du hast allen Feldern ein left: 50% ; gegeben . Design wird immer mittig platziert.
Nur für dein Hintergrundbild fehlt diese Anweisung im Code :

position:absolute;
left:50%;
top: XXXpx;
margin-left: -490px;


das margin-left: -490px; dann , wenn das Designbild 980 Pixel breit ist .
Bildschirmmitte ist Null Pixel . ganz links wäre -490 (minuszahl) . Und ganz rechts 490 (Pluszahl).
Und 490 + 490 = 980 . = Die Breite des Designs .

Zu deinem Coolmenü / navigation oben :
Bei einer Bildschirmauflösung von 1024 x 768 wird diese 2 Zeilig . Das Coolmenü ist zu breit .

Und der Text soll 4 Pixel weiter nach unten ? In allen Links oben ?
Platziere das Feld, welches die Navi als Inhalt hat , 4 Pixel tiefer .

Und zwar hier :
Zitat:

.menu {
position: absolute;
z-index: 2;
top: 140px;
left: 8px;
padding-top:4px; }


Da Du alle deine Felder immer mit left:50%; und margin-left: -XXXpx;
positioniert hast (immer mittig) ,
müsstest Du dieses auch für die Klasse .menü machen .
Es wäre sonst das einzige Feld, das sich nicht nach Bildschirmmitte ausrichtet Wink
Und das verursacht bei unterschiedlichen Bildschirmauflösungen auch unterschiedliche Position im Design .

position:absolute;
left:50%;
top: XXXpx;
margin-left: -XXXpx;


ich denke das half dir weiter Very Happy

Gruß Wolfgang
______________


Zuletzt bearbeitet von 24939 am 05.08.2009, 06:57, insgesamt 6-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


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