Positionnement des blocs dans le corps

Résolu
balde87 -  
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;
}

12 réponses

  1.  totodunet
    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.
    0
    1. balde87 Auteur
      Comment faire apparaître la structure ou bien pour envoyer le template aide moi svp.
      0
      1. balde87 Auteur
        C'est à dire,je dois avoir quatre lignes de blocs dans le contenu,qui est mon corps de template.
        0
        1. ideal23
          tu peux nous envoyer le code html pour voir?
          0
          2. balde87 Auteur
            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>
            0
            1. ideal23
              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
              0
              1. ideal23
                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>
                0
                1. balde87 Auteur
                  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.
                  0
                  1. ideal23
                    le reste tu t'en charge? sinon tu peux demander
                    0
                    1. balde87 Auteur
                      Salut,est ce que tu peux m'aide pour faire aminer une image de background si c'est possible aide moi svp.
                      0

                      Discussions similaires

                      Comment changer le (Corps du thèmes) et (En-têtes du thème)
                      Charlibrown_be

                      5 réponses
                      Xiaomi/Redmi - problème de réseau et SMS de positionnement
                      Bashiok

                      1 réponse
                      Telecharger la police calibri
                      Soline

                      9 réponses
                      Police Calibri sous Ubuntu
                      samueldu94380

                      7 réponses
                      Affichage image sur libre Office texte (Writer en .odt)
                      thoret

                      14 réponses