Mettre des div côte à côte
piRstone
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Dans mon projet de BTS je dois réaliser une page web de pilotage d'éclairage et comme je débute en html & css et je suis coincé...
Je voudrais mettre des div côte à côte pour que d'un côté j'ai le pilotage et de l'autre les statistiques.
Voici une photo qui vous aidera à mieux comprendre : gauche ce que j'ai et à droite ce que je souhaite avoir.
http://www.hostingpics.net/viewer.php?id=201843rsultat.jpg
Voici le code HTML et CSS
Le CSS
Merci d'avance pour votre aide :)
Dans mon projet de BTS je dois réaliser une page web de pilotage d'éclairage et comme je débute en html & css et je suis coincé...
Je voudrais mettre des div côte à côte pour que d'un côté j'ai le pilotage et de l'autre les statistiques.
Voici une photo qui vous aidera à mieux comprendre : gauche ce que j'ai et à droite ce que je souhaite avoir.
http://www.hostingpics.net/viewer.php?id=201843rsultat.jpg
Voici le code HTML et CSS
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Service web KNX</title>
<link href="css/siteknx.css" rel="stylesheet" type="text/css">
</head>
<body><center>
<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="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 class="eclairage" style="top: 185px">
<h2>Courbe d'éclairage</h2>
</div>
</div>
</center></body>
</html>
Le CSS
@charset "utf-8";
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;
}
.pilotage {
background-color: #b8b8b8;
border-radius: 7px 7px 7px 7px;
width: 300px;
text-align: left;
left: 80px;
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:10px;
margin-bottom:10px;
}
.eclairage {
background-color: #b8b8b8;
border-radius: 7px 7px 7px 7px;
width: 300px;
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:10px;
margin-bottom:10px;
}
Merci d'avance pour votre aide :)
A voir également:
- Mettre des div côte à côte
- Point vert a cote de la batterie - Accueil - Protection
- Comment mettre deux textes cote a cote sur word ✓ - Forum Word
- Pourquoi mon casque bluetooth ne marche que d'un coté ✓ - Forum Casque et écouteurs
- Comment mettre deux textes côte à côte sur word - Guide
- JBL 500 BT problème d'un côté - Forum Casque et écouteurs
6 réponses
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.
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...
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 :/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 ?
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.