Problèmes (x)HTML/CSS pour mon site

Menu horizontal, site en local, ...

16 février 2006 à 14:34:52

Bonjour à tous, moi c'est nicko, j'ai 16 ans et quelques problèmes pour coder mon site qui servira lors de mon passage a l'oral de mon TPE

En effet, je butte actuellement sur la création de mon menu horizontal.. Voilà mon site : http://nickolabs.free.fr

Le code (x)HTML :

Citation : 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>:: Nicko.studio ::</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="nickolabs, graphisme, graphizm, photoshop, design, graphique, graphik, dessin, xhtml, css, graph, graf, tutos, créations, création, creation, creations, galerie"/>
<meta name="description" content="Nicko.studio est un site/portefolio présentant des créations graphiques." />

<link rel="stylesheet" media="screen" type="text/css" title="nickolabs" href="../tpebarrages.css" />

</head>

<body>
<div id="Header">
</div>

<div id="menu">
<a class="bouton01" title="Accueil du site" href="index.htm"></a>
<a class="bouton02" title="Introduction du TPE" href="introduction.htm"></a>
</div>

<div id="corps">
</div>

</body>

</html>

Et le CSS :

Citation : CSS

body {
background-color: #fff;
background-image: url(arriere-planrayures.jpg);
margin: 0;
top: 0px;
}

#Header {
background-image: url(Headergif.gif);
margin: auto;
border: none;
width: 778px;
height: 174px;
top: 10px;
}

#menu {
background-image: url(Barremenu.png);
margin: auto;
top: 192px;
width: 778px;
height: 19px;
border: none;
}

#corps {
background-image: url(Corps.png);
margin: auto;
top: 211px;
width: 778px;
height: 554px;
border: none;
}

a.bouton01 {
display: block;
width: 120px;
height: 16px;
background-image: url(BoutonAccueil.png);
background-repeat: no-repeat;
margin-left: 5%;
}

a.bouton01:hover {
background-image: url(BoutonAccueilHover.png);
margin-left: 5%;
}

a.bouton02 {
display: block;
width: 120px;
height: 16px;
background-image: url(BoutonIntroduction.png);
background-repeat: no-repeat;
left: 20%;
}

a.bouton02:hover {
background-image: url(BoutonIntroductionHover.png);
left: 20%;
top: 1px;
}

Malheureusement je ne suis pas sûr de la manière dont je crée mon menu horizontal, avec des boutons à rollover. De plus comme vous voyez quand vous allez sur mon site, mon premier bouton passe bien mais l'autre se place en dessous bizaremment.. Ca doit venir du code xhtml mais je ne vois pas comment mettre en place mon menu horizontale dans le code xhtml ( comme j'ai fais, ou mettre des div dans le div du menu ou autre ? o_O

).. Si vous avez un conseil à me donner ou si vous savez comment faire un menu horizontal avec boutons a rollover, relativement simplement, adaptable a toute résolution, je veux bien

. Merci d'avance

Enfin, dans cette salle d'orale pour le TPE, je n'aurais pas acces a internet, et donc il faut que je mette mon site sur clé usb et donc que je le fasse en local.. Actuellement toutes mes images sont dans le meme dossier, mais quand j'ouvre en local mon index.htm, par exemple, rien ne s'affiche.. Normal ? Des conseils ?

jp949

16 février 2006 à 14:42:42

pour le menu horizontal utilises une liste a puce pour positionner tes boutons
#menu ul { list-style:none; margin:0; width: largeur a definir par toi; }
#menu li {float:left; margin:0; }

neoxx78

16 février 2006 à 14:45:07

Je te donne des tutos qui vont surement t'aider ...
Pour la conception général celui-ci : Un menu horizontal
Pour le roll-over (d'ailleurs tu dois surement le connaitre car ton roll-over marche très bien mais sait ton jamais

) :
Alsacréations : Image réactive en CSS

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Nicko

16 février 2006 à 15:40:01

Merci beaucoup a vous

En effet, j'avais utilisé le tuto d'alsacréation pour le rollover

Grace a ton tutoriel, j'ai pu avancer un peu, ca ressemble a quelque chose maintenant

:
http://nickolabs.free.fr
Mais j'aimerais que mon premier bouton "Accueil" se place plus a droite, au niveau du bord bleu marine du header, comment faire ?

Et puis pour le rollover j'ai mis ça, mais pas de résultat :

div#menu a.boutonaccueil:hover {
background-image: url(BoutonAccueilHover.png);
border: none;
}

div#menu a.boutonintro:hover {
background-image: url(BoutonIntroductionHover.png);
border: none;
}

Un conseil ?

Ca me fait plaisir d'avancer car j'ai un timing assez serré

Encore merci.
Nicko

jp949

16 février 2006 à 15:49:11

pour placer le bouton plus a droite #menu ul {margin-left:20px; }
pour le rollover faut appliquer la class a la balise<a> pas a <li>

Nicko

16 février 2006 à 16:48:19

Merci , c'est bon, sur le net ça marche

