5568 sujets

Sémantique web et HTML

Justification de blocs

Bonjour,
je cherche a "transformer" le code html suivant pour l'inclure en tant que <div> dans ma css. 


<table width="100%" cellspacing="0" cellpadding="5" border="0" bgcolor="#333333">
  <tr>
    <td>&nbsp;</td>
    <td width="750" valignÇ="top"> ICI INCLUDE DE MON SITE</td>
    <td>&nbsp;</td>
  </tr>
</table>


Il s'agit d'optenir une cellule de 750px de large, qui se justifie automatiquement au centre de la page. Voir http://www.catalytic-chamber.com pour l'exemple.

Comment obtenir cela ?
Comment ensuite positionner d'autres objets par rapport a la cellule centrale (et non pas le bord haud gauche de la fenêtre) ?

Merci de votre aide Smiley smile
Modifié le 19 Oct 2004 - 13:20
Administrateur
Pour commencer, je déplace en salle HTML / XHTML car il me semble qu'il n'y a pas de rapport avec XML.

Je ne suis pas sûr d'avoir compris : tu veux simplement avoir un bloc centré dans la page ?
Dans ce cas tu as un lien Tutoriels en haut, il va te mener vers un tutoriel "centrer les éléments en CSS" Smiley cligne
Pour expliquer ce que je veux, voici ci-dessous un contre exemple:

Dans ce code c'est la zone centrale qui se justifie. Moi ce que je veux c'est que #left et #right soient de taille variable et que .center, fixé a 750px de large, restent au centre.

ma question ensuite est comment justifier d'autres éléments par rapport a cette zone centrale, sachant que son point d'origine est amené a bouger.

Je vais jeter un coup d'oeil au turoriels, merci de ton aide.





--------------------------------
LE CONTRE EXEMPLE:



<?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"> 
<!--created by: RCN, 2003-->
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <title>CSS positioning - Absolute positions
  </title>

  <style type="text/css" xml:space="preserve">
   
   /* Center boxes. Can be used more than once. Therefore we have a class here */
   /* margin h d b g = haut, droite, bas, gauche */

#top {
   position: relative;
   margin: 20px 20px 0px 20px;
   border: 5px solid #ccc;
   width: auto;
   padding: 10px;
   background: #666;
   height: 80px;
   }

#left {
   position: absolute;
   left:0px;
   margin:20px;
   top:120px;
   width:120px;
   border:1px solid #000;
   padding: 5px;
   }
 
#right {
   position: absolute;
   right:0px;
   margin:20px;
   top:120px;
   width:120px;
   border:1px solid #000;
   padding: 5px;
   }


.center {
   position: relative;
   background:#fff000;
   width: auto;
   min-width: 200px;
   margin:10px 160px 10px 160px;
   border:1px dashed #000;
   padding: 10px;
   }

    </style>
 </head>

 <body>
  <div id="top">
   <h1>CSS positioning - 3 Column Layout</h1>
  </div>

  <div class="center">
   Voici un contenu. 
     <br />
    Voici un contenu. 
    <br />
    Voici un contenu. 
    <br />
    Voici un contenu. 
    <br />
    Voici un contenu. 
    <br />
    Voici un contenu. 
    <br />
    Voici un contenu. 
    <br />
    Voici un contenu. 

 </div>

  <div class="center">

   <p>
    Retour à <a href="boxing4.html">boxing4.html</a>
   </p>
   
   <hr />
   DKS nov 2003 -
   <a href="http://validator.w3.org/check/referer">XHTML validation</a> -
   <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS validation</a>

  </div>
  
  <div id="left">
   Par exemple menu à gauche.
   Par exemple menu à gauche.
  </div>
  
  <div id="right">
   Par exemple votre plat favori à droite.
   Par exemple votre plat favori à droite.
  </div>
  
  
 </body>
</html>
Administrateur
Je ne suis toujours pas sûr d'avoir compris exactement.

Essaye ça :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin:0;
padding:0;
text-align: center
}

#gauche {
background : blue;
position: absolute;
top: 0;
left: 0;
width: 10%;
height: 200px;
}
#droite {
background : red;
position: absolute;
top: 0;
right: 0;
width: 10%;
height: 200px;
}
#centre {
margin: 0 auto 0 auto;
width: 750px;
background: yellow;
text-align: left;
}
-->
</style>
</head>
<body>
<div id="gauche">gauche</div>
<div id="droite">droite</div>
<div id="centre">centre</div>
</body>
</html>


Le problème, c'est qu'avec des côtés fluides (en %) et un centre fixe (en px), ça posera des soucis pour les petites résolutions
Sujet clos
Aller à