18041 sujets

Questions générales et questions de débutants

Bloc décaler

Bonjour

Je m'initie au langage html et au css, je tente en guise d'exercice de créer des blocs en enfilade, pas de souci pour des bloques simples mais dès que je veux placer un bloc contenant 2 enfants il se crée un décalage, comme si il y avait un padding dans le bloc parent. J'ai essayer padding 0px, margin-top -20px, mais rien y fait.
Pour plus de compréhension voici les codes html et css ainsi qu'une photo


HTML:

<body>
 <div class="conteneur">
  <div class="bloc"></div>
  <div class="bloc2"></div>
  <div class="conteneur2"><div class="bloc4"></div><div class="bloc4"></div></div>  
 </div>
</body>


CSS

.conteneur {
background-color: red ;
background-image:url(images/Machineecrire.gif) ;
overflow: auto ;
}
.conteneur2{
	float:left;
	margin-left:20px;
	overflow:auto;
}
.bloc {
background-color: yellow;
height: 500px;
width: 100px;
float: left ;
}
.bloc2 {
background-color: blue ;
height: 500px;
width: 100px;
float:left ;
margin-left: 20px ;
}
.bloc3 {
background-color: green ;
height: 240px;
width: 100px;
}
.bloc4 {
background-color: black ;
height: 240px;
width: 100px;
margin-top:20px;
}


et la photo Smiley biggrin
upload/18724-ecran.jpg
On voit bien les cadres noirs décalés vers le bas.

Voila? en attendant vos réponses merci et bon week Smiley lol
tu créer un nouveau style pour le 1er bloc noir

background-color: black ;
height: 240px;
width: 100px;
Smiley confused
Je suis bête j'avais déjà créer le style, c'est le bloc3, j'ai eu beau me relire je n' ai pas vu mon erreur, désolé et merci pour la réponse.
IL y qd même un problème, si je rajoute 
<p>salut</p>
dans le bloc3 le décalage revient Smiley fache
codex a écrit :
IL y qd même un problème, si je rajoute 
<p>salut</p>
dans le bloc3 le décalage revient Smiley fache


et si tu fais, plutôt ca : 
.nopadnomag {
	margin:0px;
	padding:0px;
}


<p class="nopadnomag">salut</p>
Sujet clos
Aller à