Inscris-toi au e-camp "Héberge ton jeu Facebook sur Azure" de Microsoft vendredi 25 mai à 13h30 !

> Le Site du Zéro - Informatique

> Les forums

> Site Web

> HTML / CSS

> menu décalé

> Lecture du sujet

menu décalé

Pour accéder à cette section
Connectez-vous !

Page 1

Auteur

Message

1 visiteur sur ce sujet (1 Anonyme)

Page 1

ouestside

# Posté le 29/10/2009 à 10:20:06

Bonjour, alors voila j'ai un probleme avec mon menu, il sort du contenu mon site j'ai bon toucher au t'aille etc rien ne change je trouve pas de solution..

Le site : http://guildeouest.tonsite.biz/

CSS Du site

Code : CSS

html, body {
	margin: 0;
	background: url(images/background.jpg) repeat #cacaca top center;
	text-align: center;
	font-family: Verdana, Arial , sans-serif;
	font-size : 12px;
	color : #333333;
	padding: 0 0px 0 0;
}
div#body2 {
	width: 850px;
	margin: 0 auto;
	padding: 2px 0 !important;
	padding: 2px 0;
	text-align: left;
	background: url(images/background_body.jpg) white repeat-y top center;
}
ul#navigation {
	display: none;
}

h1#titre_site {
	width: 962px;
	height: 219px;
	margin: 0px auto !important;
	margin: 5px 22px;
	padding: 0;
	background: url(images/background_titre.jpg) no-repeat top center;
	font-size : 12px;
	text-indent: -5000px;
}

p#basgoogle {
	width: 850px;
	height: 22px;
	margin: 0px auto !important;
	margin: 5px 22px;
	padding: 0;
	background: url(images/bas_google.jpg) no-repeat top center;
	font-size : 12px;
	text-indent: -5000px;
}

p#basheader {
	width: 850px;
	height: 10px;
	margin: 0px auto !important;
	margin: 5px 22px;
	padding: 0;
	background: url(images/haut_contenu.jpg) no-repeat top center;
	text-indent: -5000px;
}


/* ----- ----- ----- ----- Menu ----- ----- ----- ----- */

dl#menu {
	width: 148px;
	position: absolute;
	top: 352px;
	margin: -0px 0 0 695px !important;
}
dl#menu dt {
	width: 100%;
	height: 25px;
	margin: 0;
	padding: 0 0 0 0;
	background: url(images/menu_navig.jpg) no-repeat top center;
	text-align : center;
	font-weight: bold;
	color: #996633;
	font-size : 11px;
}

dl#menu dt2 {
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0 0 0 0;
	background: url(images/Sans titre 1.jpg) no-repeat top center;
	text-align : center;
	font-weight: bold;
	color: #996633;
	font-size : 11px;
}

dl#menu dd {
	width: 100%;
	margin-top: -0.6em !important;
	margin: 0px 10px;
	padding: 0;
      text-align : left;
	font-weight: bold;
}
dl#menu dd ul {
	width: 100%;
	margin: 0;
	padding: 0 0 0px 0;
      text-align : left;
	font-weight: bold;
}
dl#menu dd ul li {
	width: 100%;
	list-style-type: none;
	text-align: left;
	font-weight: bold;
}
dl#menu dd ul li a {
	color: #333333;
	font-size: 0.8em;
	text-decoration: none;
}
dl#menu dd ul li a:hover {
	font-weight: bold;
}

/* ----- ----- ----- ----- Content ----- ----- ----- ----- */

#content {
	margin: -25px 100px 0 27px;
	padding: 0;
	text-align: justify;
}

#content h2 { 
	width: 650px;
	margin: 0;
	padding: 0;
	border: solid #333333;
	border-width: 0 0 1px 3px;
	color: #660000;
	font-weight: bold;
	text-indent: 10px;
	font-size : 12px;
}

#content h2:first-letter {
	color: #000000;
}

#content p.info_post {
	width: 650px;
	margin: 4px 0 0 0;
	padding: 0;
	font-size : 12px;
	font-style: italic;
	color: #977d28;
}

#content p.info_contenu {
	width: 650px;
	margin: 4px 0 0 0;
	padding: 0;
	font-size : 12px;
	color: #333333;
}

#content p {
	font-size : 12px;
}
	

/* ----- ----- ----- ----- Footer ----- ----- ----- ----- */

