[Résolu] Positionnement de 4 blocs

Bonjour,

J'ai actuellement 5 blocs alors que je n'en aurais besoin que de 4
En faite, ce que je veux, c'est positionner 2 blocs à gauche, et les 2 autres à droites. J'y suis arrivé en maintenant les 2 blocs à gauche dans un conteneur en float : left ... Seulement, on m'a dit que je n'avais pas besoin de conteneur sans me préciser comment faire.

Quelqu'un a la solution ?
Merci d'avance.
Modifié par azix58 (04 Mar 2005 - 18:29)

Bonjour,

Pourrais-tu préciser ton problème avec le code qui te souci et mieux, un exemple en ligne de ce que tu as déjà réalisé.

ça me semblait clair, mais voici un exemple concret

div#menus
{
 float : left;
 border-width : 0px;
 background-color : transparent;
}

<div id="menus">

<div class="titre_menu">Menu</div>

<ul>
<li>Lien</li>
<li>Lien</li>
</ul>

</div>

<div class="contenu_titre">Bienvenue !</div>
<div class="contenu">Bienvenue sur [...] Je vous souhaite une bonne visite !</div></div>

ce qu'on m'a dit, c'est que mon conteneur menus était inutile, c'est-à-dire qu'on pouvait l'enlever et aligner convenablement les blocs menu_titre et ul à gauche et les 2 divisions de contenues à droite.

NOTE : j'ai un petit bug sur ce forum, entre les balises <code> et </code>, mon dernier </div>, je ne le vois pas, j'ai donc ajouter deux </div> et maintenant je ne vois que </di (XP - IE6 SP2)

merci de quand même me répondre sans simplement regarder la petite note que je laisse
Modifié par azix58 (04 Mar 2005 - 17:32)

Plutôt que d'utiliser un menu class=titre" tu devrais simple un titre hn qui est fait pour cela.
Pour supprimer la div menu qui contient ton ul, tu peux donner les propriétés de ton id menu à ton ul qui est un élément de type block tout comme div.

ul#menu{
propriété:valeur;
propriété:valeur;
propriété:valeur;}

ul#menu li{
propriété:valeur;}

<h2>Titre</h2>
<ul id="menu">
   <li>item</li>
   <li>item</li>
</ul>

oui, mais vous n'avez pas compris mon problème
le problème, c'est le positionnement

je veux que le titre du menu et le menu soit à gauche, et le titre du contenu et le contenu à droite
Or, avec ces 4 blocs, je ne suis pas capable de le faire (je ne sais pas si c'est possible mais personne ne m'a encore répondu à ce niveau)

donc, j'ai mis mon titre et mes liens dans un div conteneur, que je place à gauche à l'aide de float, et les autres blocs de contenus après, à droite....

pour enlever le conteneur je dois réussir à placer mes 2 blocs (h2 et ul) à gauche, et les deux autres (h2 et p) à droite... mais je ne sais pas comment

merci de m'aider..

J'avais rien compris
Tu peux alors tester cela:

#menu{
  width:180px;
  float:left;
  background:#eee;
}
#contenu{
  margin-left:190px;
  background:#eee;
}
p#footer{
  clear:both;
  background:#eee;
  margin-top:10px;
}

<div id="menu">
  <h2>Titre</h2>
  <ul>
     <li>item</li>
     <li>item</li>
  </ul>
</div>
<div id="contenu">
  <h2>Titre contenu</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas auctor tellus in velit. Aenean fringilla, arcu eu vehicula feugiat, libero metus elementum orci, ut consectetuer mauris turpis sit amet pede.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas auctor tellus in velit. Aenean fringilla, arcu eu vehicula feugiat, libero metus elementum orci, ut consectetuer mauris turpis sit amet pede.</p>
</div>
<p id="footer">blablabla</p>

ouais, je sais que ça marche, c'est ce que je fais
seulement, il faut utiliser des blocs conteneurs, je croyais que c'était possible sans blocs conteneurs ;o)

Possible en mettant un margin-left à tous les éléments (h2 et p dans l'exemple) qui constituent le contenu. Mais c'est plus simple d'utiliser un conteneur pour lequel tu ne déclares qu'une fois cette propriété.

d'accord...
j'ai mis mes blocs de contenus dans un conteneur aussi, afin que tout soit bien à droite et que rien aille en-dessous du menu... je vais peut-être changer ça si je peux obtenir de quoi de satisfaisant en continuant en dessous du menu

mais bon, ça fait 6 blocs pour 4, mais je crois pas que cela affecte réellement le poids d'la page