Navigation in CSS

Zip · 15. Dezember 2007

Hi@all,

Ich hab eine Navigation wie in dem Navigationsbeispiel gemacht, jetzt habe ich probiert beim Maus auf den Link zienehn den dicken, orangen Rand links dünner werden zu lassen. Das hat aber bis jetzt nicht wirklich funktioniert. Wie krieg ich das hin?

danke jetzt schon mal für die Hilfe (am besten mit Code-Beispiel)

P.S. ich weiß einem geschenkten Gaul schaut man nicht ins Maul aber da ich noch relativer neuling bin bitte möglichst leicht verständlich geschrieben posten. thx :oops:

Foster · 15. Dezember 2007

Kannst du gleich mal noch deinen Quellcode posten und den Link, wo das im originalen Steht, also das Beispiel, nachdem du das gemacht hast. Ich kann das grade nich finden...

Sebkin · 16. Dezember 2007

Ich glaube diese Navigation ist gemeint:

<a class="postlink" href="http://www.html-seminar.de/steuerung_per_css.htm">http://www.html-seminar.de/steuerung_per_css.htm</a>

Die Borderpixelangabe (lol, was für ein Wort) müsste hier geändert werden um den Rahmen dünner zu machen...

Ich habe leider nicht genug Zeit um Genaueres zu posten, vielleicht schreibe ich später noch die genaue Erklärung...

€dit:
Die Navigation ist gar kein Bild ... das täuscht wegen dem Hintergrund :lol:
Quelle ist aber angegeben, sollte also zu finden sein
Foster: habs schon korrigiert

mfg nikbes

Zip · 18. Dezember 2007

ja das hab ich gemeint ( <a class="postlink" href="http://www.html-seminar.de/steuerung_per_css.htm">http://www.html-seminar.de/steuerung_per_css.htm</a> ). ich musste mich bloß beeilen und hab die seite auch nich mehr auf die schnelle gefunden.

ich hab es erstmal so probiert:

#navi li a:hover { text-decoration:none; border-left:15px orange solid;}

vorher war der rand links bei 25 px. ansonsten entspricht alles dem dem beispiel auf der website...

das problem war dann bloß dass innerhalb des rahmens ein weiterer rahmen links von dem text erschien (mit eben 15px). an dem außenrand änderte sich aber nichts...

probiert habe ich mit opera, firefox und IE (bei dem allerdings garnichts passierte)

danke übrigens für die schnelle antwort :o

Foster · 18. Dezember 2007

Du musst verzeihen aber in so ein Problem, von dem man nur geschrieben liest, kann man sich nur sehr schwer hineinversetzen.
Könntest du daher in Bildern fassen (ich bin ein eher visueller Typ ^^), was du vorhast und was bei deiner Umsetzung raus kam (bzw kein Bild, wenn nix rauskam/sich nix geändert hat). Und am besten noch den ganzen Quellcode des betreffenden Elements.

Das würde die Sache (für mich wenigstens) um einiges erleichtern

Zip · 19. Dezember 2007

Und hier der Quelltext (aus design.css) der durch das ganze Experimentieren ziemlich "schmutzig" ist:

Code

<style  type="text/css">  
<!--  
#navi  {        
  float:left;
  width:200px;
  height:600px;
  margin-top:1px;
  margin-bottom:10px;
  margin-left:20px;
  margin-right:10px;
  background-color:#FFFF99;
} 




#navi ul  {
  list-style:none;
  }
#navi li {
  background-color:silver;
  border-top:1px black solid;
  border-bottom:1px red solid;
  border-right:2px blue solid;
  border-left:25px orange solid;
  margin-top:10px;
  margin-right:5px;
  padding-top:3px;
  padding-bottom:3px;
  padding-left:8px;
  padding-right:8px;
}




#navi li a:hover { text-decoration:none; border-left:15px orange solid;}
-->  
</style>




<div  id="navi"> 
   <ul> 
     <li><a  href="index.htm">Startseite</a></li> 
     <li><a  href="ueber-mich.htm">Über  mich</a></li> 
     <li><a  href="termine.htm">Termine</a></li> 
     <li><a  href="impressum.htm">Impressum</a></li> 
   </ul> 
</div>

Alles anzeigen

Irgendwie krieg ich das mit dem Bild einfügen nicht richtig hin... Jedenfalls sollte nur der Rand Links dünner werden anstatt in den Rahmen einen weiteren kleineren Links einzufügen...

Navigation in CSS

Jetzt mitmachen!

Teilen