28173 sujets

CSS et mise en forme, CSS3

[Resolu] Centrer deux div sur la même ligne

Hello,

J'essaye de centrer deux div sur une même ligne dans ma page web, mais quoi que je tente, je me plante (^-^)

Voici mon petit morceau de code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
#container {
background-color:#333333;
width:400px;
height:100px;
margin:auto;

}
#carre {
background-color:#CC3300;
width:100px;
height:100px;
float:left;
margin:auto;
}
</style>

</head>

<body>
<div id="container"><div id="carre"></div><div id="carre"></div></div>
</body>
</html>


Et une petite explication visuelle du problème :
http://img145.imageshack.us/img145/3791/exemplebu4.gif

Merci de votre aide!
Modifié par MasterPingouin (12 Mar 2007 - 11:26)
Toujours le même problème, avec le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

<style type="text/css">

#container {
background-color:#333333;
width:400px;
height:100px;
margin:auto;
}

.carre {
background-color:#CC3300;
width:100px;
height:100px;
float:left;
margin:auto;
display:inline;

}

</style>

</head>

<body>
<div id="container"><div class="carre">carre</div><div class="carre">carre</div></div>
</body>

</html>
Bonjour,

Puisque ce sont 2 div et qu'elles sont clairement dimensionnées, tu peux les identifier séparément et ajouter une marge à la 1re.

Essaye comme ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#container {
background-color:#333;
width:400px;
height:100px;
margin:auto;

}
#carre1 {
background-color:#c30;
width:100px;
height:100px;
float:left;
[b]margin-left : 100px;[/b]
}
#carre2 {
background-color:#c35;
width:100px;
height:100px;
float:left;
}
</style>

</head>

<body>
<div id="container">
  <div id="carre1"></div>
  <div id="carre2"></div>
</div>
</body>
</html>

Modifié par Gihef (11 Mar 2007 - 13:55)
Salut.

Il faut que ton container soit de la même largeur que son contenu, donc 200px dans ton exemple. Et ensuite tu lui donnes des margin:auto pour le centrer. Tes 2 div carrés ont juste besoin du float:left, pas besoin du display:inline. Les marges auto sont inutiles aussi puisqu'elles sont nulles.
Et c'est là que ça pose problème :

Le container délimite juste l'espace d'affichage et je cherche à y mettre attends de carrés que ma bouble php le permet (le maximum étant 4).

Exemple :

Si ma boucle ne se répète pas, il y aura un carré dans le container
Si ma boucle se répète 2 fois, il y aura deux carrés dans le container
Si ma boucle se répète 3 fois, il y aura trois carrés dans le container
Si ma boucle se répète 4 fois, il y aura quatre carrés dans le container

et le tout parfaitement centré. Si c'est impossible (j'en doûte), je peux me résigner et abandonner l'idée

Bienvenue dans le monde du css qu'ils disaient (^-^)
Il aurait été bon de connaître toutes les conditions dès le départ (-;

Je ne suis pas un spécialiste de PHP, cependant si les idées que je me fais sur sa puissance sont exactes, il doit être possible de spécifier des conditions lors des boucles (?)
Et donc, de préciser pour chaque contexte (boucle=0, boucle=1…) la marge à appliquer à <div id="carre1> et le nombre de <div class=carre_supplementaire> à ajouter.

+ “Bienvenue dans le monde du css”
Là, ce n'est plus en rapport avec les CSS, mais avec PHP.
Ça se programme. Le problème aurait été le même avec des <td>. Si on ne connaît pas le contexte dès le départ, il faut adapter.
Modifié par Gihef (11 Mar 2007 - 19:31)
Bonjour,

Tu places tes carré dans un bloc conteneur en margin-auto
Si tu boucles en php, tu connais ton nombre de carrés donc le width de ton bloc conteneur et tes carrés tu les positionnes en float: left dans ton conteneur. Voilou
C'est une solution, mais elle ne me convient pas car trop dépendente de mon code php ce qui à l'avenir pourrai créé des soucis. Point de soucis j'abandonne l'idée ce qui n'est pas en soi un mal.

Merci à tous!
Pour ta partie PHP, mets des ID que tu génères dynamiquement soit à partir d'un ID que tu récupères de ta base de données, soit en incrémentant un chiffre.

Pour ce qui est du nombre de carrés à afficher, j'ai un peu le même cas pour le site que je développe, et que tu sois en CSS ou avec des cellules de tableaux, faut que tu gères ton résultat avec un petit "modulo", comme ca selon le résultat tu génères la fin de ta ligne, tableau... Smiley cligne
Sujet clos
Aller à