Mais en local, bien que je modifie tous mes chemins d'accès aux images et aux différentes pages .htm, ca ne marche pas.. Quand je clique sur index.htm, je vois seulement ça :

Image utilisateur

Comment puis-je faire pour pouvoir afficher mon site en local de meme façon que sur le net ? Je ne comprend pas pourquoi ça me fait ce résultat là.. :euh:

Merci,
Nicko.

jp949

16 février 2006 à 16:50:07

c'est le chemin de ton fichier css qui n'est pas bon

Nicko

16 février 2006 à 17:02:57

C'est ce que je viens de penser

Pourtant il a l'air bon.
Il est sous cette forme : C:\TPE\tpebarrages1.css

Voilà mon code, histoire d'illustrer, vous pourrez peut-etre m'en dire plus.

<!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>:: Nicko.studio ::</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="nickolabs, graphisme, graphizm, photoshop, design, graphique, graphik, dessin, xhtml, css, graph, graf, tutos, créations, création, creation, creations, galerie"/>
<meta name="description" content="Nicko.studio est un site/portefolio présentant des créations graphiques." />

<link rel="stylesheet" media="screen" type="text/css" title="nickolabs" href="C:\TPE\tpebarrages1.css" />

</head>

<body>
<div id="Header">
</div>

<div id="menu">
<ul>
<li class="boutonaccueil"><a href="C:\TPE\index.htm"><img src="C:\TPE\BoutonAccueilHover.png" alt="accueil" /></a></li>
<li class="boutonintro"><a href="C:\TPE\introduction.htm"><img src="C:\TPE\BoutonIntroductionHover.png" alt="intro"/></a></li>
<li class="boutonplan"><a href="C:\TPE\plan.htm"><img src="C:\TPE\BoutonPlan.png" alt="plan"/></a></li>
<li class="boutondossier"><a href="C:\TPE\dossier.htm"><img src="C:\TPE\BoutonDossier.png" alt="dossier"/></a></li>
<li class="boutonlexique"><a href="C:\TPE\lexique.htm"><img src="C:\TPE\BoutonLexique.png" alt="lexique"/></a></li>
</ul>
</div>

<div id="corps">
</div>

</body>

</html>

Et voilà la partie du code CSS où il y'a des liens :

body {
background-color: #fff;
background-image: url(C:\TPE\arriere-planrayures.jpg);
margin: 0;
top: 0px;
}

#Header {
background-image: url(C:\TPE\Headergif.gif);
margin: auto;
border: none;
width: 778px;
height: 174px;
top: 10px;
}

#menu {
background-image: url(C:\TPE\Barremenu.png);
margin: auto;
top: 192px;
width: 778px;
height: 19px;
border: none;
}

#corps {
background-image: url(C:\TPE\Corps.png);
margin: auto;
top: 211px;
width: 778px;
height: 554px;
border: none;
}

Peut-etre qu'il faut rajouter quelque chose avant C:\, je ne sais pas.. a vous de me le dire

Merci de prendre du temps pour m'aider,
Nicko.

neoxx78

16 février 2006 à 17:24:39

Bizarre que tu fasses des liens comme ça

Moi je prefére les liens relatfs comme ça design/index.css ... chacun ses gouts

Comme jp149 l'a deja dis, c'est le lien vers ton CSS qui déconne...
Essaye de partir de ton fichier html et pose toi la question : qu'est le chemin dois-je prendre pour aller au CSS ...

Sinon il y a pas de guillemets sur tes liens dans le CSS
ex :

url(C:\TPE\Barremenu.png);

c'est normal ?

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Nicko

16 février 2006 à 18:00:43

Ah je suis content

j'ai réussi. De 1, tous mes fichiers étaient dans le même dossier donc pour les liens il suffisait de mettre <a href="index.htm"> . Ensuite le chemin du CSS posait problème, c'est la même chose, il fallait mettre seulement : href="tpebarrages1.css" /> . C'est assez bete en effet, mais il me semble que desfois il y'a "../" avant le nom du fichier CSS.. Encore une broutille qui me cause des probs

Et pour les guillemets aux liens, il me semble que ça ne change rien.
Merci beaucoup a vous.. j'espère ne plus trop avoir de problèmes

Nicko.

EDIT :
Vu qu'on en a jamais fini avec les CSS, j'ai encore un problème.. Maintenant que le design est en place, je voudrais intégrer le contenu, c'est a dire, pouvoir mettre du texte dans mon site.. J'ai essayé, en écrivant un petit truc, mais ça me donne ce résultat la : http://nickolabs.free.fr/TPE/index1.htm
Un décalage est apparu entre l'image de mon header et celle du corps.. Pourquoi ? Je pensais à une mauvaise découpe du design au début, mais si vous avez une idée dessus, je veux bien

jp949

17 février 2006 à 6:33:18

c'est du au <p> que tu as mis en debut.
faut mettre un element auquel tu attribues un margin-top:0;

Nicko

17 février 2006 à 14:31:08

C'est fait merci beaucoup de ton aide