p#basfooter {
	width: 850px;
	height: 13px;
	margin: 0px auto !important;
	margin: 5px 22px;
	padding: 0;
	background: url(images/bas_contenu.jpg) no-repeat top center;
	text-indent: -5000px;
}

#intro
{
	width: 850px;
	height: 75px;
	margin: 0px auto;
	padding: 0;
	background: url(images/footer.jpg) no-repeat top center;
	text-indent: -50px;
	font-family: Tahoma;
}

#intro h1
{
	margin: 0px;
	font-size: 1.2em;
}

#intro p
{
	margin: 0px auto;
	text-align: left;
	font-family: Tahoma;
	font-size : 11px;
	color: #333333;
	font-weight: bold;
}

/* ----- ----- ----- ----- InfoBulle ----- ----- ----- ----- */

a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 35px;
    left: -10px;
    padding: 5px;
    color: #929280;
    border: 1px solid #929280;
    background: url(images/nav_bg.jpg);
    width:230px;
}
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent url(images/infobulle.gif);
    margin:0;
    padding: 0;
    border: 0;
}

/* ----- ----- ----- ----- Google ----- ----- ----- ----- */

#google
{
	width: 850px;
	height: 71px;
	margin: 0px auto;
	padding: 0;
	background: url(images/google_pub.jpg) no-repeat top center;
	text-indent: -50px;
	font-family: Tahoma;
}

#google h1
{
	margin: 0px;
	font-size: 1.2em;
}

#google p
{
	margin: -8px 5px;
	text-align: right;
	font-family: Tahoma;
	font-size : 11px;
	color: #333333;
	font-weight: bold;
}

/* ----- ----- ----- ----- News ----- ----- ----- ----- */

.image {float: left; margin: 0 6px 6px 0;
	width:100px;
	height:100px;
}

Index Html

Code : HTML

<!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" lang="fr">
<head>
  <title>Ouest Side - Guilde Dofus - Serveur Hecate - Aide Jeu</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="description" content="Ouest Side Fansite de Dofus Mmorpg multi-joueur online aide et actuce en ligne sur le monde des douze" />
  <meta name="keywords" lang="fr" content="Dofus, donjon, parchemin, quete, famillier, guilde, fansite dofus, dofus forever, aide, jeux, jeux mmorpg" />
  <meta HTTP-EQUIV="Content-Language" content="fr" />
  <meta name="reply-to" content="Hell-Villains@hotmail.com" />
  <meta name="category" content="Jeux MMORPG" />
  <meta name="robots" content="index" />
  <meta name="distribution" content="global" />
  <meta name="revisit-after" content="30 days" />
  <meta name="author" lang="fr" content="Ridden" />
  <meta name="copyright" content="© Copyright 2008-2009 | Tous droits réservés. | Ouest Side" />
  <meta name="generator" content="Notepad++" />
  <meta name="expires" content="never" />
  <meta name="Date-Creation-yyyymmdd" content="30.12.2009" />
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  
  <link href="images/fav/fav_01.png" type="images/gif" rel="icon" />
  <link href="images/fav/fav_02.ico" rel="shortcut icon" />
  <link href="style.css"title="Défaut" rel="stylesheet" type="text/css" media="screen" />
  <link href="menu_style.css"title="Défaut" rel="stylesheet" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />

<script type="text/javascript" src="cssverticalmenu.js">

