centrage html/css galère...

centrage html/css galère... - HTML/CSS - Programmation

Marsh Posté le 14-01-2008 à 15:54:38    

Bonjour à tous, je ne suis bien sûr pas le premier à galérer sur le sujet mais, en plus je suis trés basique en se qui concerne la mise en oeuvre des codes de langage.Ceci dit, voici ma question en èspérant que vous ne serez pas lassé d'y répondre.Ci-après, un exemple de structure de base que j' aimerais utiliser dans mon site(code complet).
je souhaiterais, en fait, centrer cette mise en page quelque soit la résolution.celle qui est adaptée actuellement est (1024X768). Aprés modif du code, je souhaiterais donc avoir le calque 1 centré par rapport à l'écran (quelque soit la résolution),et pour les autres calque, leur disposition par rapport au calque 1 serai maintenue. mes divers essais d'incersion de lignes de codes proposées sur le net n'ont jamais aboutis car je ne parviens jamais à les placer ou il faut. C'est pourquoi je vous transmet le code complet afin SVP d' y apporter votre sympathique correction. Merci d'avance pour votre coopération.
 
¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
 
<body>
<div id="Layer1" style="position:absolute; left:10px; top:50px; width:980px; height:500px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000;">  
  <div id="Layer1.1" style="position:absolute; left:681px; top:109px; width:154px; height:58px; z-index:5"><font size="40">Layer  
    1</font></div>  
  <div id="Layer2" style="position:relative; left:0px; top:0px; width:500px; height:275px; z-index:2; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000;">  
    <div id="Layer2.1" style="position:absolute; left:161px; top:109px; width:154px; height:58px; z-index:5"><font size="40">Layer  
      2 </font></div>
  </div>
  <div id="Layer3" style="position:relative; left:500px; top:0px; width:480px; height:224px; z-index:3; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;">  
    <div id="Layer3.1" style="position:absolute; left:181px; top:109px; width:154px; height:58px; z-index:5">  
      <p><font size="40">Layer 3</font></p>
    </div>
  </div>
</div>
</body>
</html>
 
¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤

Reply

Marsh Posté le 14-01-2008 à 15:54:38   

Reply

Marsh Posté le 14-01-2008 à 16:26:11    

Simple, il suffit de faire un container... :)
 
Pour plus d'info, n'hesite pas a regarder le site alsacreations:
http://css.alsacreations.com/Faire [...] web-en-CSS
 
++  ;)
 
ps: ca serait bien si tu faisais un feuille de CSS separee c'est plus simple a lire... la je trouve ca un peu bordelique...  :lol:


Message édité par And Garfunkel le 14-01-2008 à 16:28:04
Reply

Marsh Posté le 15-01-2008 à 14:49:21    


Merci pour ta réponse And Garfunkel mais j' ai déjà, comme je le notifiais dans mon premier message, visité des sites offrant des solutions, dont Alsacréation, et j' ai d'ailleur essayè d'appliquer les lignes de code proposées mais comme je le disais je suis vraiment un débutant et ne parviens pas à bien positionner ces lignes ou il faut. je travaille(si on peu dire :D )avec Dreamweaver et même si je m' aventure un peu dans le mode code, surtout on ne touche à rien :non: .Quand tu parles de feuille css séparée, comment cela se traduit-il dans le code car dans dreamweaver il n'y a qu' un seul onglet code donc une seule page :??: .
un truc en passant, peux tu me dire pourquoi dans le code donné dans le précédant message, le Layer 3 positionné en top 0 (relative)par rapport au layer 1 est bien visible en mode edition à cette position alors qu'il se retrouve à environ top 275px en apercu navigateur :??: Merci pour ton aide ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed