Comment aligner des codes HTMl avec div float?
Fermé
Kilou1984
Messages postés
153
Date d'inscription
samedi 2 mars 2013
Statut
Membre
Dernière intervention
11 juin 2024
-
1 août 2014 à 16:21
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 - 8 août 2014 à 11:15
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 - 8 août 2014 à 11:15
A voir également:
- Html float
- Editeur html - Télécharger - HTML
- &Nbsp html - Forum HTML
- Br html - Forum HTML
- Espace html ✓ - Forum HTML
- Faire sauter 2 lignes avec br (CSS) - Forum CSS
2 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
1 août 2014 à 22:39
1 août 2014 à 22:39
Bonjour
deja ne mélange pas html et css
fait un fichier css externe nomme le style.css et appelle le comme cela dans ta page web
<link rel="stylesheet" type="text/css" href="style.css">
ensuite :
html
<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>
style.css
body, html{
margin:0;
padding:0;
height:100%;
}
#gauche {
float: left;
width: 200px;
background-color:blue;
height:100%;
}
#droite {
float: right;
width: 200px;
background-color:blue;
height:100%;
}
#centre {
margin: 0 200px;
height:100%;
}
deja ne mélange pas html et css
fait un fichier css externe nomme le style.css et appelle le comme cela dans ta page web
<link rel="stylesheet" type="text/css" href="style.css">
ensuite :
html
<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>
style.css
body, html{
margin:0;
padding:0;
height:100%;
}
#gauche {
float: left;
width: 200px;
background-color:blue;
height:100%;
}
#droite {
float: right;
width: 200px;
background-color:blue;
height:100%;
}
#centre {
margin: 0 200px;
height:100%;
}
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
1 août 2014 à 22:58
1 août 2014 à 22:58
Bonjour,
les float c'est un peu casse tete pour les débutants; j'aurais plutot jouer simple en reprenant le code d'@animostab pour des element inline :
html
<div id="gauche"></div>
<div id="centre"></div>
<div id="droite"></div>
style.css
body, html{
margin:0;
padding:0;
height:100%;
}
#gauche, #droite, #centre {
display:inline-block;
width: 33%;
vertical-align:top;
}
#gauche, #droite{
background-color:blue;
}
#centre {
background-color:red;
}
en plus c'est carrement plus court a écrire :)
reste la largeur et les dimensions à ajuster
les float c'est un peu casse tete pour les débutants; j'aurais plutot jouer simple en reprenant le code d'@animostab pour des element inline :
html
<div id="gauche"></div>
<div id="centre"></div>
<div id="droite"></div>
style.css
body, html{
margin:0;
padding:0;
height:100%;
}
#gauche, #droite, #centre {
display:inline-block;
width: 33%;
vertical-align:top;
}
#gauche, #droite{
background-color:blue;
}
#centre {
background-color:red;
}
en plus c'est carrement plus court a écrire :)
reste la largeur et les dimensions à ajuster
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
1 août 2014 à 23:42
1 août 2014 à 23:42
la difference c'est que le centre est fluide avec float mais pas les gauche droite
enfin c'est presque la meme chose mais comme @Kilou1984 voulait des float ...
une astuce avec inline-block pour eviter le white space entre les div c'est celle ci
mettre un font-size:0; sur le parent
exemple
<div id="parent">
<div id="gauche"></div>
<div id="centre"></div>
<div id="droite"></div>
</div>
#parent {
font-size:0;
}
et après on remet les font-size dans les p h1 h2 etc des div en inlline-block
enfin c'est presque la meme chose mais comme @Kilou1984 voulait des float ...
une astuce avec inline-block pour eviter le white space entre les div c'est celle ci
mettre un font-size:0; sur le parent
exemple
<div id="parent">
<div id="gauche"></div>
<div id="centre"></div>
<div id="droite"></div>
</div>
#parent {
font-size:0;
}
et après on remet les font-size dans les p h1 h2 etc des div en inlline-block
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
5 août 2014 à 13:07
5 août 2014 à 13:07
les div se place dans la page après <body>
le css dans un fichier externe
tu devrais suivre ces tutos pour mieux comprendre ce qu'est une page web
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
le css dans un fichier externe
tu devrais suivre ces tutos pour mieux comprendre ce qu'est une page web
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Kilou1984
Messages postés
153
Date d'inscription
samedi 2 mars 2013
Statut
Membre
Dernière intervention
11 juin 2024
8
7 août 2014 à 21:09
7 août 2014 à 21:09
Ce n'est pas un site internet que j'ai, c'est un forum, on ne peut y faire ce qu'on veut.
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
8 août 2014 à 11:15
8 août 2014 à 11:15
Ben un forum, c'est un site web :)
Tu peux y placer ces codes sans problème, mais pour ce qui est d'accéder aux emplacements, faut surement toucher un peu au fichier source
Tu peux y placer ces codes sans problème, mais pour ce qui est d'accéder aux emplacements, faut surement toucher un peu au fichier source
