Salut !
Puisque c'est mon premier post sur ce site que j'ai découvert il n'y a pas si longtemps, je vais tout d'abord me présenter :
Je suis rizen
, j'ai 15 ans et j'habite dans le nord (59)
J'ai poster dans ce forum car je ne savais pas quel forum choisir (Xhtml ou Css) puisque mon sujet parlera des deux en meme temps.
Voila, ça c'est fait, venons-en alors à mon problème
:
Pour commencer, j'ai eu un design : http://bibulos.perso.cegetel.net/design/design.jpg
Je dois maintenant le coder, et j'ai eu beaucoup de mal mais j'en suis arrivé là : http://bibulos.perso.cegetel.net/test.html (regarder avec mozilla firefox de préférence car il me semble que le résultat avec internet explorer n'est pas le même)
Comme vous pouvez le voir, le menu de gauche est un peu bizard et je bloque totalement pour coder le corps de la page.
Voici le Xhtml :
suivit de près par le Css :
Je ne sais pas si le début du code est bon ou s'il fait complètement le remanier.
Pouvez-vous m'aider ?
Puisque c'est mon premier post sur ce site que j'ai découvert il n'y a pas si longtemps, je vais tout d'abord me présenter :
Je suis rizen
, j'ai 15 ans et j'habite dans le nord (59)J'ai poster dans ce forum car je ne savais pas quel forum choisir (Xhtml ou Css) puisque mon sujet parlera des deux en meme temps.
Voila, ça c'est fait, venons-en alors à mon problème
:Pour commencer, j'ai eu un design : http://bibulos.perso.cegetel.net/design/design.jpg
Je dois maintenant le coder, et j'ai eu beaucoup de mal mais j'en suis arrivé là : http://bibulos.perso.cegetel.net/test.html (regarder avec mozilla firefox de préférence car il me semble que le résultat avec internet explorer n'est pas le même)
Comme vous pouvez le voir, le menu de gauche est un peu bizard et je bloque totalement pour coder le corps de la page.
Voici le Xhtml :
<!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>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="test.css" />
</head>
<body>
<div id="header">
<img src="design/images/header.jpg" alt="header" />
</div>
<div id="menu_horizontale">
<ul id="barre">
<li><a href="http://bibulos.perso.cegetel.net"><img src="design/images/accueil.jpg" alt="accueil" /></a></li>
<li><a href="http://bibulos.perso.cegetel.net"><img src="design/images/forum.jpg" alt="forum" /></a></li>
<li><a href="http://bibulos.perso.cegetel.net"><img src="design/images/actualité.jpg" alt="actualité" /></a></li>
<li><a href="http://bibulos.perso.cegetel.net"><img src="design/images/contact.jpg" alt="contact" /></a></li>
<li><a href="http://bibulos.perso.cegetel.net"><img src="design/images/liens.jpg" alt="liens" /></a></li>
<li><img src="design/images/rechercher.jpg" alt="rechercher" /></a></li>
<li><img src="design/images/rechercher1.jpg" alt="rechercher" /></li>
<li><img src="design/images/ok.jpg" alt="ok" /></li>
</ul>
</div>
<div id="menu_verticale">
<ul id="fond">
<li><img src="design/images/fond_menu.jpg" alt="fond du menu" /></li>
<li><img src="design/images/titre_menu.jpg" alt="titre du menu" /></li>
<li><img src="design/images/fond_menu2.jpg" alt="fond du menu2" /></li>
<li><img src="design/images/corps_menu.jpg" alt="corps du menu" /></li>
<li><img src="design/images/fond_menu3.jpg" alt="fond du menu3" /></li>
</ul>
</div>
</body>
</html>
suivit de près par le Css :
#header /*propriétés appartenant à la balise <div id="header"> */
{
width: 800px; /*le header fait 800 pixels de larges*/
height: 172px; /*il fait aussi 172 pixels de hauteur*/
}
#barre /*propriétés appartenant à la liste à puce du menu horizontale */
{
margin: 0px;/*la marge extérieur fait 0 pixel, le menu horizontale est donc collé au header*/
padding: 0px;/*la marge intérieur fait 0 pixel, le menu horizontale est donc collé à gauche*/
height: 25px;/*la hauteur du menu est de 25 pixels*/
}
#barre li , #barre img /*propriétés appartenant au <li> inclus dans le id="barre" ainsi que les <img /> inclus aussi dans le id="barre" */
{
border: none;/*il n'y a pas de bordure autour des images cliquables*/
float: left;/*les listes à puces ne vont pas à la ligne*/
list-style: none;/*il n'y a pas de listes à puces à côté des images*/
}
#fond
{
width: 170px;/*largeur = 158 pixels*/
margin: 0px;/*la marge extérieur fait 0 pixel, le menu horizontale est donc collé au header*/
padding: 0px;/*la marge intérieur fait 0 pixel, le menu horizontale est donc collé à gauche*/
}
#fond img, #fond li /*propriétés appartenant au <li> inclus dans le id="barre" ainsi que les <img /> inclus aussi dans le id="barre" */
{
float: left;/*les listes à puces ne vont pas à la ligne*/
list-style: none;/*il n'y a pas de listes à puces à côté des images*/
}
Je ne sais pas si le début du code est bon ou s'il fait complètement le remanier.
Pouvez-vous m'aider ?
!