Sujet Précédent Sujet Suivant

Mise en page menu navigation et sous menus

Fermé
confiance150 Messages postés 9 Date d'inscription jeudi 12 novembre 2009 Statut Membre Dernière intervention 13 mai 2013 - 26 avril 2012 à 01:28
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 26 avril 2012 à 08:59
Bonjour,

Je suis en train de faire une mise en page d'une application web.
Je rencontre un problème dans la création du menu de navigation gauche. je doit créer des sous rubriques dans le menu de gauche tel que illustré sur ce lien. http://www.csszengarden.com/?cssfile=178/178.css je joins les scripts écris 
<head>
<link rel="stylesheet" href="admin.css" type="text/css" media="screen">
</head>
<html>
<body>
<div id="container">	
	<div id="menu_horizontal"> <!-- Début menu horizontal-->  
	</div><!-- fin menu horizontale-->
    <div id="contenu"> <!-- Début de contenu centrale-->	
    <div id="col_gauche">  <!-- Début colone de gauche centrale-->
        	
<div id="menu_abo"> (sous rubrique1 en forme de bloc)
           	 <h3> Abonnée</h3>
            </div>
            <div id="menu_user"> (sous rubrique1 en forme de bloc)
             <h3>Utilisateurs </h3>
            </div>
      </div>  <!-- fin fin de la colonne de gauche  -->  
      <div id="col_centrale">        
      </div>          
  </div>  <!-- fin du conteneur  --> 
  <div id="footer">
  </div>	
</div>	
#header
{
	width: 998px;
	height:80px;
	background-image:url(../img/header.jpeg);
	border:1px solid blue;
	}
	
#menu_horizontal	
{
	width: 998px;
	height:30px;
	border: 1px #00FF00 solid;
	background-image: url(img/bg_menu.jpg);
	background-repeat: repeat-x;
	
	}
	
	#contenu
	{
	width: 998px;
	float:left;
	margin:0px;
	background-color:#ffffff;
	border: #FF0000 1px solid;
	}
	#col_gauche
	{
	float: left;
	width: 175px;
	font-family:Arial, Helvetica, sans-serif;
	border: #FF0000 1px solid;
	height:auto;
	padding:0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	background-color: #000;
	
	}
	

#col_centrale
{
	float: left;
	width: 770px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 30px;
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0px;
	border: #00FF00 1px solid;
	
	
}
#footer 
	{
	margin-top: 20px;
	background-color:#009940;
	width:998px;
	height:20px;
	clear:both;
	height:25px;
		
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	padding-top:5px;
}

Code CSS

#col_gauche 
{
	height:auto;
	width: 175px;
	float:left;
	margin:0px;
	position:relative;
	border: thin solid #606;
	z-index:100;
}

  #menu_abon {
	height:150px;
	width: 175px;
	font-size:12px;
	color:#1E6C1C;
	background-color:black;	
	
}
 #menu_user {
	height: 250px;
	width: 175px;
	background-color:#069;
	
}
A voir également:

1 réponse

Réponse 1 / 1
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 311
26 avril 2012 à 08:59
Bonjour,

Avec le plugin Firebug sous Firefox (et ses équivalents sur les autres navigateurs), tu aurais pu voir le code utilisé.

En regardant le code source (simple clic droit), tu verras qu'on utilise des listes pour faire ses menus. D'autre part, ce code est fait pour être téléchargé et adapté. Tu as téléchargé le html et le css pour l'étudier ?
0

Discussions similaires

[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
[Navigation Internet] Trace de navigation
Cyril -
megot encore fumant -

10 réponses