IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Application des styles dans le HTML


Sujet :

CSS

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Chef de projet en SSII
    Inscrit en
    Octobre 2014
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Chef de projet en SSII

    Informations forums :
    Inscription : Octobre 2014
    Messages : 10
    Points : 6
    Points
    6
    Par défaut Application des styles dans le HTML
    bonjour,

    je n'ai pas trouvé ma réponse dans le forum, j'ouvre donc une nouvelle discussion.
    Si elle existe et que je ne l'ai pas trouvé je vous pris de m'excusez.

    Je viens de créer un exemple basique qui n'a pas l'air de vouloir fonctionner.

    Je crée un dans un fichier HTML des zones avec les balises <div>

    j'essai d'application un class à une balise mais je ne comprend pas pourquoi cela ne fonctionne pas.
    si je copie colle ma classe dans le header, cela fonctionne mais s'applique a tous les document, ce n'est pas ce que je recherche.

    voila mon html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="baniere">baniere</div>
    <div id="menu" class="toto">
    	<ul>
    		<li><a href="#1">Home</a></li> 
    		<li><a href="#2">Portfolio</a></li> 
    		<li><a href="#3">News</a></li>
    		<li><a href="#4">Labs</a></li> 
    		<li><a href="#5">Contact</a></li> 
    	</ul>
    </div>

    ....

    et mon CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    .toto{
    	ul{ 
    		display: table;
    		 width: 500px; 
    		 margin: 100px auto; 
    		 padding: 0;
    		 background: dodgerblue;
    		 background: -webkit-linear-gradient(deepskyblue, dodgerblue); 
    		 background: -moz-linear-gradient(deepskyblue, dodgerblue); 
    		 background: -ms-linear-gradient(deepskyblue, dodgerblue); 
    		 background: -o-linear-gradient(deepskyblue, dodgerblue); 
    		 border-radius: 3px; 
    		 box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
    	}
    	ul li{ display: table-cell; 
    	}
    	ul li:first-child a{ border-radius: 3px 0 0 3px; } 
    	ul li:last-child a{ border-radius: 0 3px 3px 0; }
    	ul li a
    	{ 
    		display: block; 
    		text-align: center; 
    		color: rgba(0, 0, 0, .7); 
    		text-decoration: none; 
    		padding: 8px 8px 17px 8px; 
    		text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    		box-shadow: 
    			0 1px 0 rgba(255, 255, 255, .7) inset, 
    			0 -1px 0 hsl(210, 100%, 32%) inset, 
    			0 -2px 0 hsl(210, 100%, 38%) inset, 
    			0 -3px 0 hsl(210, 100%, 44%) inset, 
    			0 -4px 0 hsl(210, 100%, 50%) inset, 
    			0 -5px 0 hsl(210, 100%, 60%) inset;
    		transition: padding .3s, background .3s;
    		position: relative;
    	}
     
    	ul li a:hover, 
    	ul li a:focus{  
    		display: block; 
    		text-align: center; 
    		color: rgba(0, 0, 0, .7); 
    		text-decoration: none; 
    		padding: 8px 25px 17px 25px;
    		text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    		background: rgba(255,255,255,.2);
    		box-shadow: 
    			0 1px 0 rgba(255, 255, 255, .7) inset, 
    			0 -1px 0 hsl(210, 100%, 32%) inset, 
    			0 -2px 0 hsl(210, 100%, 38%) inset, 
    			0 -3px 0 hsl(210, 100%, 44%) inset, 
    			0 -4px 0 hsl(210, 100%, 50%) inset, 
    			0 -5px 0 hsl(210, 100%, 60%) inset;
    		transition: all .3s 0s;
     
    	}
    	ul li a:active{ 
    		background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    		box-shadow: 0 0 2px rgba(0,0,0,.3) inset; 
    	}
     
    	ul li a::before{ 
    		content: ''; 
    		position: absolute; 
    		left: 50%; 
    		bottom: 9px; 
    		margin-left: -2px; 
    		width: 4px; 
    		height: 4px; 
    		border-radius: 50%; 
    		background: rgba(0, 0, 0, .5); 
    	}
     
    	ul li a:hover::before, 
    	ul li a:focus::before{ 
    		background: white; 
    		box-shadow: 0 0 2px white, 0 -1px 0 rgba(0, 0, 0, .4); 
    		}
    }

    la question est :

    savez vous pourquoi le style ne semble pas s'appliquer ?

    Merci
    Christophe

  2. #2
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    Sauf si vous utilisez un pré-processeur, CSS ne s'imbrique pas ainsi.

    Autrement dit :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .foo {
      bar { }
    }
    ne permet pas d'atteindre <bar class="foo">.

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Chef de projet en SSII
    Inscrit en
    Octobre 2014
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Chef de projet en SSII

    Informations forums :
    Inscription : Octobre 2014
    Messages : 10
    Points : 6
    Points
    6
    Par défaut
    merci beaucoup pour la réponse.
    Peut etre aurais tu un bon tuto a me conseiller ou me donner un exemple.

    Merci beaucoup

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Chef de projet en SSII
    Inscrit en
    Octobre 2014
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Chef de projet en SSII

    Informations forums :
    Inscription : Octobre 2014
    Messages : 10
    Points : 6
    Points
    6
    Par défaut
    en fait je ne fait pas tout a fait la même chose :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     <div id=menu class="foo> {
      <bar>....</bar> 
    }

  5. #5
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    Ça ne va toujours pas, et c'est illogique : il faudrait à la rigueur #menu ou .foo comme sélecteur.

    Je vous conseille de lire le tuto Premiers pas avec CSS, et de valider votre code HTML/CSS.

  6. #6
    Membre actif

    Homme Profil pro
    Webmaster, Réalisateur Vidéo, Chef de projet Web documentaire
    Inscrit en
    Juillet 2006
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster, Réalisateur Vidéo, Chef de projet Web documentaire
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juillet 2006
    Messages : 404
    Points : 241
    Points
    241
    Par défaut
    si je prend le le premier CSS que tu as posté il faut faire
    ne pas mettre de parenthèses entre la class toto et l'UL.
    l'UL dépend de toto. tu peux aussi n'écrire que .toto cela s'appliquera à tout ce que contient la classe toto

  7. #7
    Membre éclairé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juin 2012
    Messages : 519
    Points : 705
    Points
    705
    Par défaut
    Oui mais en écrivant:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .toto ul {   }
    /*ou*/
    ul.toto {  }
    on peut affiner davantage le style lorsqu'il y a des sous menus par exemple
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    ul.toto ul       { line-height:0.7em; }
    /*ou*/
    .toto ul ul { line-height:0.7em; }

    Dans ce cas, il faut coder
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
     <ul class='toto'> ......

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Application de style dans une balise INPUT
    Par Zoro63 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 13/09/2008, 17h51
  2. [AJAX] Perte des styles dans IE
    Par keulu dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 17/01/2008, 10h11
  3. Gestion des styles dans un menu
    Par debie1108 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 30/05/2007, 09h03
  4. [HTML][CSS] Comment empecher l'application des styles
    Par ardi dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 28/03/2006, 12h56
  5. [CSS] copie des styles par défaut html...possible?
    Par luta dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 27/10/2005, 09h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo