Comment aligner des codes HTMl avec div float?
Kilou1984
Messages postés
152
Date d'inscription
Statut
Membre
Dernière intervention
-
inspiring Messages postés 1813 Date d'inscription Statut Membre Dernière intervention -
inspiring Messages postés 1813 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Pour le moment, j'ai utilisé des codes HTML ( il y en a plusieurs avec lien simple, lien sur image, et balise texte) Pour ces codes, je les ait tous mis au centre avec la balise center, on va appeler tout ces codes " bloc-centre" :
J'aimerai faire en sorte que le bloc-centre reste là ou il est toujours au centre, mais en y ajoutant deux autre blocs de chaque coté du bloc-centre comme ceci :
" Bloc-gauche" ( plusieurs codes situés à gauche) et à coté : "Bloc-centre" et à coté : "Bloc-droite" ( plusieurs codes situé à droite).
J'ai suivit un tutoriel pour utiliser la balise div float, qui n'a pas fonctionné, je l'est utilisé pour le bloc-center qui s'est retrouvé à gauche de mon forum, et le bloc-gauche s'est retrouvé en dessous du bloc-centre j'ai fait comme ceci :
Merci d'avance pour votre aide.
Pour le moment, j'ai utilisé des codes HTML ( il y en a plusieurs avec lien simple, lien sur image, et balise texte) Pour ces codes, je les ait tous mis au centre avec la balise center, on va appeler tout ces codes " bloc-centre" :
<div align="center">
Bloc-centre
</div>
J'aimerai faire en sorte que le bloc-centre reste là ou il est toujours au centre, mais en y ajoutant deux autre blocs de chaque coté du bloc-centre comme ceci :
" Bloc-gauche" ( plusieurs codes situés à gauche) et à coté : "Bloc-centre" et à coté : "Bloc-droite" ( plusieurs codes situé à droite).
J'ai suivit un tutoriel pour utiliser la balise div float, qui n'a pas fonctionné, je l'est utilisé pour le bloc-center qui s'est retrouvé à gauche de mon forum, et le bloc-gauche s'est retrouvé en dessous du bloc-centre j'ai fait comme ceci :
<div style="float:center">
Bloc-centre
</div>
<div style="clear:both"></div>
<div style="float:left">
Bloc-gauche
</div>
<div style="clear:both"></div>
Merci d'avance pour votre aide.
A voir également:
- Html float
- Editeur html - Télécharger - HTML
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- Html download - Télécharger - HTML
- /Var/www/html/index.html ✓ - Forum Linux / Unix
2 réponses
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%;
}
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
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
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
