Positionner une div en fonction d'une autre avec des ancres? en CSS ?

Bonjour,

je construit un site en html, comprenant un container central avec à l'intérieur 3 colonnes/"div" (gauche-centre-droite).
A l'intérieur des colonnes gauche et droite, il y a d'autres div comprenant des infos annexes par rapport aux infos centrales.
j'aimerais que ces div d'infos annexes soient situées au même niveau que l'info centrale qu'elle concerne.
Pour l'instant j'utilise des valeurs de margin top pour les placer.

J'aimerais savoir si il y d'autre technique pour placer ces différentes "div" gauche et droite, par exemple avec des ancres?

merci pour vos réponses.

le code html:

<div id="container"> <!-- cette div entoure les 3 colonnes sidebar1 - centre - sidebar2 -->
 
  <div id="sidebar1">
  <div id="comment1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan nunc quis justo pharetra tincidunt. Aliquam vitae leo odio. Etiam blandit magna sed nisl volutpat nec pellentesque nulla ornare.</p>
    </div>
  </div> <!-- ferme div sidebar1 -->
 
  <div id="centre">

    <h2>TITRE DE LA PAGE</h2>
    
    <h3>Titre du paragraphe 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan nunc quis justo pharetra tincidunt. Aliquam vitae leo odio. Etiam blandit magna sed nisl volutpat nec pellentesque nulla ornare. Aliquam laoreet dui nec enim tempus varius. Pellentesque suscipit nisi ut purus ultricies consectetur. Quisque molestie velit sed dolor consectetur fermentum. Integer sed faucibus magna. Praesent sit amet eros turpis, et venenatis est. Nulla porttitor porta magna, eu posuere mauris varius a. Fusce dictum tristique est. Curabitur id lacus sapien. Etiam ac enim elit, nec malesuada urna. Integer eleifend, tellus luctus aliquam interdum, nisi orci venenatis nisl, vel vestibulum tellus ligula sed nunc. Sed placerat, mi sed convallis imperdiet, nisi odio vehicula nisl, eu tempor tellus nunc vitae erat. </p>
	
    <h3>titre du paragraphe 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan nunc quis justo pharetra tincidunt. Aliquam vitae leo odio. Etiam blandit magna sed nisl volutpat nec pellentesque nulla ornare. Aliquam laoreet dui nec enim tempus varius. Pellentesque suscipit nisi ut purus ultricies consectetur. Quisque molestie velit sed dolor consectetur fermentum. Integer sed faucibus magna. Praesent sit amet eros turpis, et venenatis est. Nulla porttitor porta magna, eu posuere mauris varius a. Fusce dictum tristique est. Curabitur id lacus sapien. Etiam ac enim elit, nec malesuada urna. Integer eleifend, tellus luctus aliquam interdum, nisi orci venenatis nisl, vel vestibulum tellus ligula sed nunc. Sed placerat, mi sed convallis imperdiet, nisi odio vehicula nisl, eu tempor tellus nunc vitae erat.</p>
	
    <h3>titre du paragraphe 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan nunc quis justo pharetra tincidunt. Aliquam vitae leo odio. Etiam blandit magna sed nisl volutpat nec pellentesque nulla ornare. Aliquam laoreet dui nec enim tempus varius. Pellentesque suscipit nisi ut purus ultricies consectetur. Quisque molestie velit sed dolor consectetur fermentum. Integer sed faucibus magna. Praesent sit amet eros turpis, et venenatis est. Nulla porttitor porta magna, eu posuere mauris varius a. Fusce dictum tristique est. Curabitur id lacus sapien. Etiam ac enim elit, nec malesuada urna. Integer eleifend, tellus luctus aliquam interdum, nisi orci venenatis nisl, vel vestibulum tellus ligula sed nunc. Sed placerat, mi sed convallis imperdiet, nisi odio vehicula nisl, eu tempor tellus nunc vitae erat.</p>

    <h3>titre du paragraphe 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan nunc quis justo pharetra tincidunt. Aliquam vitae leo odio. Etiam blandit magna sed nisl volutpat nec pellentesque nulla ornare. Aliquam laoreet dui nec enim tempus varius. Pellentesque suscipit nisi ut purus ultricies consectetur. Quisque molestie velit sed dolor consectetur fermentum. Integer sed faucibus magna. Praesent sit amet eros turpis, et venenatis est. Nulla porttitor porta magna, eu posuere mauris varius a. Fusce dictum tristique est. Curabitur id lacus sapien. Etiam ac enim elit, nec malesuada urna. Integer eleifend, tellus luctus aliquam interdum, nisi orci venenatis nisl, vel vestibulum tellus ligula sed nunc. Sed placerat, mi sed convallis imperdiet, nisi odio vehicula nisl, eu tempor tellus nunc vitae erat.</p>
  </div>  <!--ferme div centre-->

  
  <div id="sidebar2">
    <div id="info1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan nunc quis justo pharetra tincidunt. Aliquam vitae leo odio. Etiam blandit magna sed nisl volutpat nec pellentesque nulla ornare. Aliquam laoreet dui nec enim tempus varius. Pellentesque suscipit nisi ut purus ultricies consectetur. Quisque molestie velit sed dolor consectetur fermentum.</p>
    </div>
    <div id="info2">
      <p><Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan nunc quis justo pharetra tincidunt. Aliquam vitae leo odio. Etiam blandit magna sed nisl volutpat nec pellentesque nulla ornare. Aliquam laoreet dui nec enim tempus varius. Pellentesque suscipit nisi ut purus ultricies consectetur. Quisque molestie velit sed dolor consectetur fermentum.</p>
    </div>
    <div id="info3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan nunc quis justo pharetra tincidunt. Aliquam vitae leo odio. Etiam blandit magna sed nisl volutpat nec pellentesque nulla ornare. Aliquam laoreet dui nec enim tempus varius. Pellentesque suscipit nisi ut purus ultricies consectetur. Quisque molestie velit sed dolor consectetur fermentum.</p>
    </div>
  </div> <!--ferme sidebar2-->
  
