[HTML; CSS ]

Fermé
Jeya91 Messages postés 2 Date d'inscription jeudi 7 juin 2007 Statut Membre Dernière intervention 8 juin 2007 - 7 juin 2007 à 21:26
Jeya91 Messages postés 2 Date d'inscription jeudi 7 juin 2007 Statut Membre Dernière intervention 8 juin 2007 - 8 juin 2007 à 11:51
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 : https://www.hiboox.com
Alors que normalement ca donne ca : https://www.hiboox.com
Le menu marche bien sur les autres pages mais sur cette page elle déconne .
Je vous passe le code :
<!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


{
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 !

3 réponses

Jeya91 Messages postés 2 Date d'inscription jeudi 7 juin 2007 Statut Membre Dernière intervention 8 juin 2007 1
8 juin 2007 à 11:51
C'est a dire comme ca => ?
<div id="menu">
id="menu_01"><img src="menu_01.gif">
id="menu_02"><img src="menu_02.gif">
id="menu_03">
<a href="designsite.html"> <img src="menu_03.gif"></a>
id="menu_04"><img src="menu_04.gif">
id="menu_05"><img src="menu_05.gif">
id="menu_06">
<a href="author.html"> <img src="menu_06.gif"></a>
id="menu_07"><img src="menu_07.gif">
id="menu_08">
<a href="photos.html"> <img src="menu_08.gif"></a>
id="menu_09"><img src="menu_09.gif">
id="menu_10">
<a href="meteo.html"> <img src="menu_10.gif"></a>
id="menu_11"><img src="menu_11.gif">
id="menu_12">
<a href="liens.html"> <img src="menu_12.gif"></a>
id="menu_13"><img src="menu_13.gif">
</div>

Et voila le code sur la page qui marche =

<!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="photos" href="photos.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="___"></a><br/>
<a href="videos.html"><img src="___"></a><br/>
</div>

</div>

<div id="corps">
<h1>Photos</h2>
<a href="slide/parisnight.html" target="_blank"> bla bla bla </a>
</div>

<div id="pied_de_page">

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

</body>
</html>

Et le CSS =
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 h1
{
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;
}

Merci d'avance !
1
.nono. Messages postés 90 Date d'inscription jeudi 7 juin 2007 Statut Membre Dernière intervention 3 juillet 2007 17
7 juin 2007 à 21:41
Bonjour !

Il me faudrais le code de la page qui marche bien (je suppose que celui donné est celui de la page qui marche pas...) car avec ça on peut rien faire :/

Et j'ai une question : Quel navigateur utilise-tu dans la photo 1 ?
0
salut. j'ai une petite question à propos de ceci :
</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>

Si j'ai bien compris tu as utilisé une balise <div></div> pour chaque bouton du menu. Pourquoi n'utilises-tu pas une seule balise <div> pour tous les boutons de ton menu ?? ensuite tu as juste à utiliser du css sur cette div.
0