Centrer un div, pas si facile

bobybx · 12 Décembre 2006

Bonjour,

j'ai un petit souci au niveau de placement de 4 div, ces div sont dans le flux (aucun absolute ou fixed).

L'image ci-dessous représente mon souci :

Mon but est de centrer le bloc 2 en fonction de la longueur variable.

Je n'arrive pas à réaliser ceci, ce n'est pas faute d'avoir multiplié les tentatives avec tous les float possible et inimaginables.

Mon code HTML est simple:

<div id="header">
	<div id="bloc1"></div>
	<div id="bloc2"></div>
	<div id="bloc3"></div>
	<div id="bloc4"></div>
</div>

Le code CSS est forcément faux, voici la base que je cherche à compléter :

#header {
	height : 50px;
}

#bloc1 {
	background-color: red;
	width: 30px;
}

#bloc2 {
	background-color: green;
	width: 50px;
}

#bloc3 {
	background-color: blue;
	width: 20px;
}

#bloc4 {
	background-color: gray;
	width: 1000px;
}

Je vous remercie d'avance pour l'interet porté à ce post.

ghost · 12 Décembre 2006

Bonjour,

Ce qui me gêne un peu c'est la notion "variable" de ta largeur.

Si c'est variable en fonction de la résolution en css pur cela ne me semble pas possible car on associe sur la même largeur des blocs en fixe et en %. C'est sûrement possible en y intégrant du dynamique (php) qui calculera la position du bloc à centrer.

Si c'est variable en fonction de la largeur définie en dynamique du bloc header, là c'est réalisable en css.

Si c'est une bannière extensible c'est encore autre chose ...

En fait, il faudrait savoir quel est le but de la chose !!!

A tout hasard, juste un bout de code si ça peut t'aider ?


<style>

#header {
    overflow: hidden;
    width: 700px;
    border: 1px solid black;
    margin: auto;
    position: relative;

}

#conteneur{
    width: 550px;
    float: left;
    overflow: hidden;
    position: relative;
}

#bloc4 {
    background-color: gray;
    width: 150px;
    height: 150px;
    float: right;
}	



#bloc1 {
    background-color: blue;
    width: 80px;
    height: 150px;
    float: left;
}

#bloc2 {
    background-color: black;
    width: 150px;
    height: 150px;
    position: absolute;
    left: 50%;
    margin-left: -75px;
}

#bloc3 {
    background-color: red;
    width: 80px;
    height: 150px;
    float: right;
}

</style>
</head>

<body>

<div id="header">
   <div id="conteneur">
    	<div id="bloc1"></div>	
    	<div id="bloc3"></div>
    	<div id="bloc2"></div>	
   </div>
   <div id="bloc4">
   </div>
</div>

</body>

Leonick · 12 Décembre 2006

en fait, c'est possible, mais que avec IE

j'utilise par exemple

width:expression(document.body.clientWidth>1024?"810px":document.body.clientWidth*0.80);

qui me permet d'émuler le max-width de FF mais peut aller beaucoup plus loin, comme pour ton besoin. Et là dessus, IE est en avance sur FF

SuperVespa · 15 Décembre 2006

Salut bobybx,

Fais un petit essai avec le code ci-dessous, je pense qu'il répond à ta demande. Il ne correspond pas à tes dimensions, mais tu pourras sans problème les modifier par la suite.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test pour bobybx</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
}
#conteneurVariable {
	background-color: #CCCCCC;
	margin-top: 0px;
	margin-right: 350px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#conteneurFixe {
	background-color: #2BFF00;
	float: right;
	width: 350px;
	margin: 0px;
}
#colonneGauche {
	background-color: #00CCFF;
	float: left;
	width: 150px;
}
#colonneCentre {
	background-color: #666666;
	width: 200px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#colonneDroite {
	background-color: #FF6600;
	float: right;
	width: 150px;
}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0px;
	padding: 10px;
	text-align: center;
}
-->
</style>
</head>

<body>
<div id="conteneurFixe">
  <p>id "conteneurFixe"<br />
  350 px </p>
</div>
<div id="conteneurVariable">
  <div id="colonneGauche">
	<p>id "colonneGauche"<br />
	150 pixels
	</p>
  </div>
  <div id="colonneDroite">
	<p>id "colonneDroite"<br />
	150 pixels </p>
  </div>
  <div id="colonneCentre">
	<p>id "colonneCentre"<br />
	200 pixels </p>
  </div>
</div>
</body>
</html>

[Edit] modifier en «codebox»

Modifié 15 Décembre 2006 par SuperVespa

Connexion

Centrer un div, pas si facile

Sujets conseillés

bobybx

ghost

Leonick

SuperVespa

Veuillez vous connecter pour commenter

Parcourir

Activité