alaindeloin69 | hello, j'ai voulu voir mon niveau en css donc j'ai crée ce menu shematisé :
voici mon code :
Code :
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>Untitled</title>
- <style type="text/css">
- <!--
- body {
- margin: 10px 3%;
- }
- #header {
- background-color: #3333ff;
- height: 100px;
- }
- #menuhaut {
- margin: 0px;
- height: 20px;
- background-color: #0066ff;
- }
- #menuhaut li {
- float: right;
- list-style-type: none;
- text-indent: 30px;
- }
- #menuhaut li a {
- color: gray;
- font size: 1.2em;
- }
- #menuhaut li a:hover {
- color: black;
- text-decoration: none;
- }
- #gauche {
- position: absolute;
- left: 1%px;
- width: 300px;
- background: #6633cc;
- text-align: center;
- }
- #gauche li {
- list-style-type: none;
- margin: 0 0px;
- }
- #gauche li a {
- color: gray;
- }
- #gauche li a:hover {
- color: black;
- text-decoration: none;
- }
- #centre {
- background: #993300;
- margin-left: 300px;
- }
- -->
- </style>
- </head>
- <body>
- <div id="header">
- logo du site, image, header ....
- </div>
- <div id="haut">
- <ul id="menuhaut">
- <li><a href="#">lien n°1</a></li>
- <li><a href="#">lien n°2</a></li>
- <li><a href="#">lien n°3</a></li>
- <li><a href="#">lien n°4</a></li>
- <li><a href="#">lien n°5</a></li>
- </ul>
- </div>
- <div id="gauche">
- <ul>
- <li><a href="#">lien n°1.1</a></li>
- <li><a href="#">lien n°2.1</a></li>
- <li><a href="#">lien n°3.1</a></li>
- <li><a href="#">lien n°4.1</a></li>
- <li><a href="#">lien n°5.1</a></li>
- </ul>
- </div>
- <div id="centre">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti.
- Cras leo nibh, aliquet nec, interdum et, consequat sed, nulla. Praesent
- nec quam quis augue auctor pulvinar. Nunc vehicula wisi et mi. Quisque ultricies
- volutpat metus. Nulla eu erat sed mauris euismod tempor. Aliquam sit amet quam
- vitae massa dignissim fringilla. Nam pharetra lobortis velit. Donec scelerisque,
- nisl a molestie vulputate, urna lectus rhoncus ante, in congue lacus erat ac
- urna. Duis quam. Phasellus diam eros, ullamcorper dictum, lacinia in, accumsan
- vel, felis. Ut at sapien. Class aptent taciti sociosqu ad litora torquent per
- conubia nostra, per inceptos hymenaeos.</p>
- <p>Sed gravida leo sed quam. Aenean vitae pede a felis semper vestibulum.
- Mauris non ante. Pellentesque suscipit lectus at erat. Integer et risus id tortor
- pellentesque tempus. Aliquam dui nulla, suscipit nec, consectetuer a, fringilla
- sit amet, luctus at, purus. Integer nec arcu ac dui placerat rutrum. Maecenas
- dignissim, justo nec rhoncus dignissim, nulla felis vehicula massa, in commodo
- tempus nec, erat
- </div>
- </div>
- </body>
- </html>
|
mais le prob il est la, sous mozilla firefox
et sous IE sa foire
pk ?? comment faire pour regler le prob ???? ---------------
mon site perso, allez visiter
|