</div><!-- ferme la div "container" -->

le code CSS:

#container {
	overflow: hidden;
	width: 1000px;
}

#sidebar1 {/*style générale de la barre gauche - div "sidebar1" */
	float: left;
	width: 169px;
	padding: 0px;
	margin: 0px;
}
#sidebar1 #comment1
	background-color: #FFF;
	padding: 5px;
	margin-top: 100px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#centre { /* style de la div "centre" */
	width: 640px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	padding-top: 20px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	margin-left: 5px;
	float: left;
}
#sidebar2 { /* style de la div de droite */
	float: right;
	padding: 0px;
	width: 169px;
	margin: 0px;
}

#sidebar2 #info1 {
	padding: 5px;
	margin-top: 200px;
}

#sidebar2 #info2 {
	padding: 5px;
	margin-top: 50px;
		
}
#sidebar2 #info3 {
	padding: 5px;
	margin-top: 50px;
}

En gros, si je veux que la div "comment1" soit au niveau du paragraphe 3 et que la div "info2" soit au niveau du paragraphe 2, la div "info3" au niveau du p4 par exemple, comment faut il faire? Quels sont les procédés? (actuellement je fais avec le margin-top)

et une new question en passant!
j'aimerais que la div "comment1" soit fixe avec un sous menu dedans.
Donc j'enleve le float de la div centre et je lui mets un margin-left de 170px, je mets la div "info1" en position:fixed avec une largeur spécifique et là patatra...
Quand j'essaye c'est toute la sidebar2 de droite qui se barre en dessous de la div "centre" tout en restant à droite... Comment faire pour que ces 3 colonnes restent alignées?

ps: j'espère que mes explications ont été claires!

encore merci pour votre aide.
Modifié par Heyoan (25 Mar 2010 - 05:14)

Salut,

Une initiation au positionnement en CSS peut-elle faire l'affaire ?

non je ne pense pas...
soit je ne comprends pas bien tout ce qui est dit soit le problème ne se situe pas seulement là...

je cherche encore des réponses à ces questions...

dans tous les cas merci!

bonsoir,


La logique voudrait que des contenus qui se complètent soient regroupés et pas disséminés dans le document .

En regroupant dans le flux tes contenus , tu peut ensuite jouer avec float ou display pour les repositionner cote a cote .

Avec de vrai contenus et sans aucun style , ta page est-elle compréhensible ?
Si ça saute du coq a l'âne pour en revenir a la poule , tu as alors un problème plus important que la mise en forme

Cordialement ,( je m'interroge juste)
GC

Bonjour, je me suis permis de retravailler votre code en profondeur, je l'ai testé sur
<modération par Heyoan : lien supprimé /> et il donne un résultat très satisfaisant.
Pour résumer j'ai créer des blocs containers qui font 800px de large, chaque container contient le titre h2, un bloc info et un bloc paragraphe.
le bloc info fait 150px de large et est en float:left, donc les titres h2 et les paragraphes sont à 170 px du bords (margin-left:170px;) ainsi si le paragraphe est plus long que les infos ou alors si il n'y a pas de bloc info dans le container, le texte du paragraphe reste bien aligné

Le nouveau code (testé sur <modération par Heyoan : lien supprimé /> ):

<html> 
<head> 
<style type="text/css"> 
 
*{margin:0px; 
padding:0px;} 
 
h2 
{text-align:center; 
margin:1em;} 
 
 
.container 
{width:800px; 
clear:both; 
float:none; 
margin-bottom:2em; 
} 
 
.info 
{float:left; 
width:150px; 
text-align:justify; 
padding-left:5px; 
padding-right:5px; 
margin-top:1.5em;} 
 
h3,p.paragraphe 
{ 
margin-left:170px; 
} 
 
</style> 
</head> 
<body> 
 
<h2>TITRE DE LA PAGE</h2> 
 
<div class="container"> 
<p class="info">info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1 info1.</p> 
<h3>Titre du paragraphe 1</h3> 
<p class="paragraphe">paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 . </p> 
</div> 
 

<div class="container"> 
<p class="info">info2 info2 info2 info2 info2 info2 info2 info2 info2 .</p> 
<h3>titre du paragraphe 2</h3> 
<p class="paragraphe">paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 .</p> 
</div> 
 

<div class="container"> 
<p class="info">info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 info3 .</p> 
<h3>titre du paragraphe 3</h3> 
<p class="paragraphe">paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 paragraphe 3 .</p> 
</div> 
  
 
<div class="container"> 
<h3>titre du paragraphe 4</h3> 
<p class="paragraphe">paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 paragraphe 4 .</p> 
</div> 
 
</body> 
</html> 

- Pour les ancres, ca n'a rien à voir, les ancres sont des cibles pour les liens.

- Vous souhaitez avoirs un menu "fixe", le problème c'est qu'il va se superposer aux autres dans le cas présent en tout cas.

Dites moi ce que vous en pensez, on verra le reste ensuite,
Allez, bonne nuit
Modifié par Heyoan (25 Mar 2010 - 05:13)

Hello,

@coeos > je ne vois pas bien ce que ton "outil" est censé apporter mais :
* pour tester ses pages il existe http://validator.w3.org/
* Alsacréations n'est pas fait pour servir de support publicitaire

Bonjour,
et merci!
je viens de tester le code et il marche tres bien pour ce que je veux faire...
en même temps je viens de comprendre un peu plus comment tout ca s'imbriquer!

Pour les ancres, je comprends aussi mieux leurs fonctionnements.

Maintenant il ne me reste plus qu'à essayer de réécrire le code sur les différentes pages...!

Bonne journée et à bientôt...

Heyoan a écrit :
Hello,

@coeos > je ne vois pas bien ce que ton "outil" est censé apporter mais :
* pour tester ses pages il existe http://validator.w3.org/
* Alsacréations n'est pas fait pour servir de support publicitaire

Bonjour, ce n'est pas outil servant à la validation puisqu'il ne valide rien et ne donne pas les erreurs, c'est juste pour faciliter le développement : le code d'un coté et le résultat de l'autre, une modification, un simple clic et on voit le résultat. Pour le coté publicitaire, ce n'est qu'un outil, qui n'a jamais venté les mérite d'une lightbox ou autre...

coeos a écrit :
le code d'un coté et le résultat de l'autre

Donc, en moins bien (puisque les css par exemple ne sont pas interprétées), ce que fait n'importe quel navigateur !

Si le css est interprété (même le js), je vous invite à copier le code que j'ai mis plus haut (HTML et CSS) et à le tester, vous verrez
C'est un outil qui permet de voir le résultat "en direct" (à un seul et unique clic près)

Finalement vous n'avez rien compris, et je suis sure de ne pas me tromper
Modifié par coeos (25 Mar 2010 - 18:34)