[HTML;CSS ] Menu

Marsh Posté le 10-06-2007 à 20:51:23

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 .
J'ai remarquer recemment que le menu bougeait verticalement si je diminuait la taille de la fenetre .
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 :

body
{
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;
}

J'ai tout mis sur un serveur pour pouvoir le tester mais cela a empirer : http://jeya91.ifrance.com/

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

Reply

Marsh Posté le 10-06-2007 à 20:51:23

Reply

Marsh Posté le 10-06-2007 à 22:06:20

position:absolute;
T'as pas besoin de ce genre de choses...
Vas voir des site comme openweb, alsacreation, etc. Et regarde comment ils proposent de mettre en place le genre de présentation assez classique que tu cherche à créer.

Et puis... T'as jamais entendu parler des listes? Ton menu est une liste, pas besoin de mettre un div pour chaque éléments!

Message édité par dwogsi le 10-06-2007 à 22:06:43

---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/

Reply

Marsh Posté le 10-06-2007 à 22:17:46

Peux-tu me donner un exemple pour faire la liste , car je ne vois pas comment faire apres avec le CSS .
Merci !

Reply

Marsh Posté le 10-06-2007 à 23:40:31

coucou

Code :

<div id="menu">
<ul>
<li><a href="menu1"><img src="menu1.gif" /></a></li> ==>> pense à fermer tes balises img !!
<li><a href="menu2">Menu 2</a></li>
</ul>
</div>

Code :

#menu {}
#menu ul {}
#menu ul li {}
#menu a {}

ca te suffira ou je détaille plus ?
et un conseil : utilise notepad++, c'est plus pratique de blocnote

Message édité par dartyduck le 10-06-2007 à 23:42:13

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

Reply

[HTML;CSS ] Menu

Sujets relatifs:

Leave a Replay