Tout d'abord merci a Sibelius et a Alsacreations pour les tutoriels etc mis a disposition... dont je me suis inspire pour la mise en page suivante
ca fait qq heures que je galere avec une mise en page CSS, j'ai fait un petit schema (vite fait mal fait mais j'espere que ca illustrera suffisamment)
SCHEMA 1
J'ai un bloc conteneur car je souhaire limiter la taille de l'affichage a 800px en largeur...
J'arrive a placer les differents elements en bricolant un peu ... seulement je n'aime pas vraiment le bricolage et je souhaite progresser en CSS (j'ai un background de developpeur pas de graphiste, j'ai tenu qq temps sans les CSS ... mais il faut bien s'y coller un jour
)Je crois que mon probleme peut etre resolu rapidement mais j'avoue etre perdu!
un peu de code CSS:
CODE
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color:#FFF;
border-left:solid;
border-right:solid;
border-color: #009933;
border-width: 1px;
height:100%;
}
#header {
height: 120px;
background-color: #FFFF00;
}
#menu ul {
margin: 0px;
padding: 0px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: medium;
font-weight:bold;
color: #009933;
line-height: 27px;
background-color:#A7DA54;
}
#menu li {
list-style-type: none;
display: inline;
}
#centre {
position:absolute;
background-color:#3399FF;
margin-left: 180px;
margin-right: 180px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
vertical-align:top;
height:200px;
background-color:#9933CC;
}
#droite {
position: absolute;
right:0;
width: 150px;
height:200px;
background-color:#9933CC;
}
#pied {
position:relative;
top:100%;
height: 20px;
background-color: #FF3366;
}
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color:#FFF;
border-left:solid;
border-right:solid;
border-color: #009933;
border-width: 1px;
height:100%;
}
#header {
height: 120px;
background-color: #FFFF00;
}
#menu ul {
margin: 0px;
padding: 0px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: medium;
font-weight:bold;
color: #009933;
line-height: 27px;
background-color:#A7DA54;
}
#menu li {
list-style-type: none;
display: inline;
}
#centre {
position:absolute;
background-color:#3399FF;
margin-left: 180px;
margin-right: 180px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
vertical-align:top;
height:200px;
background-color:#9933CC;
}
#droite {
position: absolute;
right:0;
width: 150px;
height:200px;
background-color:#9933CC;
}
#pied {
position:relative;
top:100%;
height: 20px;
background-color: #FF3366;
}
et ma page:
CODE
<div id="conteneur">
<div id="header">
HEADER
</div>
<div id="menu" align="center">
<ul>
<li>OPTION 1</li>
<li>OPTION 2</a></li>
<li>OPTION 3</a></li>
</ul>
</div>
<div id="centre">
CENTRE de ma page , j'y tape ce que je veux, et en plus, ca se remet automatiquement a la ligne;)
</div>
<div id="gauche">
BANDEAU GAUCHE
</div>
<div id="droite">
BANDEAU DROITE
</div>
<div id="pied">
FOOTER</div>
</div>
<div id="header">
HEADER
</div>
<div id="menu" align="center">
<ul>
<li>OPTION 1</li>
<li>OPTION 2</a></li>
<li>OPTION 3</a></li>
</ul>
</div>
<div id="centre">
CENTRE de ma page , j'y tape ce que je veux, et en plus, ca se remet automatiquement a la ligne;)
</div>
<div id="gauche">
BANDEAU GAUCHE
</div>
<div id="droite">
BANDEAU DROITE
</div>
<div id="pied">
FOOTER</div>
</div>
Le resultat ressemble a ca:
SCHEMA 2
Mes soucis :
>le conteneur n'est a mon avis pas toujours bien centre ... peut-on arranger ca? (ca n'est pas ce qui me tracasse le plus)
>mon footer est mal place, comment resoudre ce probleme?
Merci d'avance a celles et ceux qui pendront le temps de m'aider et qui se pencheront sur mon probleme
ZN
Par contre tu peux placer des liens d'evitement (aller au menu, au contenu, recherche) pour l'accessibilité