Ajout de menus
9 messages
• Page 1 sur 1
- apt
- WRInaute discret
- Messages: 57
- Inscription: 14 Déc 2006
Ajout de menus
le Sam Mar 10, 2007 17:22
Salut,
Dans le script annuaire Categorizator,
comment puis-je ajouter des menus gauche + droite avec des div ?
(div conteneur, div header, div menu horizontal, div nav gauche, div contenu, div nav droite, div footer).
Merci.
Dans le script annuaire Categorizator,
comment puis-je ajouter des menus gauche + droite avec des div ?
(div conteneur, div header, div menu horizontal, div nav gauche, div contenu, div nav droite, div footer).
Merci.
-
tryan - WRInaute passionné
- Messages: 2288
- Inscription: 20 Fév 2005
le Sam Mar 10, 2007 20:26
Généralement il faut partir d'un design pré établie qui sont à intègrer dans les fichiers haut et bas.php ou header et footer.php du script (je ne sais plus exactement) ..Les explications que tu demandes sont un peut longues à fournir , il faudrait un tuto de 4 pages .. 
si sa peut t'aider http://c00lman.free.fr/Creer-un-site-en-CSS.php
si sa peut t'aider http://c00lman.free.fr/Creer-un-site-en-CSS.php- apt
- WRInaute discret
- Messages: 57
- Inscription: 14 Déc 2006
le Dim Mar 11, 2007 3:09
Merci tryan.
Ce site me simplifie amplement la tâche.
Mais j'ai un probleme pour centrer le grand div :
#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
Il est toujours aligné agauche !!
Comment faire ?
Merci.
Ce site me simplifie amplement la tâche.
Mais j'ai un probleme pour centrer le grand div :
#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
Il est toujours aligné agauche !!
Comment faire ?
Merci.
- apt
- WRInaute discret
- Messages: 57
- Inscription: 14 Déc 2006
le Dim Mar 11, 2007 3:10
Merci tryan.
Ce site me simplifie amplement la tâche.
Mais j'ai un probleme pour centrer le grand div :
Il est toujours aligné agauche !!
Comment faire ?
Merci.
Ce site me simplifie amplement la tâche.
Mais j'ai un probleme pour centrer le grand div :
- Code: Tout sélectionner
#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
Il est toujours aligné agauche !!
Comment faire ?
Merci.
- Dan_A
- WRInaute discret
- Messages: 183
- Inscription: 21 Déc 2005
le Dim Mar 11, 2007 10:51
Il y a trop peu d'information pour donner "la" réponse
Peut être margin:0 auto;
On peut aussi remplacer les définitions pour la bordure par
border:1px solid #000; /* couleur du cadre */
[edit]
Après un coup d'oeil jeté au site cité, le centrage ne s'effectue pas avec IE car les exemples donnés ne sont pas en HTML valide et le doctype n'est pas bon (ie est en mode quirks sur certaines pages).
Il suffit donc de mettre un DOCTYPE complet pour que le div soit centré avec Firefox et Internet Explorer.
[/edit]
Peut être margin:0 auto;
On peut aussi remplacer les définitions pour la bordure par
border:1px solid #000; /* couleur du cadre */
[edit]
Après un coup d'oeil jeté au site cité, le centrage ne s'effectue pas avec IE car les exemples donnés ne sont pas en HTML valide et le doctype n'est pas bon (ie est en mode quirks sur certaines pages).
Il suffit donc de mettre un DOCTYPE complet pour que le div soit centré avec Firefox et Internet Explorer.
[/edit]
- apt
- WRInaute discret
- Messages: 57
- Inscription: 14 Déc 2006
le Dim Mar 11, 2007 14:27
Merci Dan_A,
Tu as raison; Il manquait la ligne DOCTYPE.
J'ai ajouter cette ligne avant <html> et tout marche.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tu as raison; Il manquait la ligne DOCTYPE.
J'ai ajouter cette ligne avant <html> et tout marche.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- apt
- WRInaute discret
- Messages: 57
- Inscription: 14 Déc 2006
le Dim Mar 11, 2007 16:10
Le code :
Voila j'aimerais avoir votre l'aide pour :
1 - Reduire l'écart haut et bas entre la div categories et le titre Menu Gauche dans la div cadredumenugauche.
2 - Reduire le retrait de la liste dans la div categories.
S'il y'a d'autres erreurs dans le code ou des propositions à me fournir, veuillez me les signaler svp.
Merci.
- Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Effets sur les liens</title>
<style type="text/css">
body {
background-color:#FFFFFF; /*couleur de fond de page*/
font:13px "Trebuchet MS", Arial, Verdana;/*taille et forme de la police*/
color:#555555; /*couleur de la police d'écriture*/
}
.cadredumenugauche a:link {color: red ; }
.cadredumenugauche a:hover {border: 0px solid #000000; color: #00FBFF; text-decoration: underline ;}
a:link {color: #000000 ; text-decoration: underline ;}
a:visited {color: #FF6699 ; } a:hover { color: red ; text-decoration: underline overline ; }
.cadredumenugauche p.titre {color: red ; text-decoration: underline overline ;}
#moncadre {
width:800px;
padding:10px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin: auto;
}
.cadredumenugauche {
float:left;
text-align:center;
width:150px;
background-color:#E4E4E4;
border:1px solid #000; /* cadre menu */
color:#666666;
height: auto;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.categories {
float:left;
text-align:left;
width:130px;
padding: 10px;
background-color:#FFFFFF;
border:0px solid #FFFFFF; /* cadre menu */
color:#666666;
height: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
list-style-position: outside;
list-style-type: circle;
}
.cadredumenudroite {
float:right;
text-align:left;
width:150px;
padding:5px;
background-color:#E4E4E4;
border:1px solid #000; /* cadre menu */
color:#666666;
height: auto;
}
.categories2 {
float:left;
text-align:left;
width:130px;
padding:10px;
background-color:#FFFFFF;
border:0px solid #FFFFFF; /* cadre menu */
color:#666666;
height: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#cadrehaut {
height:100px;
background-color:#FFCCCC;
margin-bottom:10px;
}
#cadrebas {
width:200px;
background-color:#DEDEDE;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif,;
text-align:center;
color: #999999;
clear: both;
margin-top: 10px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#cadrecentrale {
margin-left:180px;
min-height:150px;
margin-right:180px;
border-left:1px dashed #000; /* couleur du cadre */
border-right:1px dashed #000;
border-bottom:1px dashed #000;
border-top:1px dashed #000;
background-color:#00FBFF;
height: auto;
}
</style>
</head>
<body>
<div id="moncadre">
<div id="cadrehaut">Barre de Navigation</div>
<div class="cadredumenugauche">
<p class="titre"><a href="index.php">Menu Gauche</a></p>
<div class="categories">
<ul class="">
<li><a href="index.php">mon lien</a></li>
<li>mon lien</li>
<li>mon lien</li>
</ul>
</div>
</div>
<div class="cadredumenudroite">
<p>Menu Droite</p>
<div class="categories2">Placez ici le contenu de la nouvelle balise Div</div>
</div>
<div id="cadrecentrale">
<p>Categories de l'annuaire </p>
</div>
</div>
<div id="cadrebas">2007</div>
</body>
</html>
Voila j'aimerais avoir votre l'aide pour :
1 - Reduire l'écart haut et bas entre la div categories et le titre Menu Gauche dans la div cadredumenugauche.
2 - Reduire le retrait de la liste dans la div categories.
S'il y'a d'autres erreurs dans le code ou des propositions à me fournir, veuillez me les signaler svp.
Merci.
-
tryan - WRInaute passionné
- Messages: 2288
- Inscription: 20 Fév 2005
le Dim Mar 11, 2007 21:50
Le doctype n'est pas une erreur ... le boulot sur le style est déja donné et fournis en détail . Dailleurs si tu avais prit le temps de regardé la source de la page de démo, tu aurrais put comparer et donc trouvé la différence ... sinon dit le doctype !
9 messages
• Page 1 sur 1
Lectures recommandées sur ce thème :
Consultez la description détaillée des produits ou services de Google suivants : Omnisio
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités
Contact
Confidentialité