Menu

Css et html : problèmes de codes 2 ! sos [Résolu/Fermé]

Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
- - Dernière réponse :  bg62 - 30 juin 2006 à 10:07
bonjour, j'ai quelques soucis avec les nouvelles pages que je suis en train de créer (css et xhtml) alors : SOS !!!
je débute ... et je dois passer à côté de pas mal de choses !
PREMIER PROBLEME:
les couleurs du texte dans les menus ... seules sont prises en compte les couleurs du deuxième menu Alors que pour les tailles de texte ils peuvent être différents !!!???!!
( font-weight : bold ne semble pas fonctionner non plus !!!)
VOICI LES DEBUTS DE CODES:
dans le code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>conseils techniques</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="unecolonne1.css" />
</head>

<body>

<div id="content">

<ul id="Menu3">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/images.html">Conseils</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/sites.html">Comment</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/photos.html">Webmasters</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/contact.html">Bonus</a></li>
<li><a href="../index.html">INDEX</a></li>
</ul>
</ul>
<ul id="Menu4">
<ul>
<li><a href="conseils-pratiques.html">Pratiques</a></li>
<li><a href="conseils-techniques.html">Techniques</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/contact.html">Glossaire</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/photos.html">Exemples</a></li>
</ul>
</ul>
<div class="banniere3"></div>


dans le code css:
/*uneseule colonne de texte dans la page*/
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%
}
body {
margin: 0;
padding: 0;
background-color : #E5F0FF;
text-align : center;
font-family : verdana;
font-size : 12px;
color : #000;
}
/*#haut {width : 100% ; background-color : #ccf; height : 10px; } */
#content {
width :95%;
margin-left : auto
margin-right : auto;
background-color : #E5F0FF;
border-top : 1px solid #fff;
height : 100%; }
html>body #content {height : auto; min-height : 100%; }
#Menu3
ul {
list-style : none ;
margin-left : auto ;
margin-right : auto;
margin-top : 10px;
padding : 0 00 10px 0 ;
background-color : transparent;
text-transform : uppercase ;
font-weight : bold;
font-size : 14px; }
li {float : left ; margin : 0 0 0 10px}
/*couleur des liens avant et pendant survol*/
li a {color : #0000F5; text-decoration : none}
li a:hover {color : #ccc; text-decoration : none}
#Menu4
ul {
list-style : none ;
margin-left : auto ;
margin-right : auto;
margin-top : 10px;
padding : 0 00 10px 0 ;
background-color : transparent;
text-transform : uppercase ;
font-weight : bold;
font-size : 16px; }
li {float : left ; margin : 0 0 0 10px}
/*couleur des liens avant et pendant survol*/
li a {color : #0000F5; text-decoration : none}
li a:hover {color : #CC3333; text-decoration : none}
/*problèmes des couleurs du texte dans les menus ... seules sont prises en compte les couleurs du
deuxième menu Alors que pour les tailles de texte ils peuvent être différents !!!???!!
font-weight : bold ne semble pas fonctionner non plus !!!*/


.banniere3 {
margin-top : 0px ;
width : 100% ;
height : 150px;
background-image : url(../images/techniques.jpg)}
Afficher la suite 

5 réponses

Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
133
0
Merci
slt

bon maintenant qu'on a les codes, explique ton problème calmement.

Si j'ai bien comprit, ton premier problème est la couleur... et franchement je ne vois pas ce qui cloche. Tu dis que les 2 couleurs sont différentes, alors qu'elles sont exactement les mêmes.
Ton second problème était la taille des 2 menus...
font-size : 16px;
oui bon quand on donne des propriétes différentes à des "balises" différentes, c'est normal que ça n'a rien à voir l'un avec l'autre.
par exemple si j'ai un menu comme ça:
<div id="menu">
<div class="sous_menu1">
</div>
<div class="sous_menu2">
</div>
</div>

alors avec le css, je peux rendre les 2 sous menus totalement différents si il le faut.
bon enfin j'espère avoir répondu correctement à ta question...
+
bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144 -
ben merci
mais le problème est en sens contraire:
sur les deux lignes la couleur est la même et je voudrais qu'elle soit différente !
je vais essayer avec tes conseils pour voir ce que cela donne
car j'arrive à changer la taile mais toutes les autres choses semblent ne prendre que les 'codes' du dernier menu
@mitiés
b g
bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144 -
je viens de faire un essai ... mais pas fructueux !
voici l'essai fait: (mais pas mis en ligne)

css:
#Menu3
ul {
list-style : none ;
margin-left : auto ;
margin-right : auto;
margin-top : 10px;
padding : 0 00 10px 0 ;
background-color : transparent;
text-transform : uppercase ;
font-weight : bold;
font-size : 14px; }
li {float : left ; margin : 0 0 0 10px}
/*couleur des liens avant et pendant survol*/
li a {color : #0000F5; text-decoration : none}
li a:hover {color : #ccc; text-decoration : none}
#Menu4
ul {
list-style : none ;
margin-left : auto ;
margin-right : auto;
margin-top : 10px;
padding : 0 00 10px 0 ;
background-color : transparent;
text-transform : uppercase ;
font-weight : bold;
font-size : 16px; }
li {float : left ; margin : 0 0 0 10px}
/*couleur des liens avant et pendant survol*/
li a {color : #336600; text-decoration : none}
li a:hover {color : #CC3333; text-decoration : none}
/*problèmes des couleurs du texte dans les menus ... seules sont prises en compte les couleurs du
deuxième menu Alors que pour les tailles de texte ils peuvent être différents !!!???!!
font-weight : bold ne semble pas fonctionner non plus !!!*/


xhtml:
<div id="menu3">
<ul id="Menu3">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/images.html">Conseils</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/sites.html">Comment</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/photos.html">Webmasters</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/contact.html">Bonus</a></li>
<li><a href="../index.html">INDEX</a></li>
</ul>
</ul>
</div>

<div id="menu4">
<ul id="Menu4">
<ul>
<li><a href="conseils-pratiques.html">Pratiques</a></li>
<li><a href="conseils-techniques.html">Techniques</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/contact.html">Glossaire</a></li>
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/photos.html">Exemples</a></li>
</ul>
</ul>
</div>

MAIS le changement de couleur 'color : #336600' met en vert les deux lignes du menu ! c'est justement ce que je voudrais éviter pour pouvoir réussir à mettre les deux lignes avec des paramètres indépendants...
alors comment faire ? là je "coule" et je ne trouve pas la solution

@mitiés
b g
Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
133
0
Merci
re
et bien en fait, quand je regarde tes codes, je peux déjà te dire où est un GROS problème...
<li><a href="file:///c|/easyphp1-8/www/travail2/pages/contact.html">Bonus</a></li> 
<li><a href="../index.html">INDEX</a></li> 
</ul> 
</ul> 
<ul id="Menu4"> 
<ul> 
<li><a href="conseils-pratiques.html">Pratiques</a></li> 
<li><a href="conseils-techniques.html">Techniques</a></li> 
(je n'ai pas repris tout ton menu mais ça suffira)
et ton css:
#Menu3 
ul { 
list-style : none ; 
margin-left : auto ; 
margin-right : auto; 
margin-top : 10px; 
padding : 0 00 10px 0 ; 
background-color : transparent; 
text-transform : uppercase ; 
font-weight : bold; 
font-size : 14px; } 
li {float : left ; margin : 0 0 0 10px} 
/*couleur des liens avant et pendant survol*/ 
li a {color : #0000F5; text-decoration : none} 
li a:hover {color : #ccc; text-decoration : none} 
#Menu4 
ul { 
list-style : none ; 
margin-left : auto ; 
margin-right : auto; 
margin-top : 10px; 
padding : 0 00 10px 0 ; 
background-color : transparent; 
text-transform : uppercase ; 
font-weight : bold; 
font-size : 16px; } 
li {float : left ; margin : 0 0 0 10px} 
/*couleur des liens avant et pendant survol*/ 
li a {color : #0000F5; text-decoration : none} 
li a:hover {color : #CC3333; text-decoration : none} 
/*problèmes des couleurs du texte dans les menus ... seules sont prises en compte les couleurs du 
deuxième menu Alors que pour les tailles de texte ils peuvent être différents !!!???!! 
font-weight : bold ne semble pas fonctionner non plus !!!*/ 

bon eh bien le problème est là(d'après moi). Tu as des
<li>
et des
<a>
dans ton menu. Or ce que toi tu fait tu donnes 2 fois , si pas plus, des propriétés à ces balises, alors forcement, c'est pas évident pour toi, mais pour ton code, ce n'est pas ce qu'il préfère non plus ;-)
bon enn gros ce que je te conseille de faire..
- tu peux copier-coller ça comme ça dans ton code ça évitera le sous-lignage du texte "
A:link {text-decoration: none} 
A:visited {text-decoration: none} 
A:hover {text-decoration: none} 
"
-ensuite vire tout ce qui est en double (mais il faut savoir le remettre après)

-En fait quand tu donnera des propriétés, essaie de faire comme ça en donnant pour chaque menu sa balise li:
ex:
.menu1
{
blabla
}
.menu1 li
{
blabla
}
.menu1 a
{
blabla
}

.menu2
{
blabla
}
.menu2 li
{
blabla
}
.menu2 a
{
blabla
}

normalement tu devrais déjà mieux t'y retrouver comme ça, si il y a encore des problèmes..
bonne chance
bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144 -
grand merci ... mais là je plane complètement !
(pour les liens avec 'easyphp' normal c'est du brouillon et certains ne sont pas faits)
mais pour le reste ... alors il faut que j'essaie, que je vois ça CALMEMENT car je ne dois pas être du niveau
enfin ... je vais le faire et je te tiens au courant certainement demain
@mités
b g
bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144 -
je viens d'essayer ... mais je ne suis pas du tout du niveau !
voilà ce que cela donne :
(en 'visuel')
http://unesourisetmoi.chez-alice.fr/travail3/pages/accueil.html
... je ne parviens qu'à faire varier la taille de la police !
alors que j'aurais voulu que cela fasse comme à cette page:
http://unesourisetmoi.chez-alice.fr/travail3/pages/conseils-pratiques.html
mais en pouvant changer la couleur de la police d'une ligne ou de l'autre
@mitiés
b g
bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144 -
et ... peux-tu me dire où placer les lignes
"
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:hover {text-decoration: none}
"
sinon je vais encore faire une grosse bourde !
quant à ensuite faire du ménage et enlever tout ce qui ne sert à rien ... pas sorti de l'auberge !
@+
bg
Messages postés
1721
Date d'inscription
vendredi 7 juillet 2000
Dernière intervention
24 mars 2009
291
0
Merci
les lignes que tu vien de citer tu les met en haut de ton doc css.

Et dans un premier temps tu peux virer tous les a qui se trouve ailleurs tu les respécifireas aux bons endroit si besoin ait.
fait une sauvegarde de ce que tu as comme ca tu pourras aller rechercher ce qui te manque par la suite
maxime_B
Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
133 > bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
-
voilà c fait
ne t'inquiète pas tu n'en était pas loin.

juste une chose avant de te donner les codes, et ça peut être valable dans n'importe quel code que tu comptes créer:

- essaie qu'il soit le plus facile à comprendre pour toi, laisse des petits commentaires pour le cas où tu ne reviendrais pas sur ses codes avant un moment.

- tu dois pouvoir te retrouver dans tes codes, alors essaie de ne pas tout mélanger.

- ne donne JAMAIS 2 propriétes différentes à la même balise, car c'est comme ça qu'on a des soucis avec ses codes.
(comme si tu disais qu'une banane est jaune et que tu dis ailleurs qu'elle est verte)

- essaise de ne pas confondre
<div>
et
class
. Les class et les div font, à quelques choses près exactement la même chose. La seule différence est que les div sont plutôt utilisés pour les gros "blocks" alors que les class seront plus utiles pour des plus petites chose

je crois que tout est dis.

voilà le code css:
/*css a moi pour essai index html et index css */

body 
{
margin: 0;
padding: 0;
height: 100%;
margin: 0;
padding: 0;
background-color : #99C2FF;
text-align : center;
font-family : verdana;
font-size : 12px;
color : #000;
}

#espacehaut 
{
width :90%;
margin-left : auto;
margin-right : auto;
background-color : #E5F0FF;
height : 100%; 
}

#content 
{
height : auto; 
min-height : 100%;  
}

.espacebas 
{
width : 100%; 
clear : both ; 
height : 20px; 
background-color : #E5F0FF;
margin-top : 20px ;
}

h1 {
width : 100%; font-size : 16px ; font-weight : bold; padding : O ; margin : 10px 0 0 0 ; color : #0000F5; background-color : #E5F0FF;
}
h2 {
width : 100%; font-size : 14px ; padding : O ; margin : 10px 0 0 0 ; color : #663300; background-color : #E5F0FF; }
h4 {
width : 100%; font-size : 14px ; font-weight : bold; padding : O ; margin : 10px 0 0 0 ; color : #CC0000; background-color : #E5F0FF; }


.banniere2
 {
margin-top : 0px ; 
width : 100% ; 
height : 150px;  
background-image : url(../images/banniere-2.jpg)
}

/*tu as déjà les codes pour enlever le sous-lignage du texte ici, pas besoin de le remettre partout ;-) */
a:link {text-decoration: none} 
a:visited {text-decoration: none} 
a:hover {text-decoration: none} 

/*  Menu1  */
#Menu1 ul 
{
list-style : none ; 
margin-left : auto ;
margin-right : auto;
margin-top : 10px;
padding : 0 00 10px 0 ;
background-color : transparent;
text-transform : uppercase ; 
font-weight : bold;
font-size : 14px; 
}
#menu1 li 
{
float : left ; 
margin : 10px ;
}

/*ou est la couleur des liens avant et pendant survol ?
.menu1 li a {color : #000; text-decoration : none}
.menu1 li a:hover {color : #ccc; text-decoration : none}*/

#menu1 li a  /* un truc que tu dois savoir est que les propriétés css des "div" sont toujours "#ton_div" et pour les classes ".ta_classe" */
{
color : #0000F5; 

}

#menu1 li a:hover 
{
color : #ccc; 
}

/*  Menu2  */
#Menu2 ul 
{
list-style : none ; 
margin-left : auto ;
margin-right : auto;
margin-top : 10px;
padding : 0 00 10px 0 ;
background-color : transparent;
text-transform : uppercase ; 
font-weight : bold;
font-size : 16px; 
}

#menu2 li 
{
float : left ; 
margin : 10px ;
}

/*ou est lacouleur des liens avant et pendant survol ?
.menu2 li a {color : #0000F5; text-decoration : none}
.menu2 li a:hover {color : #000; text-decoration : none}*/

#menu2 li a 
{
color : #00CC00; 
}

#menu2 li a:hover 
{
color : #000; 
}

/*.cherche {width : 250px ; height : 188px; background-image : url(images/cherche.jpg); }*/
/*.smile {width : 250px ; height : 188px; background-image : url(images/smile.jpg); }*/

.spacer {
clear : both ; 
height : 13px; 
font-size : 12px ; 
color : #663300; 
background-color : #E5F0FF; 
}
.bas {
clear : both ; 
height : 30px; 
background-color : #99C2FF ; 
margin-top : 20px
}


je suppose que tu saura t'y retrouver.

dernière chose change dans ton fichier html les
</menu1 li>
, car ça n'existe pas :-) . utilises simplement des
<li>
ou
</li>
. tant que ça se trouve dans ton "div", les propriétés que tu as donnés pour ce "div" seront donnés la dessus aussi.

je te souhaites bonne chance pour la suite

amicalement

maxime
bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144 > maxime_B
Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
-
grand grand merci à toi ... mais je réponds peut-être un peu tard ??? raison:
http://www.unesourisetmoi.info/rss1.xml
j'ai tout remis en ligne et sur la page :
http://unesourisetmoi.chez-alice.fr/travail3/pages/accueil.html
j'explique un peu tout ce que je voudrais faire .... (j'ai pas fini !)

je vais donc corriger les codes de la feuille css et essayer de renvoyer cela au plus vite
encore merci
@mitiés
b g
bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144 > maxime_B
Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
-
bon c'est fait ....
http://unesourisetmoi.chez-alice.fr/travail3/pages/conseils-pratiques.html
mais comme tu pourras voir cela semble toujours être le code couleur de 'menu2' qui prédomineet celui de 'menu1' ne s'affiche pas (il reste vert alors que son code est bleu)
... j'ai encore 'merd...' ????
le fichier css est :
http://unesourisetmoi.chez-alice.fr/travail3/pages/unecolonne1.css

j'espère que tu es encore en ligne ...
@+
b b
bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144 > maxime_B
Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
-
bonjour ... je dois être complètement nul !
rien à faire
voici ce que je voudrais:
http://unesourisetmoi.chez-alice.fr/travail3/pages/accueil.html
voici où j'en suis:
http://unesourisetmoi.chez-alice.fr/travail3/pages/conseils-pratiques.html
rien à faire pour rendre indépendantes (surtout au niveau couleurs ces 2 lignes de menu)
voici ce que j'ai fait avec tes indications:
http://unesourisetmoi.chez-alice.fr/travail3/pages/maxime.html
http://unesourisetmoi.chez-alice.fr/travail3/pages/maxime.css
j'ai encore du me planter qq part !
@mitiés
b g
bg62
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144 > maxime_B
Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
-
j'ai trouvé ... tes conseils étaient bons mais ils y avait enore un bug à cause d'une histoire de "majuscules" Menu et menu !
reste que maintenatnj'ai ce que je voulais mais les menus sont plus que très mal placé dans la page ... encore un autre bug ???
@mitiés
bg
Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
133
0
Merci
dsl j'était chez moi qq jours..bref..
comment est placé le menu, l'un en dessous de l'autre comme dans ton exemple???
(regarde ton code html pour ton 2ème menu, il s'appelle menu3 et tu donnes des propriétés à menu2...)
Messages postés
23177
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
18 mars 2019
3144
0
Merci
bonjour
maxime
comme tu as pu le voir tes conseils étaient supers ...les deux problèmes restants étaient :
'menu' et 'Menu' (majuscule !!!)
puis pour le recentrage :
#menu1 li { float : left ; margin : 0 0 0 10px ; }
au lieu de #menu1 li { float : left ; margin : 10px ; }
et cela fonctionne
http://unesourisetmoi.chez-alice.fr/travail3/pages/conseils-pratiques.html
je vais donc continuer les autres pages avant de passer les menus et les pages en php
grand merci encore
@mitiés
maxime_B
Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
133 -
pas de quoi

;-)
@+
> maxime_B
Messages postés
794
Date d'inscription
mardi 14 juin 2005
Dernière intervention
15 juin 2010
-
si quand même
regarde ce post:
soumissions gratuites dans les moteurs
si cela t'intéresse pour un de tes sites c'est ok
@mitiés
b g