Positionnement des blocs dans le corps
Résolu
balde87
Messages postés
30
Date d'inscription
Statut
Membre
Dernière intervention
-
balde87 Messages postés 30 Date d'inscription Statut Membre Dernière intervention -
balde87 Messages postés 30 Date d'inscription Statut Membre Dernière intervention -
Bonjour,j'ai des problèmes sur le positionnement des blocs dans le corps aide moi voici le code css:
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;
}
A voir également:
- Positionnement des blocs dans le corps
- Logiciel positionnement gratuit - Guide
- Code blocs - Télécharger - Langages
- Dans le document à télécharger, positionnez l'image dans le cadre gris. mettez un espace de 1 cm autour de l'image. comment se prénomme la personne recherchée ? - Forum Word
- Calibri corps - Forum Téléchargement
- Exemple test de positionnement greta - Forum Études / Formation High-Tech
12 réponses
c'est difficile d'imaginer visuellement. Peux-tu essayer de nous faire apparaître la structure (quel bloc est dans quel bloc par exemple) ? je pense que ce sont les float:right ton soucis.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Voici le code html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>site enfant</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="en-tête">
<div id="imghaut">photohaut</div>
<div id="logo">logo</div>
</div>
<div id="colonnegauche">
<div class="haut">HAUT</div>
<div class="bas">BAS</div>
</div>
<div id="corps">
<div id="agenda">AGENDA</div>
<div id="img4">img4</div>
<div id="img3">img3</div>
<div id="img2">img2</div>
<div id="img1">img1</div></br>
<div id="multimédia">multi</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>site enfant</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="en-tête">
<div id="imghaut">photohaut</div>
<div id="logo">logo</div>
</div>
<div id="colonnegauche">
<div class="haut">HAUT</div>
<div class="bas">BAS</div>
</div>
<div id="corps">
<div id="agenda">AGENDA</div>
<div id="img4">img4</div>
<div id="img3">img3</div>
<div id="img2">img2</div>
<div id="img1">img1</div></br>
<div id="multimédia">multi</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
une solution , dans le corps il faut 4 blocs pour inclure tes éléments.
puis en css
margin: 2px;
float: left;
width: 100px;
text-align: center;
je regarde ca plus un peut plus tard
<div id="corps"> <div id="bloc1"> <div id="agenda">AGENDA </div> </div> <div id="bloc2"> <div id="img4">img4 </div></div> <div id="bloc3"> <div id="img3">img3 </div> </div> <div id="bloc3"> <div id="img2">img2</div> <div id="img1">img1</div> <div id="multimédia">multi </div></div> </div>
puis en css
margin: 2px;
float: left;
width: 100px;
text-align: center;
je regarde ca plus un peut plus tard
as-tu avancé?
exemple de code
exemple de code
<style>
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;
}
#bloc1{
height:127px;
text-align: center;
}
#bloc2{
height:100px;
text-align: center;
margin-top: 5px;}
#bloc3{
margin-top: 5px;
height:100px;
text-align: center;
}
#bloc4{
margin-top: 5px;
height:100px;
text-align: center;
}
.agenda{
float:left;
width:95px;
height:127px;
margin: 2px;
background-color:#FFFFFF;
}
.img4{
float:left;
width:120px;
height:100px;
margin:2px;
background-color:#FFFFFF;
}
.img3{
float:left;
width:120px;
height:100px;
margin: 2px;
background-color:#FFFFFF;
}
.img2{
float:left;
width:120px;
height:100px;
margin:2px;
background-color:#FFFFFF;
}
.img1{
float:left;
width:120px;
height:100px;
margin: 2px;
background-color:#FFFFFF;
}
.multimédia{
float:left;
margin: 2px;
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;
}
</style>
</head>
<body>
<div id="en-tête">
<div id="imghaut">photohaut</div>
<div id="logo">logo</div>
</div>
<div id="colonnegauche">
<div class="haut">HAUT</div>
<div class="bas">BAS</div>
</div>
<div id="corps">
<div id="bloc1">
<div class="agenda">AGENDA
</div></div>
<div id="bloc2">
<div class="img4">img4
</div></div>
<div id="bloc3">
<div class="img3">img3</div>
<div class="img2">img2
</div></div>
<div id="bloc4">
<div class="img1">img1</div>
<div class="multimédia">multi
</div>
</div></div>
<div id="footer">FOOTER
</div>
</body>
</html>
Merci c'est trés cool ,il reste le menu horizontale en bas de l'en-tête c'est à dire au dessus du photo et du logo.
Salut,est ce que tu peux m'aide pour faire aminer une image de background si c'est possible aide moi svp.
je ne suis pas là cet après midi, mais c'est possible , en css avec du javascript , un exemple:https://www.lafermeduweb.net
