De gros problème avec le css : je comprend rien

De gros problème avec le css : je comprend rien - HTML/CSS - Programmation

Marsh Posté le 07-01-2003 à 14:54:13    

Bonjour tout le monde.
Je suis newbie et j'ai de gros problème avec le css de mon site ( http://rogerone.free.fr ). je pige rien...  :(  
J'ai essayé de changer la couleur des liens de mon menu avec le css... RIEN, je n'y arrive pas. J'ai esayer d'enlever les "decorations" sur les liens... toujours rien. Je crois que j'ai besoin de mettre les choses a plat pour enfin comprend ce qui ne va pas, alors si vous acceptez de m'aider  :) .
Si vous voulez je peut mettre le code de mon css et de mon index.php3, pour que vous puissiez voir.

Reply

Marsh Posté le 07-01-2003 à 14:54:13   

Reply

Marsh Posté le 07-01-2003 à 15:25:08    

C'est quoi le problème ? Ca à l'air de marcher : quand je passe ma souris sur les liens, le soulignement disparait et ils deviennent plus clair.
 
Par contre ton image de fond n'est pas fixe avec Mozilla.


Message édité par gm_superstar le 07-01-2003 à 15:27:04

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-01-2003 à 15:51:17    

Oui, mais j'aimerais que les liens ne soient jamais souligné. Pour le fond, je savais pas et je sais pas comment faire  :(

Reply

Marsh Posté le 07-01-2003 à 15:55:31    

a
{
text-decoration:none;
}
 

Reply

Marsh Posté le 07-01-2003 à 15:57:56    

DeliriumTremens a écrit :

a
{
text-decoration:none;
}
 
 


 
Je dois mettre ça dans le css? Au passage voici l'url de mon css :  
http://rogerone.free.fr/feuille_de_style.css

Reply

Marsh Posté le 07-01-2003 à 16:08:08    

Si tu mets ça dans ton css, aucun lien de ton site ne sera souligné.
 
Je sais pas si c'est le but.
 
Sinon :
tu as ta feuille de style, c'est bien. J'ai pas regardé tout en détail, mais pour les liens du menu, tu as
 
a.menu
{
...
text-decoration:none;
}
 
A chaque lien de ton menu, tu dois donc faire
<a class="menu" href="">aadf</a>
 
sinon un navigateur aura de la peine à comprendre.
 
A ce que j'ai vu de ton (vilain) code, tu ne l'as pas fait.
 
Point 2 :
Dans ton HEAD, tu as ton lien vers ta CSS, plus :
 
<style type="text/css">A:hover {
 FONT-SIZE: 10px; COLOR: #99CCCC; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none}<style type="text/css">A:hover {
 FONT-SIZE: 10px; COLOR: #99CCCC; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none}

 
Ce qui fait que tous les liens ne sont plus soulignés lorsque tu passes dessus, mais seulement au moment du passage...

Reply

Marsh Posté le 07-01-2003 à 16:18:53    

Ok, merci, je vais faire quelques essais hors connexion (56k oblige...).
Sinon, je suis newbie et je veux bien concevoir que mon code est vilain. Comment puis-je améliorer ça?

Reply

Marsh Posté le 07-01-2003 à 16:34:47    

Ben la fameuse séparation de l'HTML et de la mise en forme par CSS uniquement serait une bonne chose.  
 
(éviter les width="", les ALIGN , les FONT FACE qui jonchent ton code, utiliser des DIV plutôt que les tableaux pour la mise en forme de tes pages, etc. etc.)
 
Pour faire des CSS dans le bonheur, je conseille cette excellente petite chose :
 
www.bradsoft.com/topstyle/
 
Fais quelques recherches sur le forum, ya du conseil à suivre, malgré -parfois- une certaine dose d'extrémisme !
 
Sinon aller sur le site du W3C et tenter de faire valider ton code est une bonne chose : tu verras tout de suite la longue liste des choses à éviter

Reply

Marsh Posté le 07-01-2003 à 17:25:51    

Ok, merci pour les conseil  :jap:  
Sinon j'ai fait le changement pour les liens du menu et ça marche  :) . Reste plus qu'à trouver les bonne couleurs. Par contre je trouve que c'est une methode un peu penible, y a pas moyen de faire ça pour tout les liens d'un fichier? Du style tout les liens de mon fichier menu_gauche.php3?  
En tout cas, merci  :jap:

Reply

Marsh Posté le 07-01-2003 à 17:29:36    

Soit pleins de liens qui sont dans un DIV (ou un tableau) qui a la classe "menu" :
 
<div class="menu">
  <a href="...">...</a>
  <a href="...">...</a>
  <a href="...">...</a>
  <a href="...">...</a>
  <a href="...">...</a>
  <a href="...">...</a>
</div>
 
On peut définir un style pour les éléments <a> qui sont dans un élément d'une classe "menu" par :
 
.menu a {
  text-decoration: none;
}
 
.menu a:hover {
  color: #ff0000;
}
 
etc, etc...
 
voir aussi la FAQ il y a plusieurs posts sur les menus.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-01-2003 à 17:29:36   

Reply

Marsh Posté le 07-01-2003 à 17:32:12    

A ouais... Ca me parait pas mal comme methode !

Reply

Marsh Posté le 07-01-2003 à 17:52:32    

Euh... Faut faire un truc de ce style ? :  
 <!-- CADRE MENU CENTRALE -->
    <td height="5" colspan="3" align="center" valign="top" bgcolor="#FFFFFF" class="menu">

Reply

Marsh Posté le 07-01-2003 à 17:55:45    

Si cette cellule est celle qui va contenir les liens du menu, oui.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-01-2003 à 18:01:39    

C'est bizarre, ça change rien...  :(

Reply

Marsh Posté le 07-01-2003 à 18:03:45    

Ben c'était le but non ? Ne pas avoir à écrire class="menu" dans tous les <a> ?
 
Sinon montre un peu plus de ton code (HTML + CSS)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-01-2003 à 18:12:19    

Ben non, c'était pas le but, puisque j'ai fait le test dans le cadre central de ma page.
 
Sinon le code CSS :
 
td {
 font-family: Verdana, Arial;
 font-size: none;
 color: #000000;
 font-weight: none;
 border: none;
 text-decoration: none;
 
}
A.menu {
 font-family: Verdana, Arial;
 font-size: none;
 color: #99CCCC;
 text-decoration: none;
 border: 0px none;
 
}
A.menu:hover { font-family: Verdana, Arial; font-size: none; color: #FFFFFF; background-color: #446D8C; text-decoration: none}
.titre { font-family: Verdana, Arial; font-size: ; font-weight: bold; color: #330033; text-decoration: none }
.roger {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 font-style: normal;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 border: 0px none;
 text-decoration: none;
 
}
 
 
Celui de mon index.php3 :  
 
<html>
<head>
<title>Roger-1 : Talk to you  [rodgerouane]</title>
<link rel="stylesheet" href="feuille_de_style.css"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<style type="text/css">A:hover {
 FONT-SIZE: 10px; COLOR: #99CCCC; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none}
BODY {
scrollbar-face-color: #446D8C;  
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #446D8C;
scrollbar-3dlight-color: #000000;  
scrollbar-darkshadow-color: #446D8C;  
scrollbar-track-color: #FFFFFF;  
scrollbar-arrow-color: #000000;
}
</style>
<body bgcolor="#FFFFFF" background="pix/v2/background5.JPG"link="#408080" vlink="#408080" alink="#408080" bgproperties="fixed">
<!-- AFFICHAGE -->
<a name="haut"></a>  
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0" class="roger">
  <!-- CADRE TITRE -->
<tr>  
    <td colspan="5"> <? include("titre2.php3" );?> </td>
  </tr>
  <!-- CADRE MENU GAUCHE -->
  <tr>  
    <td width="127" rowspan="4" valign="top" background="pix/v2/fdgc.gif"> <? include("menu_gauche.php3" );?> </td>
    <!-- CADRE MENU CENTRALE -->
    <td height="5" colspan="3" align="center" valign="top" bgcolor="#FFFFFF">  
      <div align="left"><img src="pix/cadre/htgc2.JPG" width="10" height="10" align="top"></div></td>
    <td rowspan="2" align="center" valign="top" bgcolor="#000000">  
      <div align="right"></div></td>
    <!-- CADRE MENU DROITE -->
  </tr>
  <tr>  
    <td height="1800" colspan="3" align="center" valign="top" bgcolor="#FFFFFF" class="menu">  
      <?
////////////////////////////////////////////////
// ----- PARTIE CENTRALE DYNAMIQUE -------------
 
if (!isset($page_centre)) $page_centre="accueil2";
if (!isset($rep_rubrique)) $rep_rubrique="";
else
{
$rep_rubrique.="/";
}
if (file_exists("$rep_rubrique$page_centre.php3" ))
{
include ("$rep_rubrique$page_centre.php3" );
}
else
{
include ("404.html" );
}
 
// ---------------------------------------------
////////////////////////////////////////////////
?>
<div align="center"></div></td>
  </tr>
  <tr>  
    <td width="162" valign="bottom" bgcolor="#FFFFFF"> <div align="left"><img src="pix/cadre/bsgc2.JPG" width="15" height="20"></div></td>
    <td width="468" valign="middle" bgcolor="#FFFFFF"> <div align="center"></div></td>
    <td width="163" valign="middle" bgcolor="#FFFFFF"> </td>
    <td width="5" valign="bottom" bgcolor="#000000"> </td>
  </tr>
  <tr>  
    <td height="25" colspan="4" valign="bottom"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>  
          <td width="105" rowspan="3" bgcolor="#000000"> <div align="center"></div>
            <div align="center"><img src="pix/v2/dvbas.JPG" width="58" height="46"></div></td>
          <td height="20" valign="middle" bgcolor="#000000"> <div align="center"><font color="#FFFFFF"><a href="#haut" target="_self"><font size="1">^^  
              UP ^^</font></a></font></div></td>
          <td width="105" rowspan="3" bgcolor="#000000"><img src="pix/v2/anibas.JPG" width="100" height="46"></td>
          <td colspan="2" bgcolor="#000000"> <div align="right"></div></td>
        </tr>
        <tr>  
          <td bgcolor="#000000"><div align="center"><font color="#FFFFFF" size="-2" face="Verdana, Arial, Helvetica, sans-serif">©  
              Copyright Lucasfilm 1977-2002 © Roger-1 2002 All rights reserved</font></div></td>
          <td colspan="2" bgcolor="#000000"> </td>
        </tr>
        <tr>  
          <td bgcolor="#000000"> <div align="center"></div></td>
          <td bgcolor="#000000"> <div align="left"></div></td>
          <td> <div align="right"><img src="pix/cadre/cadrebas2.gif" width="16" height="16"></div></td>
        </tr>
      </table></td>
  </tr>
  <!-- CADRE PIED -->
  <!-- FIN D'AFFICHAGE -->
</table>
<p class="roger"> </p>
</body>
</html>
 

Reply

Marsh Posté le 07-01-2003 à 18:26:05    

1. Regroupe tout tes styles dans le fichier CSS
 
2. Vire les font-size: none; c'est complètement faux.
 
3. Si ton but est de faire ça :

Citation :

Par contre je trouve que c'est une methode un peu penible, y a pas moyen de faire ça pour tout les liens d'un fichier? Du style tout les liens de mon fichier menu_gauche.php3?


 
Tu dois ajouter 1 class="menu" dans la cellule qui va contenir ce menu et supprimer les class="menu" des liens :
 

<td width="127" rowspan="4" valign="top" background="pix/v2/fdgc.gif"> <? include("menu_gauche.php3" );?> </td>


 
Va devenir :
 

<td width="127" rowspan="4" class="menu"> <? include("menu_gauche.php3" );?> </td>


 
Ensuite les styles :
 

A.menu {
font-family: Verdana, Arial;
font-size: none;
color: #99CCCC;
text-decoration: none;
border: 0px none;
 
}
A.menu:hover { font-family: Verdana, Arial; font-size: none; color: #FFFFFF; background-color: #446D8C; text-decoration: none}


 
Deviennent :
 

.menu {
  vertical-align: top;
  background-image: url("pix/v2/fdgc.gif" );
}
 
.menu a {
  font-family: Verdana, Arial, helvetica, sans-serif;
  color: #99CCCC;
  text-decoration: none;
  border: 0 none;
}
 
.menu a:hover {  
  color: #FFFFFF;  
  background-color: #446D8C;  
  text-decoration: none;
}


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-01-2003 à 18:39:31    

Ta modif sur mon css fout des bugs partout  :( . Et pour la class="menu", là, il n'est pas dans la partie gauche (le menu) mais dans la page centrale.

Reply

Marsh Posté le 07-01-2003 à 19:02:02    

electroger a écrit :

Ta modif sur mon css fout des bugs partout  :( .


Ben il faut essayer de comprendre un tout petit peu ce que j'essaye de te faire faire...

electroger a écrit :

Et pour la class="menu", là, il n'est pas dans la partie gauche (le menu) mais dans la page centrale.


Donc class="menu" c'est pas pour le menu ?!?!???? J'essaye juste de répondre à cette question (que j'ai déjà recopié) :

Citation :

Par contre je trouve que c'est une methode un peu penible, y a pas moyen de faire ça pour tout les liens d'un fichier? Du style tout les liens de mon fichier menu_gauche.php3?


J'ai l'impression qu'on en parle pas de la même chose...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-01-2003 à 19:08:56    

Non, non, t'inquiètes on parle de la même chose. Le class="menu" est bien pour le menu, mais pour voir comment ça marche je l'ais foutu sur la page centrale, puisque tout mes liens de mon menu ont déjà un class="menu" (de façon individuelle selon la 1ere methode que l'on m'a présenté).

Reply

Marsh Posté le 07-01-2003 à 19:20:34    

OK, mais ce que j'ai donné c'était pour le menu de gauche et pas autre chose. Si tu veux faire des tests crée une copie de ta page ça sera plus simple. Il faut aussi veiller à virer les class="menu" des liens sinon ça va être le bazar.
 
Sinon essaye d'adapter à tes besoins...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed