18041 sujets

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

Alignement blocs CSS

Bonjour,
J'ai un petit soucis au niveau du CSS en fait, je veux créer 3 blocs dont 2 à gauche et 1 à droite, donc la somme des 2 premiers sera égale à la totalité du 3ème (j'espère que vous voyez à peu près, je vais joindre une image pour expliquer le tout). Mettre les 2 premiers blocs l'un dessous l'autre ce n'est pas un problème mais pour faire correspondre l'autre bloc en face en est un, seulement il faudrait que j'évite d'utiliser "margin-top: - (x) px". existerait-il une autre solution ?
Merci pour l'aide !
(à gauche de la photo ce que j'obtiens actuellement, à droite ce que j'aimerais sans donner de propriété négative au "margin-top")


#defile11 {
	width:200px;
	height:200px;
	margin-left:20px;
	margin-right:10px;
	margin-top: 20px;
	background-color:#000;
	display:inline-block;
}

#defile2 {
	width:200px;
	height:100px;
	margin-left:20px;
	margin-right:10px;
	margin-top: 10px;
	background-color:#000;
}

#defile3 {
	width:200px;
	height:310px;
	margin-left:230px;
	margin-top: [#red][b]-310px[/b][/#];
	background-color:#000;
	display:inline-block;
}


Le code HTML, pas plus compliqué que ça pour le moment :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" media="screen" type="text/css" title="CSS" href="intcss.css" />
</head>


<body>

<div id='defile11' class="defile">
<table id="cloc">
</table>
</div>

<div id='defile2' class="defile">
<table id="cloc">
</table>
</div>

<div id='defile3' class="defile">
<table id="cloc">
</table>
</div>

</body>
</html>


upload/35728-ex.JPG
Modifié par hcb56 (19 Jan 2011 - 10:03)
Bonjour,

Merci d'éditer ton post en respectant les instructions du forum relatif au code source.
Transmets aussi une url ou l'on peut voir le résultat ou au pire ton code html car dans l'état actuel, difficile de t'aider...
Modifié par Spacedementia (18 Jan 2011 - 18:57)
Bonjour, tu pourrais mettre tes trois blocs dans un div global que tu positionne en relatif puis à l'intérieur, tu positionnes tes trois blocs en absolue à l'aide de left et top. Comme on n'a pas plus de détails sur les contenus ou le reste de ta page, il est difficile de dire si cette option est la bonne puisque l'élément en absolue est retiré du flux de la page.

Attention il ne faut pas nommer un "id" (id=cloc) plus d'une fois dans la page. Utilise une class à la place.

À lire: Guide de survie du positionnement
Merci pour ta réponse. J'ai oublié de dire que j'utilisais Drupal et que le fait de mettre les 3 blocs dans un ne sera pas possible.
Alors, tu peux directement utiliser le positionnement absolue sur tes blocs qui se placeront par rapport à body. 

#defile11 { 
    width:200px; 
    height:200px; 
    position: absolute;
    left:20px; 
    margin-right:10px; 
    top: 20px; 
    background-color:#000; 
  /*  display:inline-block; */
} 
 
#defile2 { 
    width:200px; 
    height:100px; 
    position: absolute;
    left:20px; 
    margin-right:10px; 
    top: 230px; 
    background-color:#000; 
} 
 
#defile3 { 
    position: absolute;
    width:200px; 
    height:310px; 
    left:230px; 
    top: 20px; 
    background-color:#000; 
  /*  display:inline-block; */
}
Sujet clos
Aller à