/***********************************************

* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>
</head>	

<body>
    <div>
	<ul id='navig'>
	<li><a href="accueil.php" class="tooltip">Accueil<em><span></span>"Accueil du Site"</em></a></li>
	<li><a href="staff.php" class="tooltip">Staff<em><span></span>"Staff de la Ouest Side"</em></a></li>
	<li><a href="historique.php" class="tooltip">Historique<em><span></span>"Ancienne Versions Ouest"</em></a></li>
	<li><a href="contact.php" class="tooltip">Contact<em><span></span>"Signaler un Bug ou Nous Contacter"</em></a></li>
	<li><a href="faq.php" class="tooltip">FAQ<em><span></span>"Foire aux Questions"</em></a></li>
	<li><a href="partenariat.php" class="tooltip">Partenariat<em><span></span>Partenaire & Faire un Lien</em></a></li>
	<li><a href="remerciements.php" class="tooltip">Remerciements<em><span></span>"En Apprendre plus sur la Ouest."</em></a></li>
	<li><a href="projets.php" class="tooltip">Projets<em><span></span>"Les Projets de la Ouest"</em></a></li>
	<li><a href="/galerie/" class="tooltip">Galerie<em><span></span>"Un Espace MutliMédia sur Dofus"</em></a></li>
	<li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	<li><a><script language="javascript">
// PLF - http://www.jejavascript.net/
var date_du_jour, heure, minute;
date_du_jour = new Date();
heure = date_du_jour.getHours();
minute = date_du_jour.getMinutes();
// Test pour determiner l'affichage des heures
if (heure<10)
document.write("0", heure, "H");
else
document.write( heure, "H");
// Test pour determiner l'affichage des minutes
if (minute<10)
document.write("0", minute);
else
document.write(minute);
</script></a></li>
	<!-- Début du header & google -->
	</ul>
    </div>
	<h1 id="titre_site">Morbi mi risus</h1>
		<?php include("google.php"); ?>
		<p id="basgoogle">
		<p id="basheader">
    <div id="body2">
	<!-- Fin du header & google -->
	<!-- Début du navigation -->
	<ul id="navigation">
		<li><a href="#titre_site">Aller au titre du site</a></li>
		<li><a href="#menu">Aller au menu</a></li>
		<li><a accesskey="s" href="#content">Aller au contenu</a></li>
		<li><a href="#footer">Aller au copyright</a></li>
	</ul>
	<!-- Fin du navigation -->
	<!-- Début du menu -->
	 	<dl id="menu">
		<center><img src="images/info.png" width=30 height=30>&nbsp;<img src="images/mozilla.png" width=30 height=30>&nbsp;<img src="images/halloween.png" width=30 height=30>&nbsp;<img src="images/noel.png" width=30 height=30></center>
		    <br>
            <img src="images/ouest.jpg"> 
                <ul id="verticalmenu" class="glossymenu">
                <li><a href="histoire.php">Histoire</a></li>
                <li><a href="fonctionnement.php">Fonctionnement</a></li>
                <li><a href="membres.php">Les Membres</a></li>
                <li><a href="artisans.php">Les Artisans</a></li>
                <li><a href="concours.php">Concours Ouest</a></li>
            </ul>
        </li>
    </ul>
	<br>
            <img src="images/dofus.jpg"> 
                <ul id="verticalmenu" class="glossymenu">
                <li><a href="presentation.php">Présentation</a></li>
                <li><a href="otomai.php">Ile Otomaï</a></li>
                <li><a href="ilenowel.php">Ile de Nowel</a></li>
                <li><a href="halloween.php">Halloween</a></li>
                <li><a href="valentin.php">St-Valentin</a></li>
                <li><a href="douze.php">Monde des Douze</a></li>
            </ul>
        </li>
    </ul>
	<br>
			<img src="images/Dossiers.jpg"> 
                <ul id="verticalmenu" class="glossymenu">
                <li><a href="dragodindes.php">Les Dragodindes</a></li>
                <li><a href="familiers.php">Les Familiers</a></li>
                <li><a href="lesdofus.php">Les Dofus</a></li>
                <li><a href="quetes.php">Les Quêtes</a></li>
                <li><a href="donjons.php">Les Donjons</a></li>
                <li><a href="sort.php">Sorts Spéciaux</a></li>
                <li><a href="metiers.php">Les Métiers</a></li>
                <li><a href="dopeuls.php">Les Dopeuls</a></li>
                <li><a href="dossiers.php">Dossiers Dofus</a></li>
            </ul>
        </li>
    </ul>
    <br>
			<img src="images/web.jpg"> 
                <ul id="verticalmenu" class="glossymenu">
                <li><a href="/tv/">La Ouest-Tv</a></li>
            </ul>
        </li>
    </ul>
    <br>
			<img src="images/lien.jpg"> 
                <ul id="verticalmenu" class="glossymenu">
                <li><a href="partenariat.php">Votre Lien ici ?</a></li>
				<li><a href="partenariat.php">Votre Lien ici ?</a></li>
				<li><a href="partenariat.php">Votre Lien ici ?</a></li>
				<li><a href="partenariat.php">Votre Lien ici ?</a></li>
				<li><a href="partenariat.php">Votre Lien ici ?</a></li>
            </ul>
        </li>
    </ul>
    <br>
	</dl>
	<!-- Fin du menu -->
	<!-- Début du contenu -->
		<br><br>
	<div id="content">
      <h2>Une peaux Temporaire pour la Ouest Side</h2>
			<br>
		<img class="image" src="images/deco1.jpg" width="100" height="100" alt="123456789"><p class="info_contenu">This website template uses a very 
		simple image viewer from cssPlay. The thumbnails are simply the full size images reduced by the css. When you hover 
		over the thumbnail, the full size image is displayed to the left of the thumbnails. As part of this template, I have 
		left a simple directory structure, to give an example of how you may structure your image libraries. The template also 
		has this about page and a contact page in addition to the image viewer shown on the homepage. 
        This website template uses a very simple image viewer from cssPlay. The thumbnails are simply the full size images reduced 
        by the css. When you hover over the thumbnail, the full size image is displayed to the left of the thumbnails. As part of 
        this template, I have left a simple directory structure, to give an example of how you may structure your image libraries. 
        The template also has this about page and a contact page in addition to the image viewer shown on the homepage.</p>
			<br>
      <h2>Une peaux Temporaire pour la Ouest Side</h2>
			<br>
		<img class="image" src="images/deco1.jpg" width="100" height="100" alt="123456789"><p class="info_contenu">This website template uses a very 
		simple image viewer from cssPlay. The thumbnails are simply the full size images reduced by the css. When you hover 
		over the thumbnail, the full size image is displayed to the left of the thumbnails. As part of this template, I have 
		left a simple directory structure, to give an example of how you may structure your image libraries. The template also 
		has this about page and a contact page in addition to the image viewer shown on the homepage. 
        This website template uses a very simple image viewer from cssPlay. The thumbnails are simply the full size images reduced 
        by the css. When you hover over the thumbnail, the full size image is displayed to the left of the thumbnails. As part of 
        this template, I have left a simple directory structure, to give an example of how you may structure your image libraries. 
        The template also has this about page and a contact page in addition to the image viewer shown on the homepage.</p>
			<br>
      <h2>Une peaux Temporaire pour la Ouest Side</h2>
			<br>
		<img class="image" src="images/deco1.jpg" width="100" height="100" alt="123456789"><p class="info_contenu">This website template uses a very 
		simple image viewer from cssPlay. The thumbnails are simply the full size images reduced by the css. When you hover 
		over the thumbnail, the full size image is displayed to the left of the thumbnails. As part of this template, I have 
		left a simple directory structure, to give an example of how you may structure your image libraries. The template also 
		has this about page and a contact page in addition to the image viewer shown on the homepage. 
        This website template uses a very simple image viewer from cssPlay. The thumbnails are simply the full size images reduced 
        by the css. When you hover over the thumbnail, the full size image is displayed to the left of the thumbnails. As part of 
        this template, I have left a simple directory structure, to give an example of how you may structure your image libraries. 
        The template also has this about page and a contact page in addition to the image viewer shown on the homepage.</p>
			<br>
      <h2>Une peaux Temporaire pour la Ouest Side</h2>
			<br>
		<img class="image" src="images/deco1.jpg" width="100" height="100" alt="123456789"><p class="info_contenu">This website template uses a very 
		simple image viewer from cssPlay. The thumbnails are simply the full size images reduced by the css. When you hover 
		over the thumbnail, the full size image is displayed to the left of the thumbnails. As part of this template, I have 
		left a simple directory structure, to give an example of how you may structure your image libraries. The template also 
		has this about page and a contact page in addition to the image viewer shown on the homepage. 
        This website template uses a very simple image viewer from cssPlay. The thumbnails are simply the full size images reduced 
        by the css. When you hover over the thumbnail, the full size image is displayed to the left of the thumbnails. As part of 
        this template, I have left a simple directory structure, to give an example of how you may structure your image libraries. 
        The template also has this about page and a contact page in addition to the image viewer shown on the homepage.</p>
			<br>	
</div> 
	<!--  fin du contenu -->	
	<!--  Début du footer -->
</div>			
        <p id="basfooter">
		<?php include("footer.php"); ?>
	</div>
	<!--  fin du footer -->
</body>
</html>

CSS Menu

Code : CSS

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 148px; /*WIDTH OF MAIN MENU ITEMS*/
}

.glossymenu li{
position: relative;
}

.glossymenu li a{
background: white url(images/nav_menu1.jpg) repeat-x bottom left;
font: bold 11px Verdana, Helvetica, sans-serif;
color: #929280;
display: block;
width: auto;
padding: 5px 0px;
padding-left: 10px;
text-decoration: none;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 0px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul li{
float: left;
}

.glossymenu li ul a{
width: 100px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}

.glossymenu .arrowdiv{
position: absolute;
right: 100px;
background: transparent url(images/arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(images/nav_menu2.jpg);
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */