probleme alignement!
probleme alignement! - HTML/CSS - Programmation
Sujets relatifs:
- IMAP et probleme Recent Unseen
- Probléme variable espace
- Problème avec des Variables de Session sous Free
- [VB_Access] Probleme Verrou BD access
- [java] probleme alignement dessin
- [CSS] Problème d'alignement d'un menu dans un div
- [CSS] Problème d'alignement d'un H6 dans un LI
- [HTML / CSS] Problème d'alignement de 2 div dans une cellule
- [XHTML / CSS] problème d'alignement horizontal [Résolu]
- [HTML] Probleme d'alignement d'images
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:
<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:
#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:
<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