18073 sujets

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

Aligner 2 Bloc qui sont contenus dans un autre Bloc [resolu]

Bonjour à tous, c'est mon premier post et je crois que beaucoup d'autres vont suivrent.

Je me suis au xthml et css il y a 2 jours, très intéressant, j' espère à terme lacher Dreamweaver...

Je suis sur Notepad ++ à présent.

Alors j'ai suivis quelques tuto sur ce site, et là je bloque un peu sur les positionnement de "bloc".

J'ai suivis ce cours sur "Comprendre-le-positionnement-des-balises-en-CSS" avec notament l' exercice des 3 bloc alignés.

Seulement je n'ai pas pu reproduire cela car il se trouve que les 2 bloc que je souhaite aligner sont à l'intérieur d' un autre bloc, apparement cela change là donne.

Bref, voici mon code:

Ficher Htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="mise_en_page.css" />
</head>

<body>


<div id="header">header</div>


<div id="corps">corps
<div class="petit_corps">petit_corps</div>
<div class="menu">menu</div>
</div>

<div id="footer">footer</div>


<br>
<br>

<div class="bloc1">premier bloc</div>
<div class="bloc2">deuxième bloc</div>


</body>
</html>



Ficher Css
body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-color: #000000;
}


#header
{
  width: 700px;
  height: 60px;
  background-color: green;
  margin:auto;
} 



#corps
{
  width: 700px;
  height: 600px;
  background-color: yellow;
  margin:auto;
  margin-top: 20px
} 

.petit_corps
{
  width: 500px;
  height: 500px;
  background-color: red;
  margin-top: 20px;
  float: left;
  margin-left: 20px;
} 


.menu
{
  width: 180px;
  height: 500px;
  background-color: white;
  margin-top: 20px;
  margin-left: 20px;
} 

#footer
{
  width: 700px;
  height: 60px;
  background-color: blue;
  margin:auto;
  margin-top: 20px
} 




.bloc1 
{
background-color: blue;
height: 50px;
width: 100px;
float: left;
}


.bloc2 
{
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 50px;
}



Alors en fait j'ai deux souci:

Le premier ce que mon bloc blanc "menu" n'est pas aligner au bloc rouge "petit_corps" (à sa gauche)

Et le deuxième ce que j'ai mis la même marge au 2 bloc " margin-left: 20px;" et pourtant si vous regarder vous verrez qu'ils sont pas au même niveau par rapport à mon bloc jaune "corps".

J'ai éssayé de changer pas mal de choses en vain.

D'avance merci pour votre aide.

Magik Smiley biggrin
Modifié par magik (07 Aug 2005 - 11:19)
Sujet clos
Aller à