Mise en page menu navigation et sous menus
confiance150
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
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
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:
- Mise en page menu navigation et sous menus
- Mise en forme conditionnelle excel - Guide
- Supprimer page word - Guide
- Navigation privée - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Menu déroulant excel - Guide
1 réponse
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 ?
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 ?