body { font-family:Verdana, Arial, sans-serif; font-size:1em; margin:0; padding:0; padding-top:4em; /* pour réserver la place du menu fixe en haut */ background-color:#336699; } .menufixe { position:absolute; /* Position absolue pour MSIE */ top:0; left:1%; width:98%; margin:0; line-height:3em; background-color: #ffecce; border:3px solid #000; } html>body .menufixe { position:fixed; } /* Position fixe pour les autres que MSIE */ .hormenu { list-style-type:none; width:500px; margin:0 auto; padding:0; text-align:center; } .hormenu li { float:left; border-right:40px solid transparent; } .contenu { height:auto; margin:0 2em; padding:2em; background-color:#f5f8fc; border:3px solid #000; }
.... <body> <div class="menufixe"> <ul class="hormenu"> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> </div> <div class="contenu"> ..... ..... </div> </body> ....
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.