Positionnement des blocs dans le corps
Résolu/Fermé
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
-
8 avril 2013 à 14:02
balde87 Messages postés 30 Date d'inscription samedi 6 avril 2013 Statut Membre Dernière intervention 13 avril 2013 - 9 avril 2013 à 12:18
balde87 Messages postés 30 Date d'inscription samedi 6 avril 2013 Statut Membre Dernière intervention 13 avril 2013 - 9 avril 2013 à 12:18
A voir également:
- Positionnement des blocs dans le corps
- Code blocs - Télécharger - Langages
- Logiciel positionnement gratuit - Guide
- Positionner des points sur une carte - Guide
- 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 Bureautique
- Ouvrez ce fichier avec un éditeur de texte simple (bloc-notes, textedit, gedit, etc.) pour y découvrir le nom d’un objet. ✓ - Forum Études / Formation High-Tech
12 réponses
totodunet
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
199
8 avril 2013 à 14:48
8 avril 2013 à 14:48
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.
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
8 avril 2013 à 15:20
8 avril 2013 à 15:20
Comment faire apparaître la structure ou bien pour envoyer le template aide moi svp.
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
8 avril 2013 à 15:23
8 avril 2013 à 15:23
C'est à dire,je dois avoir quatre lignes de blocs dans le contenu,qui est mon corps de template.
ideal23
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 mai 2014
28
8 avril 2013 à 16:49
8 avril 2013 à 16:49
tu peux nous envoyer le code html pour voir?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
8 avril 2013 à 16:58
8 avril 2013 à 16:58
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>
ideal23
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 mai 2014
28
8 avril 2013 à 17:49
8 avril 2013 à 17:49
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
ideal23
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 mai 2014
28
Modifié par ideal23 le 8/04/2013 à 21:25
Modifié par ideal23 le 8/04/2013 à 21:25
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>
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
8 avril 2013 à 23:12
8 avril 2013 à 23:12
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.
ideal23
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 mai 2014
28
9 avril 2013 à 01:45
9 avril 2013 à 01:45
le reste tu t'en charge? sinon tu peux demander
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
9 avril 2013 à 11:46
9 avril 2013 à 11:46
Salut,est ce que tu peux m'aide pour faire aminer une image de background si c'est possible aide moi svp.
ideal23
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 mai 2014
28
9 avril 2013 à 12:06
9 avril 2013 à 12:06
je ne suis pas là cet après midi, mais c'est possible , en css avec du javascript , un exemple:https://www.lafermeduweb.net
balde87
Messages postés
30
Date d'inscription
samedi 6 avril 2013
Statut
Membre
Dernière intervention
13 avril 2013
9 avril 2013 à 12:18
9 avril 2013 à 12:18
Merci je vois c'est bon.
