Css et html : problèmes de codes 2 ! sos

Résolu/Fermé

bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 - 27 juin 2006 à 09:15
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)}

A voir également:

Css et html : problèmes de codes 2 ! sos
Editeur html - Télécharger - HTML
Faire un trait horizontal html css ✓ - Forum CSS
&Nbsp html - Forum HTML
Br html ✓ - Forum Webmastering
Balise </br> - Forum HTML

5 réponses

Réponse 1 / 5

maxime_B Messages postés 788 Date d'inscription mardi 14 juin 2005 Statut Membre Dernière intervention 15 juin 2010 55
27 juin 2006 à 11:37

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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
27 juin 2006 à 11:42

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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
27 juin 2006 à 12:02

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

Réponse 2 / 5

maxime_B Messages postés 788 Date d'inscription mardi 14 juin 2005 Statut Membre Dernière intervention 15 juin 2010 55
27 juin 2006 à 12:02

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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
27 juin 2006 à 12:41

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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
27 juin 2006 à 15:58

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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
27 juin 2006 à 16:02

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

Réponse 3 / 5

P@ Messages postés 1709 Date d'inscription vendredi 7 juillet 2000 Statut Membre Dernière intervention 24 mars 2009 185
27 juin 2006 à 16:27

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

bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
27 juin 2006 à 16:31

ok je vais essayer ... mais on est plutôt mal parti je crois !
@mitiés
b g

bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
27 juin 2006 à 16:41

hé ....!
ça n'a pas l'air de fonctionner !
si tu peux jeter un coup d'oeil à mon bidouillage ...
http://unesourisetmoi.chez-alice.fr/travail3/pages/accueil.html
et pour le css:
http://unesourisetmoi.chez-alice.fr/travail3/pages/accueil.css
ce serait vraiment sympa et surement plus efficace
@mitiés
b g

maxime_B Messages postés 788 Date d'inscription mardi 14 juin 2005 Statut Membre Dernière intervention 15 juin 2010 55 > bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024
27 juin 2006 à 17:54

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>

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>

</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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384 > maxime_B Messages postés 788 Date d'inscription mardi 14 juin 2005 Statut Membre Dernière intervention 15 juin 2010
28 juin 2006 à 15:38

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

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

Réponse 4 / 5

maxime_B Messages postés 788 Date d'inscription mardi 14 juin 2005 Statut Membre Dernière intervention 15 juin 2010 55
30 juin 2006 à 01:48

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...)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
30 juin 2006 à 08:53

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 788 Date d'inscription mardi 14 juin 2005 Statut Membre Dernière intervention 15 juin 2010 55
30 juin 2006 à 09:41

pas de quoi

;-)
@+

bg62 > maxime_B Messages postés 788 Date d'inscription mardi 14 juin 2005 Statut Membre Dernière intervention 15 juin 2010
30 juin 2006 à 10:07

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

Discussions similaires

la balise <br> ou <br />

&nbsp ; Quelle Fonction ?

Espace en HTML

Que veut dire <p> </p>?