Se connecter / S'enregistrer
Votre question

Problème de menu avec HTML et CSS

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
7 Juin 2007 18:04:24

Bonjour à tous et à toutes !
J'ai fait un menu sur photoshop, j'ai découpé, enregistré, codé sur notepad++ en html et CSS . Voila le résultat : http://www.hiboox.com/image.php?img=p6dbegwx.jpg
Alors que normalement ca donne ca : http://www.hiboox.com/image.php?img=im8qihjz.jpg
Le menu marche bien sur les autres pages mais sur cette page elle déconne .
Je vous passe le code :
Citation :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="designsite" href="radio.css" />
</head>
<body>
<div id="en_tete">

</div>

<div id="menu">
<div id="menu_01"><img src="menu_01.gif">
</div>
<div id="menu_02"><img src="menu_02.gif"></div>
<div id="menu_03">
<a href="designsite.html"> <img src="menu_03.gif"></a>
</div>
<div id="menu_04"><img src="menu_04.gif">
</div>
<div id="menu_05"><img src="menu_05.gif">
</div>
<div id="menu_06">
<a href="author.html"> <img src="menu_06.gif"></a>
</div>
<div id="menu_07"><img src="menu_07.gif">
</div>
<div id="menu_08">
<a href="photos.html"> <img src="menu_08.gif"></a>
</div>
<div id="menu_09"><img src="menu_09.gif">
</div>
<div id="menu_10">
<a href="meteo.html"> <img src="menu_10.gif"></a>
</div>
<div id="menu_11"><img src="menu_11.gif">
</div>
<div id="menu_12">
<a href="liens.html"> <img src="menu_12.gif"></a>
</div>
<div id="menu_13"><img src="menu_13.gif">
</div>
</div>
<div id="menu2">
<div class="element_menu2">

<h3>Multimedia</h3>
<a href="radio.html"><img src="http://img486.imageshack.us/img486/7897/radiozv2.jpg"></a><br/>
<a href="videos.html"><img src="http://img518.imageshack.us/img518/4946/videostx6.jpg"></a><br/>
</div>

</div>
<div id="corps">
<h2>Météo</h2>
<p>blabla</p>
</div>

<div id="pied_de_page">
<p>Copyright "--------" 2007, tous droits réservés</p>
</div>

</body>
</html>

Et voila le CSS
Citation :

