28217 sujets

CSS et mise en forme, CSS3

Alignements de div.....

Bonjour,

Je n'irai pas par 4 chemins : j'ai besoin d'un coup de main pour aligner mon site :
En bleu : les div qui ont des positions fixes
En rose : les div qui ont des positions flottantes à l'intérieur du tableau rouge
Lignes rouges : ce sont les cellules d'un tableau

upload/455-vue1.jpg

Mon but : supprimer complètement ce tableau rouge (mais en gardant l'alignement des div roses) et rendre les div bleues flottantes, de telle sorte que chacune pousse l'autre vers le bas. Ainsi je peux aisément insérer un nouveau div entre 2 bleues si besoin est, etc.

Comment jouer avec ces divs pour garder le même alignement tout en les rendant flottantes, et ceci sans utiliser de tableau ?? Smiley sweatdrop

Demandez moi si vous avez besoin du code ou si mon message n'est pas clair...
Modifié le 28 Dec 2004 - 12:23
Grosse commande !

Tu peux nous montrer ce que tu as essayé pour réaliser ce que tu demandes ?
Parce que tu as essayé, non ?
Hello,

Donc mon image avec les div fixes et flottants est ce que j'ai réalisé jusqu'à maintenant. Le problème c'est que j'utilise un tableau (lignes rouges) au milieu de la page pour poser les div du centre. D'autre part, je suis obligé de donner des positions fixes aux div bleus pour les aligner à gauche et à droite, ce qui est plutôt restrictif.

J'ai pensé à faire un grand div container, mais comment "dire" aux calques où se placer ? Comment dire que calque A doit aller sous le B, et que le C doit revenir à la ligne ? etc.
Ça peux commencer avec une mise en page trois colonnes :

#gauche { 
   float: left; 
   width: value; 
}
#droite { 
   float: right; 
   width: value; 
}
#centre { 
   margin-right: value; /* largeur de la colonne droite */
   margin-left: value; /* largeur de la colonne gauche */
}



<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>
<hr />

Et pour la partie centrale :

div.centregauche { 
   float: left; 
   width: 50%; 
}
div.centredroite { 
}
hr { 
   clear: both; 
   height: 1px; 
   padding: 0; 
   margin: 0; 
   display: none; 
}



<div id="centre">
 <div class="centregauche"></div>
 <div class="centredroite"></div>
 <hr />
 <div></div>
 <div class="centregauche"></div>
 <div class="centredroite"></div>
 <hr />
</div>

Voilà ! À toi d'adapter à ton goût. Smiley cligne

Testé sous Firefox, IE, Mozilla, Netscape et Opera.

upload/196-3cols.jpg
Modifié le 29 Dec 2004 - 10:22
Tiens, au risque de surprendre ceux qui m'ont entendu souvent "défendre" les flottants... il me semble qu'ici, on gagne peu à faire passer les deux colonnes #gauche et #droite en flottant (Etant donné qu'il n'y a pas de problème de pied de page occupant toute la largeur disponible).

En effet, les flottants imposent dans ce cas un ordre (X)HTML contraignant (#gauche > #centre > #droite ) qui n'est pas forcément celui souhaité par l'auteur. En particulier s'il souhaite placer son contenu principal (#centre a priori) en tête de contenu.

A l'inverse, le positionnement absolu de #gauche et de #droite donne toute liberté quant à l'ordre dans lequel #gauche, #centre et #droite se presentent dans le code.

(PS: En fait, il est tout à fait possible d'utiliser les flottants avec comme ordre HTML centre > gauche > droite, en ajoutant une dose de position relative. Mais le détail est un peu tordu Smiley cligne Voir http://test.blog-and-blues.org/3_colonnes_float/ pour un exemple)
Laurent Denis a écrit :

En effet, les flottants imposent dans ce cas un ordre (X)HTML contraignant (#gauche > #centre > #droite ) qui n'est pas forcément celui souhaité par l'auteur. En particulier s'il souhaite placer son contenu principal (#centre a priori) en tête de contenu.

En réalité, c'est (#gauche > #droite> #centre ) Smiley cligne

Laurent Denis a écrit :

A l'inverse, le positionnement absolu de #gauche et de #droite donne toute liberté quant à l'ordre dans lequel #gauche, #centre et #droite se presentent dans le code.

Je cherchais justement dans quel contexte le positionnement absolu était vraiment utile pour une mise en page. Smiley lol
=> changer l'ordre de présentation du flux courant dans un navigateur graphique.

Me trompe-je ?
Modifié le 29 Dec 2004 - 11:21
Humpf... Si je vous dis que je viens de passer une nuit blanche, vous me pardonnez la bourde ?

Sauf si je suis encore en train d'en commettre une, le fond de la question reste la possibilité de commencer son contenu HTML par #centre, non ?
Donc on peux supposer la variante suivante :

#gauche { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: value; 
}
#droite { 
   position: absolute; 
   top: 0; 
   right: 0; 
   width: value; 
}
#centre { 
   margin-right: value; /* largeur de la colonne droite */
   margin-left: value; /* largeur de la colonne gauche */
}

Et les possibilités suivantes dans le (X)HTML

<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>

<div id="gauche"></div>
<div id="centre"></div>
<div id="droite"></div>

<div id="droite"></div>
<div id="gauche"></div>
<div id="centre"></div>

<div id="droite"></div>
<div id="centre"></div>
<div id="gauche"></div>

<div id="centre"></div>
<div id="gauche"></div>
<div id="droite"></div>

<div id="centre"></div>
<div id="droite"></div>
<div id="gauche"></div>


<edit>
Dans ce cas, <hr /> devient inutile à la suite de ces trois <div>.
Il reste cependant nécessaire à l'intérieur de <div id="centre">.
</edit>
Modifié le 29 Dec 2004 - 11:50
Désolé d'avoir mis tant de temps à répondre, mais j'étais absent cette dernière semaine.

J'ai essayé la technique de Stephan 
#gauche { 
   float: left; 
   width: value; 
}
#droite { 
   float: right; 
   width: value; 
}
#centre { 
   margin-right: value; /* largeur de la colonne droite */
   margin-left: value; /* largeur de la colonne gauche */
}

Mais le problème c'est si j'ai plusieurs calques à gauche, ceux-ci ne se mettent pas les uns sous les autres... Comment faire ?
Ta page en ligne ou quelques code nous aiderais certainement plus à saisir ton problème. Sinon, si tu utilises des listes de liens, pas besoin de "calques", les listes se positionnant une par dessus l'autre par défault.


<div id="gauche">
 <h4>Titre</h4>
 <ul>
  <li><a href="#">Lien bidon</a></li>
  <li><a href="#">Lien bidon</a></li>
  <li><a href="#">Lien bidon</a></li>
  <li><a href="#">Lien bidon</a></li>
 </ul>
 <h4>Titre</h4>
 <ul>
  <li><a href="#">Lien bidon</a></li>
  <li><a href="#">Lien bidon</a></li>
  <li><a href="#">Lien bidon</a></li>
  <li><a href="#">Lien bidon</a></li>
 </ul>
</div>

Modifié le 06 Jan 2005 - 15:10
Je suis désolé, mais je ne saisi pas ton problème... Smiley confus

Pour les besoins de la cause, tu pourrais fusionner tes feuilles de styles ?

<!--
@import url(css/styles.css);
@import url(css/div.css);
@import url(css/a.css);
@import url(css/body.css);
//-->

Modifié le 06 Jan 2005 - 15:44
Sujet clos
Aller à