Mettre des div côte à côte
Fermé
piRstone
Messages postés
5
Date d'inscription
lundi 24 février 2014
Statut
Membre
Dernière intervention
25 février 2014
-
24 févr. 2014 à 11:37
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 26 févr. 2014 à 16:55
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 26 févr. 2014 à 16:55
A voir également:
- Mettre des div côte à côte
- Comment débloquer code mtn money cote d'ivoire ✓ - Forum compta / gestion
- Réinitialiser le mot de passe de mon mtn money ✓ - Forum compta / gestion
- Afficher deux pages cote à cote google doc ✓ - Forum MacOS
- Erreur d'application : une exception côté client s'est produite (voir la console du navigateur pour plus d'informations) . - Windows 11
- Croix a cote du nom snap ✓ - Forum Snapchat
6 réponses
alexdu17200
Messages postés
1282
Date d'inscription
mardi 4 juin 2013
Statut
Membre
Dernière intervention
7 mars 2016
833
24 févr. 2014 à 11:53
24 févr. 2014 à 11:53
Salut, tu peux mettre des
Il y a aussi d'autres possibilité, un tableau a 2 colonnes sans bordure.
float:left;et des
float:right;En gros, tu joues sur le positionnement de tes classes sur ta page.
Il y a aussi d'autres possibilité, un tableau a 2 colonnes sans bordure.
piRstone
Messages postés
5
Date d'inscription
lundi 24 février 2014
Statut
Membre
Dernière intervention
25 février 2014
24 févr. 2014 à 18:14
24 févr. 2014 à 18:14
Ah oui y a aussi un souci : j'ai fais une div "générale" que je centre pour que la page soit au centre (un peut comme Comment ça marche), j'ai pas besoin d'un site qui prend toute la largeur du navigateur. C'est la seule méthode que j'ai trouvé pour faire ça. Du coup si je met des float, les div à l'intérieur sortent de ma div générale...
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
24 févr. 2014 à 18:30
24 févr. 2014 à 18:30
ajoute un css
a tes div, ça les remettra en place
overflow:hidden;
a tes div, ça les remettra en place
piRstone
Messages postés
5
Date d'inscription
lundi 24 février 2014
Statut
Membre
Dernière intervention
25 février 2014
24 févr. 2014 à 20:10
24 févr. 2014 à 20:10
Je dois pas être doué ><
Le float le sort toujours de l'autre div :$
Il se retrouve en bas à droite (à cause du float:right) mais hors de ma div générale :/
Le float le sort toujours de l'autre div :$
Il se retrouve en bas à droite (à cause du float:right) mais hors de ma div générale :/
alexdu17200
Messages postés
1282
Date d'inscription
mardi 4 juin 2013
Statut
Membre
Dernière intervention
7 mars 2016
833
24 févr. 2014 à 20:57
24 févr. 2014 à 20:57
Tu peux toujours faire un tableau sur 2 colonnes, avec un margin/padding pour l'écart entre les 2 colonnes.
piRstone
Messages postés
5
Date d'inscription
lundi 24 février 2014
Statut
Membre
Dernière intervention
25 février 2014
24 févr. 2014 à 21:20
24 févr. 2014 à 21:20
Oui limite je crois que c'est sur ça que je vais me rabattre ^^
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
piRstone
Messages postés
5
Date d'inscription
lundi 24 février 2014
Statut
Membre
Dernière intervention
25 février 2014
25 févr. 2014 à 15:12
25 févr. 2014 à 15:12
Bon j'ai fait avec un tableau et ça a bien marché !
J'en ai fait un deuxième et lui j'aimerai bien le centrer dans ma div.
Vous auriez le CSS pour le centrer ?
J'en ai fait un deuxième et lui j'aimerai bien le centrer dans ma div.
Vous auriez le CSS pour le centrer ?
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 26/02/2014 à 16:49
Modifié par animostab le 26/02/2014 à 16:49
Ne fait surtout pas avec un tableau
<table> = données tabulaires
voici le code corrigé
html
<body>
<div class="contener">
<img src="images/banniere.png" alt="images/bannière" width="728" height="152" />
<h3>Service de pilotage d'éclairage KNX</h3>
<div class="choixSalle">
<h2>Salle à commander</h2>
<select name="choix">
<option value="G131">Salle G131</option>
</select>
</div>
<div class="eclairage">
<h2>Courbe d'éclairage</h2>
</div>
<div class="pilotage">
<p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Côté couloir </p>
<p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Côté fenêtres</p>
<p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Tableau</p>
</div>
</div>
</body>
le css
body {
font: 16px Arial, Helvetica, sans-serif;
background-color: #EBEBEB;
text-align: center;
color: #000000;
}
h2
{
text-align: center;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
.contener {
background-color: #CCC;
width: 800px;
border: #515151;
border-style: solid;
font-family: Arial, Helvetica, sans-serif;
}
h3
{
text-align: center;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
.choixSalle {
background-color: #b8b8b8;
border-radius: 7px 7px 7px 7px;
width: 300px;
border:#515151;
border-style:solid;
margin:10px 10px 10px 80px;
float:left;
}
.pilotage {
clear:both;
background-color: #b8b8b8;
border-radius: 7px 7px 7px 7px;
width: 300px;
text-align: left;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #515151;
border-right-color: #515151;
border-bottom-color: #515151;
border-left-color: #515151;
margin-left: 80px;
margin-bottom:10px;
}
.eclairage {
background-color: #b8b8b8;
border-radius: 7px 7px 7px 7px;
width: 300px;
float:right;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #515151;
border-right-color: #515151;
border-bottom-color: #515151;
border-left-color: #515151;
margin: 10px 80px 0 0;
}
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
<table> = données tabulaires
voici le code corrigé
html
<body>
<div class="contener">
<img src="images/banniere.png" alt="images/bannière" width="728" height="152" />
<h3>Service de pilotage d'éclairage KNX</h3>
<div class="choixSalle">
<h2>Salle à commander</h2>
<select name="choix">
<option value="G131">Salle G131</option>
</select>
</div>
<div class="eclairage">
<h2>Courbe d'éclairage</h2>
</div>
<div class="pilotage">
<p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Côté couloir </p>
<p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Côté fenêtres</p>
<p><img src="images/power-md.png" width="70px" height="70px" alt="Non défini"/> Tableau</p>
</div>
</div>
</body>
le css
body {
font: 16px Arial, Helvetica, sans-serif;
background-color: #EBEBEB;
text-align: center;
color: #000000;
}
h2
{
text-align: center;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
.contener {
background-color: #CCC;
width: 800px;
border: #515151;
border-style: solid;
font-family: Arial, Helvetica, sans-serif;
}
h3
{
text-align: center;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
.choixSalle {
background-color: #b8b8b8;
border-radius: 7px 7px 7px 7px;
width: 300px;
border:#515151;
border-style:solid;
margin:10px 10px 10px 80px;
float:left;
}
.pilotage {
clear:both;
background-color: #b8b8b8;
border-radius: 7px 7px 7px 7px;
width: 300px;
text-align: left;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #515151;
border-right-color: #515151;
border-bottom-color: #515151;
border-left-color: #515151;
margin-left: 80px;
margin-bottom:10px;
}
.eclairage {
background-color: #b8b8b8;
border-radius: 7px 7px 7px 7px;
width: 300px;
float:right;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #515151;
border-right-color: #515151;
border-bottom-color: #515151;
border-left-color: #515151;
margin: 10px 80px 0 0;
}
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
26 févr. 2014 à 16:55
26 févr. 2014 à 16:55
pour centrer un div
#div {
width: 300px;
margin: 0 auto;
}
#div {
width: 300px;
margin: 0 auto;
}