Navigation Klickbarer bereich

[Sansire]

Hallo

So ist die Navigation momentan:
IST

Man merkt dass wenn man mit der Maus über dem Text geht, der Breich über dem Text auch Klickbar ist (mit padding-top gelöst). Bisher keni Problem.
Da aber die Texte verschieden lang sind, und ich bei den Links ein padding-right mache um auch der rest der Box klickbar zu machen, ist der klickbare Bereich rechts des Textes zwar klickbar, aber alle eine gewisse Pixelzahl veschoben wenn ich dies über die externe CSS Datei mache. Je nach dem wieviel Pixel ich dabei eingebe, wird bei jedem link der Klickbare Bereich entweder nicht vollständig ausgefüllt, oder der Bereich überlappt sich weiter als die Navigation selbst.

Natürlich könnte ich mit dem Editor einzeln überall eine andere padding-right Pixelanzahl eingeben was aber nicht mein Ziel ist, da ich mit Dreamveawer arbeite und nicht in der Navigation zugreifen will/kann. Ich möchte es wenn möglich ist über die externe CSS Datei lösen.

In diesem Link wird aufgezeigt wie ich ein padding right in der externen CSS datei für die Navigationslinks von 100px eingegeben habe. Zwar wurde das Ziel erreicht dass rechts der Texte die Bereiche anklickbar werden, aber eben es zieht sich weiter, und schlliesst unterschiedlich weit ab, da die Texte auch unterschieglich lang sind.
SOLL. (aber noch padding problem

 

[_Thor_]

Gib den Links display: block, dann füllen sie das gesamte Listenelement aus.

Dein <div id="navig"> muss ein <ul id="navig"> sein, denn ein <div> hat keine <li>.

 

[Sansire]

Hier noch den CSS Code für "IST"

body   {
 background-color: #B1B1B1;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 75%;
 margin-top: 0px;
}
#navig { background:#EAEAEA;
   float:left;
   width:100px;
   padding-left:20px;
   padding-top:50px;
  }
#navig a { color:#000;
    text-decoration:none;
    padding-top:10px;
   }
#navig a:hover { border-left:solid;
     border-width:thin;
    } 
#navig li { list-style:none;
    padding-top:10px;
    border-bottom-style:solid;
    border-width:1px;;
    border-right-style:solid;
   } 
#navig li:hover { border-width:1px;;
     border-right-style:solid;
     border-right-color:red;
     background-color:#FFFFF9;
    }
#activenavig { border-right-color:red; 
    }

 

[Sansire]

Gib den Links display: block, dann füllen sie das gesamte Listenelement aus.

Dein <div id="navig"> muss ein <ul id="navig"> sein, denn ein <div> hat keine <li>.

ha das ist ja ganz genial, so einfach geht das

danke!