Diviser un contenu en différent blocs
Résolu
balde87
Messages postés
39
Statut
Membre
-
balde87 Messages postés 39 Statut Membre -
balde87 Messages postés 39 Statut Membre -
Comment diviser un contenu en différent blocs svp?
A voir également:
- Diviser un contenu en différent blocs
- Diviser une photo en 3 instagram - Guide
- Diviser pdf - Guide
- Fusionner deux cellules excel en gardant le contenu - Guide
- Word a trouvé du contenu illisible - Guide
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
6 réponses
je veux diviser le contenu en blocs,des blocs en haut du contenu,des blocs au milieu du contenu et des bolcs en bas du contenu de mon template aide moi svp?
Tu veux faire par exemple une entête, un corps et un footer ?
Dans ton CSS tu les décris.
.tete
{
position: absolute;
top: 100px;
height: 300px;
width: 90%;
}
.corps
{
position: absolute;
top: 400px;
height 600px;
width: 90%
}
.pied
{
position: absolute;
top: 100%;
margin-top: -300px;
height: 300px;
width: 90%
}
Ca va décrire les blocs.
Dans ton html tu mets des balises div.
<div class="tete">
//par exemple..
<h1>Ici la tête de page</h1>
</div>
<div class="corps">
Images, textes.... etc
</div>
<div class="pied">
Pied de page.
</div>
Dans ton CSS tu les décris.
.tete
{
position: absolute;
top: 100px;
height: 300px;
width: 90%;
}
.corps
{
position: absolute;
top: 400px;
height 600px;
width: 90%
}
.pied
{
position: absolute;
top: 100%;
margin-top: -300px;
height: 300px;
width: 90%
}
Ca va décrire les blocs.
Dans ton html tu mets des balises div.
<div class="tete">
//par exemple..
<h1>Ici la tête de page</h1>
</div>
<div class="corps">
Images, textes.... etc
</div>
<div class="pied">
Pied de page.
</div>
oui c'est comme ça,mais dans le corps je veux insérer des articles ou bien des blocs pour les articles,des vidéos et des actualités ok.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Alors tu peux créer d'autres blocs dans ton CSS et les insérer dans le div corps du html
CSS >
.voletgauche
{
etc..
}
.voletdroit
{
etc..
}
HTML >
<div class="corps">
<div class="voletgauche">
</div>
<div class="voletdroit">
</div>
</div> //fermeture du corps.
CSS >
.voletgauche
{
etc..
}
.voletdroit
{
etc..
}
HTML >
<div class="corps">
<div class="voletgauche">
</div>
<div class="voletdroit">
</div>
</div> //fermeture du corps.
Voici le code css,mais je veux des blocs au milieu et en bas dans le corp et une photo sur l'en-tête aide svp>?
body{
font-family:Arial,sans-serif;
font-size:12px;
background:#FFFFFF;
text-align:center;
margin:100px;
padding:2px 50px;
}
#en-tête{
width:718px;
height:281px;
text-align: left;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-top:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#000099;
}
#corps{
margin-left:119px;
width:599px;
height:574px;
text-align: left;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#000099;
}
#colonnegauche {
float:left;
}
#colonnegauche .haut {
width:119px;
height:260px;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#006633;
}
#colonnegauche .bas{
width:119px;
height:415px;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#006666;
}
#agenda{
float:right;
width:95px;
height:127px;
margin-top:2px;
background-color:#FFFFFF;
}
#img4{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#img3{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#img2{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#img1{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#multimédia{
margin-top:50px;
margin-right:o auto;
float:right;
width:150px;
height:100px;
background-color:#FFFFFF;
}
#footer{
width:599px;
height:100px;
margin-left:119px;
text-align: left;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#006633;
}
body{
font-family:Arial,sans-serif;
font-size:12px;
background:#FFFFFF;
text-align:center;
margin:100px;
padding:2px 50px;
}
#en-tête{
width:718px;
height:281px;
text-align: left;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-top:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#000099;
}
#corps{
margin-left:119px;
width:599px;
height:574px;
text-align: left;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#000099;
}
#colonnegauche {
float:left;
}
#colonnegauche .haut {
width:119px;
height:260px;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#006633;
}
#colonnegauche .bas{
width:119px;
height:415px;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#006666;
}
#agenda{
float:right;
width:95px;
height:127px;
margin-top:2px;
background-color:#FFFFFF;
}
#img4{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#img3{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#img2{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#img1{
float:right;
width:120px;
height:100px;
margin-right:5px;
margin-top:5px;
background-color:#FFFFFF;
}
#multimédia{
margin-top:50px;
margin-right:o auto;
float:right;
width:150px;
height:100px;
background-color:#FFFFFF;
}
#footer{
width:599px;
height:100px;
margin-left:119px;
text-align: left;
border-right:2px #FFFFFF dotted;
border-left:2px #FFFFFF dotted;
border-bottom:2px #FFFFFF dotted;
background-color:#006633;
}