Tom's Guide > Forum > Programmation > Problème de menu avec HTML et CSS

Problème de menu avec HTML et CSS

Forum Programmation : Problème de menu avec HTML et CSS

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
jeyanthan   07-06-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 !

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
cameleon1st   07-06-2007 à 19:37:29
- 0 +

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!

Répondre à cameleon1st
jeyanthan   07-06-2007 à 21:11:56
- 0 +

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 ?

Répondre à jeyanthan
cameleon1st   08-06-2007 à 08:41:01
- 0 +

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 !

Répondre à cameleon1st
jeyanthan   08-06-2007 à 09:09:04
- 0 +

Le menu quand il déconne : http://www.hiboox.com/image.php?img=p6dbegwx.jpg
Le menu normal : http://www.hiboox.com/image.php?img=im8qihjz.jpg
Le tableau tu le fais avec quel logiciel et en quel langage ? Notepad++ suffit ?

Répondre à jeyanthan
cameleon1st   08-06-2007 à 09:19:54
- 0 +

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)

Répondre à cameleon1st
jeyanthan   08-06-2007 à 09:27:50
- 0 +

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 .


Message édité par jeyanthan le 08-06-2007 à 09:31:35
Répondre à jeyanthan
cameleon1st   08-06-2007 à 09:33:16
- 0 +

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 !

Répondre à cameleon1st
DivX_666   08-06-2007 à 10:05:48
- 0 +

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 :

Code :
  1. <table>
  2. <tr><td id="top_menu">
  3. ...



CSS :

Code :
  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 @+

------------------------------ La parole est d'argent mais le silence est d'or
 Répondre à DivX_666
jeyanthan   08-06-2007 à 11:11:26
- 0 +

Citation :

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


Ou est-ce que tu mets tout ca ?


Message édité par jeyanthan le 08-06-2007 à 11:11:53
Répondre à jeyanthan
jeyanthan   08-06-2007 à 13:37:05
- 0 +

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 ^^' .

Répondre à jeyanthan
jeyanthan   08-06-2007 à 16:59:08
- 0 +

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 .

Répondre à jeyanthan
DivX_666   08-06-2007 à 17:57:37
- 0 +

D'ou l'utilite des tableaux.
Un exemple simple :

Code :
  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 :)

------------------------------ La parole est d'argent mais le silence est d'or
 Répondre à DivX_666
jeyanthan   11-06-2007 à 12:22:39
- 0 +

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 .


Message édité par jeyanthan le 11-06-2007 à 12:23:15
Répondre à jeyanthan
Leank   11-06-2007 à 12:43:13
- 0 +

si tes liens sont dans une même cellule, met un <br> entre chaque lien
(Cela renvoie a la ligne)


Message édité par Leank le 11-06-2007 à 12:43:56
Répondre à Leank
DivX_666   11-06-2007 à 20:06:48
- 0 +

Code :
  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 @+

------------------------------ La parole est d'argent mais le silence est d'or
 Répondre à DivX_666
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Problème de menu avec HTML et CSS
Aller à :

Il y a 2435 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,414 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens