Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1443 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°281095
electroger
Posté le 07-01-2003 à 14:54:13  profilanswer
 

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.

mood
Publicité
Posté le 07-01-2003 à 14:54:13  profilanswer
 

n°281113
gm_superst​ar
Appelez-moi Super
Posté le 07-01-2003 à 15:25:08  profilanswer
 

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
n°281143
electroger
Posté le 07-01-2003 à 15:51:17  profilanswer
 

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

n°281147
deliriumtr​emens
sic transit intestinal...
Posté le 07-01-2003 à 15:55:31  profilanswer
 

a
{
text-decoration:none;
}
 

n°281150
electroger
Posté le 07-01-2003 à 15:57:56  profilanswer
 

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

n°281162
deliriumtr​emens
sic transit intestinal...
Posté le 07-01-2003 à 16:08:08  profilanswer
 

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

n°281176
electroger
Posté le 07-01-2003 à 16:18:53  profilanswer
 

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?

n°281199
deliriumtr​emens
sic transit intestinal...
Posté le 07-01-2003 à 16:34:47  profilanswer
 

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

n°281272
electroger
Posté le 07-01-2003 à 17:25:51  profilanswer
 

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:

n°281273
gm_superst​ar
Appelez-moi Super
Posté le 07-01-2003 à 17:29:36  profilanswer
 

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
mood
Publicité
Posté le 07-01-2003 à 17:29:36  profilanswer
 

n°281278
electroger
Posté le 07-01-2003 à 17:32:12  profilanswer
 

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

n°281317
electroger
Posté le 07-01-2003 à 17:52:32  profilanswer
 

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

n°281322
gm_superst​ar
Appelez-moi Super
Posté le 07-01-2003 à 17:55:45  profilanswer
 

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
n°281328
electroger
Posté le 07-01-2003 à 18:01:39  profilanswer
 

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

n°281330
gm_superst​ar
Appelez-moi Super
Posté le 07-01-2003 à 18:03:45  profilanswer
 

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
n°281338
electroger
Posté le 07-01-2003 à 18:12:19  profilanswer
 

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>
 

n°281354
gm_superst​ar
Appelez-moi Super
Posté le 07-01-2003 à 18:26:05  profilanswer
 

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
n°281370
electroger
Posté le 07-01-2003 à 18:39:31  profilanswer
 

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.

n°281402
gm_superst​ar
Appelez-moi Super
Posté le 07-01-2003 à 19:02:02  profilanswer
 

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
n°281412
electroger
Posté le 07-01-2003 à 19:08:56  profilanswer
 

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

n°281421
gm_superst​ar
Appelez-moi Super
Posté le 07-01-2003 à 19:20:34  profilanswer
 

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
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[C++] Probleme de libération de mémoireUPDATE ne met rien à jour !!!!!!!!!!! Help, I need Heeeelllppp ;o)
--> Probleme pour recupérer une valeur dans une liste ! HELP !!!!! <--Problème d'Impression
Probleme de retour d'un servlet vers un jspproblème étrange lors de la génération de mon code HTML
Probleme de comil avec wxWindows[java] probleme de popup avec dreamweaver
Problème avec la fonction mail()Bizarement bizard... verif de mot de pass, rien ne marche
Plus de sujets relatifs à : De gros problème avec le css : je comprend rien


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR