orion14
Membre récent

Hors-Ligne
Messages: 2

|
Bonjour à tous,
je cherche à refaire le design de mon site en appliquant un style extensible de préférence cette fois-ci. Seulement voilà, dans le même temps, je souhaite appliquer un style centré verticalement de ma div principale, appelée "interface" ici. Si après quelques conseils, j'arrive à réaliser ce dernier effet, j'ai des soucis avec les éléments que je souhaite ajouter. En effet, j'aimerais superposer des div, mais lorsque je change de définition, la div superposée change de place et je n'arrive vraiment pas à trouver pourquoi. Y-a t-il des incompatibilités entre faire un site extensible-centrage vertical-superposition, qui pourraient poser problème ?
J'ai déjà pu réaliser de sites fixes et extensibles, avec superpositions, sans problème, mais sur depuis que j'ai choisi l'option du centrage vertical, ca ne passe plus. Je me doute encore avoir peut-être des erreurs dans le code mais j'ai déjà essayé plusieurs choses sans succès...Merci pour votre aide.
<body> <div id="bloc"> <table> <tr> <td><a href="#"><img src="menu_actualite.png" alt="actualite" /></a></td> <td><a href="#"><img src="menu_photoshop.png" alt="photoshop" /></a></td> <td><a href="#"><img src="menu_illustrator.png" alt="illustrator" /></a></td> <td><a href="#"><img src="menu_indesign.png" alt="indesign" /></a></td> <td><a href="#"><img src="menu_dessin.png" alt="dessin" /></a></td> <td><a href="#"><img src="menu_profil.png" alt="profil" /></a></td> <td><a href="#"><img src="menu_contact.png" alt="contact" /></a></td> </tr> </table> <div id="conteneur"><img src="interface.png" alt="#" /> <div id="engphoto"><img src="eng_photoshop.png" alt="#" /></div> </div> </div> <div id="pied">Pied</div> </body>
html { display :table; height:100%; width:100%; }
body { display:table-cell; vertical-align:middle; text-align:center; background:url(fond.jpg); } #bloc { border:0; width:100%; margin:auto; } #conteneur { border:0; width:80%; margin:auto; position:relative; } #pied { border:solid 1px #000000; background-color:#FF9900; width :80%; margin:auto; margin-top:250px; text-align:left; }
table { border:0; width:80%; margin:auto; margin-bottom:10px; text-align:center; }
img { border: none; width:100%; }
#engphoto { border:0; margin-left:600px; margin-top:-330px; width:10%; }
|
| |