probleme alignement!

probleme alignement! - HTML/CSS - Programmation

Marsh Posté le 21-06-2005 à 21:23:54    

imcomprehensible.... alors en m'inspirant de l'exemple du site alsa creation dont le code est le suivant:
 

Citation :

<HEAD><TITLE>Largeur fluide, header/menu gauche/menu droite/contenu/footer.</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
 }
 #header {
  HEIGHT: 100px; BACKGROUND-COLOR: #99cccc
 }
 #conteneur {
  WIDTH: 80%; POSITION: absolute; BACKGROUND-COLOR: #ccccff;
 }
 #centre {
  MARGIN-LEFT: 150px; MARGIN-RIGHT: 150px; BACKGROUND-COLOR: #9999cc
 }
 #gauche {
  LEFT: 0px; WIDTH: 150px; POSITION: absolute
 }
 #droite {
  RIGHT: 0px; WIDTH: 150px; POSITION: absolute
 }
 #pied {
  HEIGHT: 30px; BACKGROUND-COLOR: #99cc99
 }
 .menugauche {
  PADDING-RIGHT: auto; PADDING-LEFT: auto; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
 }
 .menugauche LI {
  MARGIN-BOTTOM: 5px
 }
 .menugauche A {
  MARGIN: 0px 2px; COLOR: #000000; TEXT-DECORATION: underline
 }
 
 .menudroit {
  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
 }
 .menudroit LI {
  MARGIN-BOTTOM: 5px
 }
 .menudroit A {
  MARGIN: 0px 2px; COLOR: #FF0000; TEXT-DECORATION: underline
 }
 .menudroit A:hover {
  TEXT-DECORATION: none
 }
 P {
  MARGIN: 20px 50px 0px
 }
</STYLE>
</HEAD>
 
<BODY>
<DIV id=conteneur>
<DIV id=header>header <A  
href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous  
les modèles)</A> </DIV>
<DIV id=gauche>
<P>menu</P>
<P>largeur fixe : 150px</P>
<UL class=menugauche>
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 1</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 2</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 3</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 4</A> </LI></UL></DIV>
<DIV id=droite>
<P>droite</P>
<P>largeur fixe : 150px</P>
<UL class=menudroit>
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 1</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 2</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 3</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 4</A>  
  </LI>
</UL>
</DIV>
<DIV id=centre><p>partie centrale qui "pousse" les colones vers le bas.<BR>partie  
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu  
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de  
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie  
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu  
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de  
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie  
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu  
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de  
la largeur<BR>partie avec du contenu occupant le reste de la largeur</p><BR></DIV>
<DIV id=pied>pied de page
</DIV>
</DIV>
</BODY>
</HTML>


 
 le menu gauche menu droit et le centre sont alignes alors que moi avec ces codes :
css:

Citation :

#conteneur  
  {
   WIDTH: 80%;
   POSITION: absolute;
   BACKGROUND-COLOR: #000000;
   position:absolute
  }
 
 #header  
  {
   HEIGHT: 200px;
   BACKGROUND-COLOR: #000000
  }
   
 #centre
  {
    MARGIN-LEFT: 160px;
   MARGIN-RIGHT: 100px;
   _HEIGHT: 800px;
   MIN-HEIGHT: 800px;
   WIDTH: 100%;
  }
 
 #menu
  {
   width: 160px;
   left: 0px;
   position:absolute;
   float:left;
  }
 
 #copain  
  {
   RIGHT: 0px;  
   WIDTH: 100px;  
   float:right;
  }
 
 #pied  
  {
   HEIGHT: 50px;  
   BACKGROUND-COLOR: #000000;
  }
 
   
  .menu
   {
    width: 160px;
    Height: 50px;
    background-color: #000000;  
    PADDING-RIGHT: auto;  
    PADDING-LEFT: auto;  
    PADDING-BOTTOM: 0px;  
    MARGIN: 0px;  
    PADDING-TOP: 0px;
   }
   
  .menu LI
   {
     margin-top: 0px;
   }
   
  .menu A
   {
    WIDTH: 160px;
    color: #FFFFFF;
    background-color: #000000;
    font-family:verdana;
    size: 11px;
    text-align:center;
   }
   
  .menu A:hover
   {
    width: 160px;
    color: #000000;
    background-color: #FFFFFF;
    font-family: verdana;
    size: 11px;
   }
   
  .copain LI
   {
    margin-bottom: 10px;
   }
     
  p
   {
   


 
et en html:
 

Citation :

<HEAD><TITLE>Largeur fluide, header/menu gauche/menu droite/contenu/footer.</TITLE>
<link href="acceuil.css" rel="stylesheet" type="text/css">
</HEAD>
 
<BODY>
<DIV id=conteneur>
<DIV id=header>header <A  
href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous  
les modèles)</A> </DIV>
<DIV id=menu>
<P>menu</P>
<P>largeur fixe : 150px</P>
<UL class=menu>
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 1</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 2</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 3</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 4</A> </LI></UL></DIV>
<DIV id=droite>
<P>droite</P>
<P>largeur fixe : 150px</P>
<UL class=copain>
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 1</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 2</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 3</A>  
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 4</A> </LI></UL></DIV>
<DIV id=centre><p>partie centrale qui "pousse" les colones vers le bas.<BR>partie  
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu  
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de  
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie  
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu  
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de  
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie  
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu  
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de  
la largeur<BR>partie avec du contenu occupant le reste de la largeur</p><BR></DIV>
<DIV id=pied>pied de page</DIV></DIV></BODY></HTML>


 
mes parties sont toutes les unes a la suite des autres :( je ne comprends pas ce que j'ai manquer !

Reply

Marsh Posté le 21-06-2005 à 21:23:54   

Reply

Marsh Posté le 21-06-2005 à 22:31:13    

j'ai regler le probleme je ne sais pas comment ...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed