Rechercher : dans
Par :

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

Dernière réponse le 30 jun 2006 à 10:07:21 bg62, le 27 jun 2006 à 09:15:04 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « css et html : problèmes de codes 2 ! sos » dans :
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Call of Duty 2 ( CoD 2 ) Bugs récurrents VoirCall of Duty, bugs sous Vista Problèmes avec COD2 sous Vista ? C’est bien normal, cet O.S. n’existait pas encore à la sortie de cet excellent FPS. Nous allons voir quelques modifs pour profiter de cet opus Call Of Duty. 1 - Installation...
[Webmaster] Un formulaire de contact pour votre site VoirCe formulaire permet d'avoir une page pour être contacté sur son site, sans utiliser de logiciel de messagerie. La personne qui vous contacte indique son adresse, l'objet du message et son message (évidemment). Le code est une version...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Caractères spéciaux HTML VoirCodage des caractères spéciaux Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage particulier. Pour...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...

1

maxime_B, le 27 jun 2006 à 11:37:55

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...
+ mieux vaut la fermer et passer pour un con, plutôt que de l'ouvrir pour dire des conneries...

Répondre à maxime_B

2

bg62, le 27 jun 2006 à 11:42:56

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

Répondre à bg62

3

bg62, le 27 jun 2006 à 12:02:07

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épondre à bg62

4

maxime_B, le 27 jun 2006 à 12:02:16

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 mieux vaut la fermer et passer pour un con, plutôt que de l'ouvrir pour dire des conneries...

Répondre à maxime_B

5

bg62, le 27 jun 2006 à 12:41:44

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

Répondre à bg62

6

bg62, le 27 jun 2006 à 15:58:41

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.h­tml
... 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

Répondre à bg62

7

bg62, le 27 jun 2006 à 16:02:22

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épondre à bg62

8

P@, le 27 jun 2006 à 16:27:08

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 ..:::P@ ... a tras, a PoOf ou a chou :::..

L'imagination est plus importante que la connaissance. Albert Einstein

Répondre à P@

9

bg62, le 27 jun 2006 à 16:31:49

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

Répondre à bg62

10

bg62, le 27 jun 2006 à 16:41:28

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.h­tml
et pour le css:
http://unesourisetmoi.chez-alice.fr/travail3/pages/accueil.c­ss
ce serait vraiment sympa et surement plus efficace
@mitiés
b g

Répondre à bg62

11

maxime_B, le 27 jun 2006 à 17:54:05

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 mieux vaut la fermer et passer pour un con, plutôt que de l'ouvrir pour dire des conneries...

Répondre à maxime_B

12

bg62, le 28 jun 2006 à 15:38:55

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.h­tml
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

Répondre à bg62

13

bg62, le 28 jun 2006 à 16:18:46

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/unecolonn­e1.css

j'espère que tu es encore en ligne ...
@+
b b

Répondre à bg62

14

bg62, le 29 jun 2006 à 09:31:54

Bonjour ... je dois être complètement nul !
rien à faire
voici ce que je voudrais:
http://unesourisetmoi.chez-alice.fr/travail3/pages/accueil.h­tml
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.ht­ml
http://unesourisetmoi.chez-alice.fr/travail3/pages/maxime.cs­s
j'ai encore du me planter qq part !
@mitiés
b g

Répondre à bg62

15

bg62, le 29 jun 2006 à 11:20:12

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

Répondre à bg62

16

maxime_B, le 30 jun 2006 à 01:48:08

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...) mieux vaut la fermer et passer pour un con, plutôt que de l'­ouvrir pour dire des conneries...

Répondre à maxime_B

17

bg62, le 30 jun 2006 à 08:53:20

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

Répondre à bg62

18

maxime_B, le 30 jun 2006 à 09:41:29

Pas de quoi

;-)
@+ mieux vaut la fermer et passer pour un con, plutôt que de l'­ouvrir pour dire des conneries...

Répondre à maxime_B

19

 bg62, le 30 jun 2006 à 10:07:21

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

Répondre à bg62
Collection CommentÇaMarche.net