Bonjour à tous c'est mon premier site que je réalise et plus j'avance plus j'arrive a faire face au problème que je rencontre (de compatibilité entre autre) mais la j'y arrive vraiment pas.
Au début j'ai mit un float:left àla div qui englober tout les menus ca marcher pas alors j'ai essayer un float:left sur toutes les div des menus à gauche et bizzarement ca marche sur opera et ff mais pas sur IE (comme d'hab vous me dirais) etant assez débutant j'ai essayer plein de truc mais en vain. Si vous avez une idée ?
body{
background:url(images/header.jpg) no-repeat top center #000000;
font-family:Georgia, Verdana, Geneva, sans-serif;
font-size:13px;
}
/*/////////////////////////////////////
Le conteneur
/////////////////////////////////////*/
#conteneur{
width:900px;
height:auto;
min-height:550px;
margin:0;
padding:0;
margin:186px auto 0;
}
/*/////////////////////////////////////
Le menu du haut
/////////////////////////////////////*/
#menu_h{
width:480px;
height:28px;
margin-left:300px;
}
#menu_h ul li{
float:right;
padding:0;
list-style:none;
}
#menu_h ul li a{
height:28px;
width:110px;
font-size:14px;
line-height:24px;
display:block;
text-decoration:none;
text-align:center;
color:#75a70b;
background-repeat:no-repeat;
background-position:bottom left;
}
#menu_h ul li a:hover{
height:28px;
width:110px;
line-height:24px;
text-decoration:underline;
text-align:center;
color:#000000;
background-repeat:no-repeat;
background-position:top left;
font-weight:bold;
}
#menu_h ul li a.jaune{
background-image:url(images/buttons.png);
}
#menu_h strong{
color:#000000;
}
/*/////////////////////////////////////
Le menu de gauche
/////////////////////////////////////*/
#menu_g{
width:146px;
height:auto;
margin-left:15px;
float:left;
}
#menu_g_1{
width:144px;
height:192px;
float:left;
}
#menu_g_h_1{
width:144px;
height:13px;
background:url(images/menu_h.png) no-repeat top center;
float:left;
}
#menu_g_l_1{
width:144px;
height:auto;
line-height:19px;
float:left;
}
ul#menu {
margin:0;
padding:0;
float:left;
}
ul#menu li {
margin-bottom:0px;
float:left;
}
ul#menu a {
width:144px;
height:24px;
display:block;
text-align:center;
font-weight:bold;
text-decoration:none;
color:#000000;
background:url(images/menu_list.png) no-repeat top center;
float:left;
}
ul#menu a:hover {
background:url(images/menu_list_hover.png) no-repeat top center;
text-decoration:underline;
font-weight:bold;
float:left;
}
ul#menu a:active {
background:url(images/menu_list_hover.png) no-repeat top center;
text-decoration:underline;
font-weight:bold;
float:left;
}
#menu_g_b_1{
width:144px;
height:10px;
background:url(images/menu_b.png) no-repeat top center;
float:left;
}
#menu_g_2{
width:144px;
height:auto;
line-height:19px;
margin:13px 0 0;
float:left;
}
#menu_g_h_2{
width:144px;
height:13px;
background:url(images/menu_h.png) no-repeat top center;
float:left;
}
#menu_g_img_h_2{
width:144px;
height:5px;
background:url(images/menu_img_h.png) no-repeat top center;
float:left;
}
#menu_g_img_2{
padding:4px 0 2px;
width:144px;
height:auto;
background:url(images/menu_img.png) repeat-y top center;
float:left;
}
#menu_g_img_b_2{
width:144px;
height:8px;
background:url(images/menu_img_b.png) no-repeat top center;
float:left;
}
#menu_g_b_2{
width:144px;
height:11px;
background:url(images/menu_b.png) no-repeat top center;
float:left;
}
#menu_g_3{
width:144px;
height:auto;
line-height:19px;
margin:13px 0 0;
float:left;
}
#menu_g_h_3{
width:144px;
height:13px;
background:url(images/menu_h.png) no-repeat top center;
float:left;
}
#menu_g_img_h_3{
width:144px;
height:5px;
background:url(images/menu_img_h.png) no-repeat top center;
float:left;
}
#menu_g_img_3{
padding:4px 0 2px;
width:144px;
height:auto;
background:url(images/menu_img.png) repeat-y top center;
float:left;
}
#menu_g_img_b_3{
width:144px;
height:8px;
background:url(images/menu_img_b.png) no-repeat top center;
float:left;
}
#menu_g_b_3{
width:144px;
height:11px;
background:url(images/menu_b.png) no-repeat top center;
float:left;
}
/*/////////////////////////////////////
Le corps
/////////////////////////////////////*/
#corps{
width:712px;
height:auto;
margin:0 0 0 165px;
}
#corps_h{
width:712px;
height:19px;
background:url(images/corps_h.png) no-repeat bottom center;
}
#corps_m{
}
#corps_m_1{
}
#corps_m_1{
}
#corps_m_h_1{
}
#corps_m_txt_1{
}
#corps_m_b_1{
}
#corps_m_2{
}
#corps_m_h_2{
}
#corps_m_txt_2{
}
#corps_m_b_2{
}
#corps_b{
}
<!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>-R.eggae-</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
.style1 {font-family: Geneva, Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<!----------------------------------------------------------------------
Le conteneur
----------------------------------------------------------------------->
<div id="conteneur">
<!-- Tout le site est dedans -->
<!----------------------------------------------------------------------
Le menu du haut
----------------------------------------------------------------------->
<div id="menu_h">
<!-- C'est le menu en haut à droite-->
<ul>
<li><a class="jaune" href="#">WEBRADIO</a></li>
<li><a class="jaune" href="#">TCHAT</a></li>
<li><a class="jaune" href="#">FORUM</a></li>
<li><a class="jaune" href="#"><strong>NEWS</strong></a></li>
</ul>
</div>
<!----------------------------------------------------------------------
Le menu de gauche
----------------------------------------------------------------------->
<div id="menu_g">
<!-- C'est les menus à gauche-->
<div id="menu_g_1">
<!-- C'est le menu en haut à gauche n°1-->
<div id="menu_g_h_1">
<!-- C'est l'image du haut pour le menu gauche-->
</div>
<div id="menu_g_l_1">
<!-- C'est l'image de la liste pour le menu gauche-->
<ul id="menu">
<li><a href="#">La Jamaique</a></li>
<li><a href="#">Le Reggae</a></li>
<li><a href="#">Les Artistes</a></li>
<li><a href="#">Musiques</a></li>
<li><a href="#">Livre d'Or</a></li>
<li><a href="#">Boutique</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="menu_g_b_1">
<!-- C'est l'image du bas pour le menu gauche-->
</div>
</div>
<div id="menu_g_2">
<!-- C'est le menu en haut à gauche n°2-->
<div id="menu_g_h_2">
<!-- C'est l'image du haut pour le menu gauche-->
</div>
<div id="menu_g_img_h_2">
<!-- C'est l'image du haut pour le menu gauche-->
</div>
<div id="menu_g_img_2">
<!-- C'est le fond menu pour le menu gauche-->
<div align="center">
<!-- C'est le fond menu pour le menu gauche-->
<img src="images/image1.jpg" alt="" width="135" height="66" />
</div>
</div>
<div id="menu_g_img_b_2">
<!-- C'est l'image du haut pour le menu gauche-->
</div>
<div id="menu_g_b_2">
<!-- C'est l'image du bas pour le menu gauche-->
</div>
</div>
<div id="menu_g_3">
<!-- C'est le menu en haut à gauche n°2-->
<div id="menu_g_h_3">
<!-- C'est l'image du haut pour le menu gauche-->
</div>
<div id="menu_g_img_h_3">
<!-- C'est l'image du haut pour le menu gauche-->
</div>
<div id="menu_g_img_3">
<!-- C'est le fond menu pour le menu gauche-->
<div align="center">
<!-- C'est le fond menu pour le menu gauche-->
<img src="images/image2.png" alt="" width="135" height="171" />
</div>
</div>
<div id="menu_g_img_b_3">
<!-- C'est l'image du haut pour le menu gauche-->
</div>
<div id="menu_g_b_3">
<!-- C'est l'image du bas pour le menu gauche-->
</div>
</div>
<!----------------------------------------------------------------------
Le corps
----------------------------------------------------------------------->
<div id="corps">
<!-- C'est ici qu'il y à le contenu du site-->
<div id="corps_h">
<!-- L'arrondi jaune en haut du corps-->
</div>
<div id="corps_m_1">
<!-- C'est ici qu'il y à le contenu du site-->
<div id="corps_m">
<div id="corps_m_1">
<!-- C'est le contenu du premier paragraphe-->
<div id="corps_m_h_1">
<!-- L'image arrondi du haut du contenu paragraphe-->
</div>
<div id="corps_m_txt_1">
<!-- Contenu du paragraphe 1-->
</div>
<div id="corps_m_b_1">
<!-- L'image arrondi du bas du contenu paragraphe-->
</div>
</div>
<div id="corps_m_2">
<!-- C'est le contenu du deuxième paragraphe-->
<div id="corps_m_h_2">
<!-- L'image arrondi du haut du contenu paragraphe-->
</div>
<div id="corps_m_txt_2">
<!-- Contenu du paragraphe 2-->
</div>
<div id="corps_m_b_2">
<!-- L'image arrondi du bas du contenu paragraphe-->
</div>
</div>
</div>
</div>
<div id="corps_b">
<!-- L'arrondi jaune en bas du corps-->
</div>
</div>
</div>
</body>
</html>
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