{
font-size: 15px;
font-family: "Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS", Verdana, serif;
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
#en_tete
{
width: 758px;
height: 110px;
background-image: url("---------");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu
{

float: left;
width: 125px;
}
#menu_01
{
position:absolute;
top:140px;
left:121px;
float: left;
}
#menu_02
{
position:absolute;
top:183px;
left:121px;
float: left;
}
#menu_03
{
position:absolute;
top:183px;
left:151px;
float: left;
}
#menu_04
{
position:absolute;
top:183px;
left:235px;
float: left;
}
#menu_05
{
position:absolute;
top:197px;
left:151px;
float: left;
}
#menu_06
{
position:absolute;
top:213px;
left:151px;
float: left;
}
#menu_07
{
position:absolute;
top:227px;
left:151px;
float: left;
}
#menu_08
{
position:absolute;
top:243px;
left:151px;
float: left;
}
#menu_09
{
position:absolute;
top:256px;
left:151px;
float: left;
}
#menu_10
{
position:absolute;
top:272px;
left:151px;
float: left;
}
#menu_11
{
position:absolute;
top:287px;
left:151px;
float: left;
}
#menu_12
{
position:absolute;
top:303px;
left:151px;
float: left;
}
#menu_13
{
position:absolute;
top:329px;
left:151px;
float: left;
}
#corps
{
margin-left: 145px;
margin-bottom: 20px;
padding: 5px;

color: #000000;
background-color: #C9CBE9;
background-repeat: repeat-x;
border: 2px solid black;
}
#corps
{
color: #000000;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#pied_de_page
{
padding: 5px;

text-align: center;

color: #000000;
background-color: #C9CBE9;
background-repeat: repeat-x;

border: 2px solid black;
}
img
{
border-style: none;
}
#menu2
{

position:absolute;
top:70%;
left:122px;

float: left;
width: 125px;
}

.element_menu2
{
background-color: #C9CBE9;
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px;
padding: 12px;
text-align: center;
}
.element_menu2 h3
{

font-family: "Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS", Verdana, serif;
text-align: center;
}

.element_menu2 ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu2 a /
{
color: #000000;
}

.element_menu2 a:hover
{
background-color: #B3B3B3;
color: black;
}

Voila j'espere qu'il y a tout pour résoudre mon problème , merci d'avance !

Autres pages sur : probleme menu html css

7 Juin 2007 19:37:29

Je ne comprends pas trop, tu cherches bien a faire un menu, mais avec des boutons avec des liens hypertexte? Si c'est le cas moi je ne travaillerai pas avec une css poru la mise en page, mais avec des tableaux : plus simple, rapide et moins prise de tête!
7 Juin 2007 21:11:56

Ouais je veux faire un menu que j'ai fait sur photoshop .
Mais j'ai mis les positions de chaque partie du menu avec le CSS sur le site .
Mais le problème est que le menu s'affiche sur des pages mais sur une autre elle ne marche pas .
Comment fais tu avec les tableaux ?
Contenus similaires
8 Juin 2007 08:41:01

Quand tu dis que le menu marche sur une page mais pas sur une autre, est ce qu'il serait possible de voir l'exemple sur le site ?
Les tableaux sinon c'est bien simple : tu te crée un squelette en te faisant un tableau avec par exemple une cellulle pour le header (banniere ...) une cellule pour le menu (tu insert ici tes images bouton), une cellule contenu, et un footer (avec copyrights ...) Voilà ce n'est qu'un exemple.
Apres pour ne pas avoir les bordure, n'y les les espaces entre les cellules, tu peux passer dans ton tableaux les parametres suivants : <table border="0" cellpadding="0" cellspacing="0">

Pour plus de précisions n'hésite pas à poser des questions !
8 Juin 2007 09:19:54

ce que j'entends par site c'est une page web, pas une image : il me faut du code pour comprendre ce qui ne va pas.
Tu peux tout faire avec note pad, mais bon ca va 2 minutes, surtout pour la mise en page ! Tu me dis avoir photoshop .. hum tu dois surement avoir dreamweaver no ? (on se comprend je crois). Je te recommande dreamweaver pour faire la mise en page : ca aide (surtout pour les colspan, on s'y perd rapidement : lui te le fait tout seul)
8 Juin 2007 09:27:50

Je peux pas te montrer le site parce qu'il est pas mis en ligne .
Je le programme sur mon ordi sans le mettre sur un serveur et quand j'aurais fini il le sera ^^.
Et non je n'ai pas dreamweaver .
8 Juin 2007 09:33:16

Je te recommande travailler sur un serveur ou au moins local, comme ca quand tu auras a faire a du php, tu pourras travailler ! Sinon tu met jsute en ligne la page qui va et celle qui va pas et avec la petite css =) ou sinon donne moi les codes des pages !
8 Juin 2007 10:05:48

Slt,
+1 pour cameleon1st et ses tableau :D 
mais par contre absolument inutile d'utiliser dreamweaver ou un autre car il rajoute trop de code inutile lorsue l'on rajoute quoi que se soit. Notepad++ suffit amplement pour creer un tableau.
Apre deux trois memo, un tableau est tres simple.

colspan="2" => la cellule prendra 2 colonnes
rowspan="2" => la cellule prendra 2 lignes.

Ensuite pour mettre tes images de fond du menu, rien de plus simple :
HTML :
  1. <table>
  2. <tr><td id="top_menu">
  3. ...


CSS :
  1. #top_menu
  2. {
  3. background:url("image.jpg");
  4. }


Voila, les tableaux c'est magique :D  :lol: 
Si ta un probleme previen nous ;) 
bon courage @+
8 Juin 2007 11:11:26

Citation :
colspan="2" => la cellule prendra 2 colonnes
rowspan="2" => la cellule prendra 2 lignes.

Ou est-ce que tu mets tout ca ?
8 Juin 2007 13:37:05

J'ai pas compris comment tu faisais pour le code ,je viens juste d'apprendre le html et le CSS , faut pas m'en vouloir ^^' .
8 Juin 2007 16:59:08

Je viens de remarquer que mon code fait tout deconner parce que si je diminue la taille de la fenetre apres tout les menus commence a bouger et ne reste plus a leur place habituel .
Merci de bien vouloir m'aider s'il vous plait .
8 Juin 2007 17:57:37

D'ou l'utilite des tableaux.
Un exemple simple :
  1. <table border="1" width="95%">
  2. <tr><td colspan="2" width="100%">Tete du tableau</td></tr>
  3. <tr><td width="50%">Colonne 1 ligne 1</td><td width="50%">Colonne 2 ligne 1</td></tr>
  4. <tr><td width="50%">Colonne 1 ligne 2</td><td width="50%">Colonne 2 ligne 2</td></tr>
  5. <tr><td colspan="2">Pied du tableau</td></tr>
  6. </table>


Voila si tu reflechis avec ce tableau tu devrai pouvoir faire tout les tableau que tu veux :) 

@+ bon courage
Si ta des probleme ba . . . tu sait ou venir :) 
11 Juin 2007 12:22:39

Bonjour et merci DivX_666 pour toutes tes réponses !
Mais il ya un truc qui me tracasse .
Je n'arrive pas a faire un tableau ( pour le menu ) ressemblant a ca : http://www.hiboox.com/image.php?img=nnb1kp63.jpg .
J'ai essayer sous differentes formes mais il me met tout les liens sur une ligne .
Merci de bien vouloir m'aider s'il vous plait .
11 Juin 2007 12:43:13

si tes liens sont dans une même cellule, met un <br> entre chaque lien
(Cela renvoie a la ligne)
11 Juin 2007 20:06:48

  1. <table border="1">
  2. <tr><td colspan="3">TETE</td></tr>
  3. <tr><td rowspan="8">GAUCHE</td><td>milieu1</td><td rowspan="8">DROITE</td></tr>
  4. <tr><td>milieu2</td></tr>
  5. <tr><td>milieu3</td></tr>
  6. <tr><td>milieu4</td></tr>
  7. <tr><td>milieu5</td></tr>
  8. <tr><td>milieu6</td></tr>
  9. <tr><td>milieu7</td></tr>
  10. <tr><td>milieu8</td></tr>
  11. </table>


Voila @+
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS