18073 sujets

Questions générales et questions de débutants

[RESOLU] Sous petite resolution mes div se déplacent

Bonjour,
voila je suis entrain de faire le site d'une boite et j'ai placer des informations a l'aide de DIV. Mais dés que je réduit ma fenetre pour simuler de plus petite résolution, les div sautent et se mettent les un en dessous des autres.
comment faire pour qu'il reste en ligne et qu'il ne bouge pas du tout qd la fenetre est redimensionné?
merci pour vos réponses. Smiley smile

voila les captures pour bien vous expliquer :

upload/522-1.jpg upload/522-2.jpg upload/522-3.jpg
Modifié par sobbat (07 Mar 2006 - 10:02)
je me suis peu etre mal expliqué, je voudrai seulement que mé div reste en place... qu'il arretent de se balader qd la fenetre est redimensioné... c pas possible? Smiley bawling
voila ca donne ceci


<div id="conteneur">
<div class="top">
<h3>nouveau</h3>
<h4><?=$tab_studioads;?></h4>
</div>

<div class="gauche">
	<a href="inscription_editeurs.html" title="Générer des revenus publicitaires trouvez de nouveaux clients">
		<h3><?=$tab_edit_title;?></h3>
		<img class="imgaccueil" src="image/imgv5/visu_editeurs.jpg" width="346" height="89" border="0" alt="Generez des revenus publicitaires trouvez de nouveaux clients" /></a>
	<h4><? echo $tab_edit_intro;?></h4>
	<br>
	<p>
	<img src="../image/imgv5/puce_gauche.gif" border="0"><? echo " ".$tab_edit_5;?><br>
	<br><img class="img_bas" src="../image/imgv5/inscription_editeurs2.gif" alt="inscription editeurs" align="right"><img class="img_bas" src="../image/imgv5/FAQ-g2.gif" alt="FAQ editeurs" align="right">
	</p>
</div>

<div class="droite">
	<a href="inscription_annonceurs.html" title="trouver de nouveaux clients, toucher votre cible">
		<h3><?=$tab_ann_title;?></h3>
		<img class="imgaccueil" src="image/imgv5/visu_annonceurs.jpg" width="346" height="89" border="0" alt="trouver de nouveaux clients, toucher votre cible" /></a>
	<h4><? echo $tab_ann_intro;?></h4>
	<br>
  <p>
	<img src="../image/imgv5/puce_gauche.gif" border="0"><? echo " ".$tab_ann_5;?><br>
	<br><br><img class="img_bas" src="../image/imgv5/inscription_annonceurs2.gif" alt="inscription annonceurs" align="right"><img class="img_bas" src="../image/imgv5/FAQ-d2.gif" alt="FAQ annonceurs" align="right">
	</p>
</div>
</div>



et pour le CSS


#conteneur{
margin-left:175px;
margin-right:60px;
padding:0px 5px 5px 5px;
}

#conteneur .gauche{
height:415px;
width:346px;
background-color:#FFFFFF;
float:left;
margin: 5px 0px 0px 5px;
border:solid 1px #CFCFCF;
border-bottom:solid 2px #54A4FF;
}

#conteneur .droite{
height:415px;
width:346px;
background-color:#FFFFFF;
float:left;
margin: 5px 0px 0px 30px;
border:solid 1px #CFCFCF;
border-bottom:solid 2px #FFA200;
}
Bonjour,

Les dimensions de tes conteneurs sont données en pixel, soit 364px x2 + les marges

soit une largeur totale de : 738px .

Une fois cette largeur d'écran atteinte, il est normal que tes blocs se placent les uns sous les autres.

Pour que la taille de tes blocs s'adaptent à l'écran, tu peux définir les largeurs en % :

Exemple :



#conteneur .gauche{

height:415px;

[b]width:40%;[/b]

background-color:#FFFFFF;

float:left;

margin: 5px 0px 0px [b]10%[/b];

border:solid 1px #CFCFCF;

border-bottom:solid 2px #54A4FF;

}



#conteneur .droite{

height:415px;

[b]width:40%;[/b]

background-color:#FFFFFF;

float:left;

margin: 5px 0px 0px [b]10%;[/b]

border:solid 1px #CFCFCF;

border-bottom:solid 2px #FFA200;

}


Attention de ne pas dépasser 100% avec les marges.

Smiley smile
Sujet clos
Aller à