Bonjour,
Je débute depuis peu le Css, et j'ai à ma charge la réalisation et la mise en page du design d'un site web.
Je dois effectuer la mise en forme suivante:
( Fais sous Paint en 5 / 5 ne faites pas gaffe [smile] )
Pour cela j'ai déja fais le code CSS suivant:
Code :
- <style type="text/css">
- /* CSS issu des tutoriels css.alsacreations.com */
- body {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 0.8em;
- margin: 0;
- padding: 0;
- }
- #header {
- height: 202px;
- }
- #conteneur {
- position: absolute;
- width: 800px;
- left: 50%;
- margin-left: -400px;
- }
- #centre {
- margin-left: 153px;
- margin-right: 153px;
- }
- #gauche {
- position: absolute;
- left:0;
- width: 153px;
- background-image:url(images/middle.JPG);
- }
- #droite {
- position: absolute;
- right:0;
- width: 153px;
- background-image:url(images/middle.JPG);
- }
- #pied {
- height: 51px;
- background-image:url(images/copyright.jpg);
- }
- .menugauche {
- list-style-type: none;
- margin: 0;
- padding:0;
- }
- .menugauche li {
- margin-bottom: 5px;
- }
- .menugauche a {
- margin: 0 4px;
- color: #000000;
- text-decoration: underline;
- }
- .menugauche a:hover {
- text-decoration: none;
- }
- .menudroit {
- list-style-type: none;
- margin: 0;
- padding:0;
- }
- .menudroit li {
- margin-bottom: 5px;
- }
- .menudroit a {
- margin: 0 4px;
- color: #000000;
- text-decoration: underline;
- }
- .menudroit a:hover {
- text-decoration: none;
- }
- p {margin: 0 0 10px 0;}
- </style>
|
ainsi que le code html allant avec :
Code :
- <div id="conteneur">
- <div id="header">
- <object type="application/x-shockwave-flash" data="images/Entete.swf" width="800" height="202">
- <param name="movie" value="images/Entete.swf" />
- <param name="wmode" value="transparent" />
- <p>Image ou texte alternatif</p>
- </object>
- </div>
- <div id="gauche"><p>menu</p>
- <p>largeur fixe : 150px</p>
-
- <ul class="menugauche">
- <li><a href="">Menu 1</a></li>
- <li><a href="">Menu 2</a></li>
- <li><a href="">Menu 3</a></li>
- <li><a href="">Menu 4</a></li>
- </ul>
- <p> </p>
- <p> </p>
- <p> </p>
- </div>
-
- <div id="droite"><p>droite</p>
- <p>largeur fixe : 150px</p>
-
- <ul class="menudroit">
- <li><a href="">Menu 1</a></li>
- <li><a href="">Menu 2</a></li>
- <li><a href="">Menu 3</a></li>
- <li><a href="">Menu 4</a></li>
- </ul>
- <p> </p>
- <p> </p>
- <p> </p>
- </div>
-
- <div id="centre">
- 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<br />
- </div>
-
- <div id="pied">pied de page</div>
- </div>
|
Ce qui donne ceci : Cliquez la
Mais voilà, premièrement je ne trouve pas comment rajouter les "tops" et les "bas" des menus sur les cotés de manière fixe.
Et deuxièmement, je rencontre le problème suivant: Cliquez la lorsque je veux rajouter du texte, les menus ne s'étirent pas avec la box centrale.
Comment Faire ??
Merci à l'avance pour vos réponses, si mon problème n'est pas assez clair demandez moi quels points voulez vous que je détaille.
Cordialement,
DJo