Diviser un contenu en différent blocs
Résolu/Fermé
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
-
Modifié par durock le 8/04/2013 à 12:44
balde87 Messages postés 30 Date d'inscription samedi 6 avril 2013 Statut Membre Dernière intervention 13 avril 2013 - 8 avril 2013 à 13:29
balde87 Messages postés 30 Date d'inscription samedi 6 avril 2013 Statut Membre Dernière intervention 13 avril 2013 - 8 avril 2013 à 13:29
A voir également:
- Diviser un contenu en différent blocs
- Diviser pdf - Guide
- Diviser photo instagram gratuit - Guide
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
- Word a trouvé du contenu illisible - Guide
- Contenu sme - Forum YouTube
6 réponses
Utilisateur anonyme
8 avril 2013 à 12:43
8 avril 2013 à 12:43
Qu'est-ce que tu veux dire ?
a.
{
font-size: 16;
}
b.
{
color: red;
}
??
a.
{
font-size: 16;
}
b.
{
color: red;
}
??
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
8 avril 2013 à 12:50
8 avril 2013 à 12:50
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?
Utilisateur anonyme
8 avril 2013 à 12:57
8 avril 2013 à 12:57
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>
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
8 avril 2013 à 13:03
8 avril 2013 à 13:03
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
Utilisateur anonyme
8 avril 2013 à 13:14
8 avril 2013 à 13:14
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.
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
Modifié par balde87 le 8/04/2013 à 13:56
Modifié par balde87 le 8/04/2013 à 13:56
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;
}
