Waagerechte Navigation CSS

Waagerechte Navigation CSS

Ich hab schon viele Arten von Navigationen gesehen – doch die Waagrechte Navigation (Horizontale Navigation) ist sicher ein Fixer Bestandteil fast jeder Seite! Darum hab ich diese mal ein wenig angeschaut! Hier meine Erfahrungen dazu und wie ich diese meist einbaue!  Zuerst mal die Struktur in HTML:\r\n<div id=“navinnen“>\r\n<ul>\r\n<li><a href=“#“>Navigation 1</a></li>\r\n<li><a href=“#“>Navigation 2</a></li>\r\n<li><a href=“#“>Navigation 3</a></li>\r\n<li><a href=“#“>Navigation 4</a></li>\r\n</ul>\r\n</div>\r\n\r\nIm CSS Bereich kommt dieser Block hinein!\r\n\r\n#navinnen {\r\nfloat:left;\r\nwidth:930px;\r\nmargin-left:10px;\r\nmargin-top:10px;\r\n}\r\n#navinnen ul {\r\nlist-style:none;\r\n}\r\n#navinnen ul li {\r\nfloat:left;\r\nwidth:auto;\r\n}\r\n\r\n#navinnen ul li a {\r\ndisplay:block;\r\npadding:0px 10px;\r\ntext-decoration:none;\r\ncolor:#333;\r\nfont-size:14px;\r\nline-height:24px;\r\nborder-right:1px #333 solid;\r\ntext-transform:uppercase;\r\n}\r\n\r\nJetzt kann man sich da noch etwas spielen mit last-child – first-child das ich auch schon kurz angesprochen habe – und bitte auch die Kommentare dazu lesen! Leider kommt der IE6 da nicht damit zurecht!

Schreiben Sie einen Kommentar click to read more

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.