[Gelöst] Navigation Problem

LunarBugs · 3. März 2010

Hi,
bin noch ein richtig blutiger Anfänger was WebDesign angeht und hoffe, dass ihr mir helfen könnt...

Ich wollt eine Navigation, ähnlich wie hier machen -> MPC Forum
Ich scheitere aber kläglich beim rollover Effekt... der rollover ist immer nur soweit erkennbar, wie die Buchstaben reichen, also nur ein "halber rollover" :cry:
Außerdem schaff ich es auch nicht, dass der Link nicht nur bei der Schrift, sondern auch beim Button klickbar ist. Vielleicht auch der Grund für das Problem.
Ich hoffe ihr habt mich verstanden. :roll:

index.htm

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">




<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
<link rel="stylesheet" type="text/css"
 media="screen" href="design.css" />




<style type="text/css">
<!--
html {
    background:url(bilder/banner-navline.png) no-repeat center top;
    background-color: #535353; font-weight:bold; font-family:Arial;
}
-->
</style>
</head>
<body>
<div id="navi" class="navi">
  <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="aktuell.htm">Aktuell</a></li>
    <li><a href="mitglieder.htm">Mitglieder</a></li>
    <li><a href="aktivitaeten.htm">Aktivit&auml;eten</a></li>
    <li><a href="interaktiv.htm">Interaktiv</a></li>
    <li><a href="kontakt.htm">Kontakt</a></li>
    <li><a href="impressum.htm">Impressum</a></li>
  </ul>
</div>




</body>
</html>

Alles anzeigen

design.css

Code

#navi {
    text-align:center;              
    margin-top:195px;              
    margin-left:17px;             
    font-size:9pt;
    font-family:arial, "lucida console", sans-serif;
    font-weight:bold;
}




#navi a:link {
    color:#ffffff;
    text-decoration:none;
}




#navi a:hover {
    color:#000000;
    margin-top:195px;               
    font-size:9pt;
    font-family:arial, "lucida console", sans-serif;
    font-weight:bold;
}




#navi li {
    list-style:none;              
    float:left;                    
    width: 82px;
    height: 27px;
    background:url(bilder/navtab.png) no-repeat;       
    border-top:1px #c5f3c6;     
    border-left:1px #c5f3c6;  
    border-bottom:1px #47a948;    
    border-right:1px #47a948;   
    padding-top:8px;               
    padding-bottom:8px;            
}




#navi li a:hover {
    background: url(bilder/navtab-rollover.png) no-repeat;        
    border-top:1px #c5f3c6;    
    border-left:1px #c5f3c6;  
    border-bottom:1px #47a948;   
    border-right:1px #47a948;   
    padding-top:8px;                
    padding-bottom:8px;             
}

Alles anzeigen

lauras · 3. März 2010

Hey,

definiere mal deine Links als block-Elemente, mit

Code

display: block;

Damit erreichst du (wenn ich mich Recht entsinne) dass die komplette Fläche anklickbar wird.

Der hover-Effekt bei den Buttons erreichst du durch die Pseudo-Klassen :link (normal) und :hover (Beim Überfahren).
Am besten mit den Links (nicht mit den Listenpunkten) verknüpft:
Durch Voranstellung eines li erreichst du dass nur Links in Listenpunkten angesprochen werden, kann man aber auch über die navi ID lösen

Code

li a:link {
...]
li a:hover {
...]

Eigentlich sollte es dann funktionieren.

LG
Laura

LunarBugs · 4. März 2010

hey, danke für die Antwort^^
Nur weiß ich nicht, wie ich es richtig umsetzen soll... T_T

Hab jetzt mal den "li a:link" als Block-Element gekennzeichnet. Jetzt sind die Buttons auch klickbar,
allerdings ist nun ein anderes Problem aufgetaucht:
- wenn ich über die Buttons geh, flimmern die und erscheinen viel weiter unten (der Rollover funktioniert aber :D)

Zitat

Am besten mit den Links (nicht mit den Listenpunkten) verknüpft:
Durch Voranstellung eines li erreichst du dass nur Links in Listenpunkten angesprochen werden, kann man aber auch über die navi ID lösen

Versteh ich nicht ganz, sorry. :oops:

Ich hab unten noch die Neuerungen von der obrigen .css eingefügt.^^

Code

#navi a:link {
    display: block;
    color:#ffffff;
    text-decoration:none;
}




#navi li {
    list-style:none;             
    float:left;                    
    width: 82px;
    height: 27px;
}




#navi li a:link {
    display: block;
    list-style:none;              
    float:left;                     
    background:url(bilder/navtab.png) no-repeat;       
    border-top:1px #c5f3c6;     
    border-left:1px #c5f3c6;  
    border-bottom:1px #47a948;    
    border-right:1px #47a948;   
    padding-top:8px;               
    padding-bottom:8px;             
}




#navi li a:hover {
    background: url(bilder/navtab-rollover.png) no-repeat;        
    border-top:1px #c5f3c6;    
    border-left:1px #c5f3c6;  
    border-bottom:1px #47a948;   
    border-right:1px #47a948;   
    padding-top:8px;               
    padding-bottom:8px;             
}

Alles anzeigen

LG,
Lunar

LunarBugs · 4. März 2010

uff, endlich klappts....
Das Problem: Beim a:hover bekam der immer die marge-informationen von oben also:
-> einfach marge-top: 0px; marge-left: 0px;
Jetzt klappts perfekt :D, vielen Dank Laura^^

Noch was anderes... wie sorge ich dafür, dass die aktuelle Seite in der Navigation anders dargestellt wird? In der .htm-Datei siehts wahrscheinlich dann so aus:

EDIT: Auch gelöst.^^
Danke Laura, dein Beispiel hat mir echt geholfen
Habs jetzt über zwei verschiedene <div id="navi(-active)"> geschafft und da jetzt meine Navigation fertig ist, kommen (hoffentlich) fürs erste keine Fragen mehr...:roll:

.htm

Code

<div id="navi-active" class="navi-active">
    <ul>
        <li>
            <a href="index.htm">Home</a>
        </li>
    </ul>
</div>




<div id="navi" class="navi">
    <ul>
        <li>
.....

Alles anzeigen

.css

Code

...
#navi-active li a:link {
     background: url(bilder/navtab-active.png) no-repeat; 
}
...

LG
Lunar

[Gelöst] Navigation Problem

Jetzt mitmachen!

Teilen