Positionnement des blocs dans le corps
Résolu
balde87
Messages postés
39
Statut
Membre
-
balde87 Messages postés 39 Statut Membre -
balde87 Messages postés 39 Statut Membre -
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;
}
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.
-
Comment faire apparaître la structure ou bien pour envoyer le template aide moi svp.
-
C'est à dire,je dois avoir quatre lignes de blocs dans le contenu,qui est mon corps de template.
-
-
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> -
une solution , dans le corps il faut 4 blocs pour inclure tes éléments.
<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<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
-
