Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

mushylex

[résolu] CSS

Messages recommandés

Bonjour,

je viens pour une petite erreur surement, mais je ne sais pas où elle se cache

 

Mon problème est dans le titre,

Arial->OK

B-image ->OK

B-attachment ->bug !

 

*
{
font-family: Arial;
background-image: url(background.jpg);
background-attachment: fixed ! important;
} 

 

merci d'avance

Modifié par mushylex

Partager ce message


Lien à poster
Partager sur d’autres sites

Pas d'espace dans !important :P

 

ça ne change rien

 

Au cas où je vous mets aussi le code entier de la page:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>

<!-- Rajouter du son sur le site -->
<bgsound src="\musiques\Sonnerie_Ultrason.mp3" loop=infinite>

<!-- rajouter une image dans la barre d'adresse -->
<link rel="icon" type="image/png" href="http://alex4gous.123.fr/favicon.png" />
<!--[if IE]> <link rel="shortcut icon" type="image/x-icon" href="http://alex4gous.123.fr/favicon.ico" /> <![endif]-->


 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />

<!-- le titre -->
 <title>Alex4gous powa</title>

 <!--  entrée du code CSS -->

 <style type="text/css">

<!-- les balises importantes -->

*
{
font-family: Arial;
background-image: url(background.jpg);
background-attachment: fixed ! important;
} 

a:link
{
color: green !important;
}

a:visited
{
}

a:hover
{
}

a:active
{
}



<!-- Les balises pour le texte -->  

.titre
{
font-style: italic
}

h1 
{
border: dashed;
text-align: center;
background-color: white;
color: blue !important;
font-size: xx-large !important;
text-decoration: blink !important;
}

h2
{
text-align: center;
color: gray !important;
font-size: x-large !important;
}

h3
{
margin: 10px;
color: white !important;
font-size: medium !important;
}

div#download
{
margin: 10px;
min-width: 470px;
text-decoration:underline;
color: yellow;
}

#image1 
{
width: 800px; height: 600px;
}

<!-- blink ne fonctionne pas sous IE 6.0, mais fonctionne sous Firefox quel nul ce bilou alors ! -->


 </style>
</head>
<body>

<h1 class="titre">Re construction du site</h1>
<h2 class="titre">En CSS</h2>
</br>

<div id="download">
<a href="\musiques\Sonnerie_Ultrason.mp3">Ultrason pour dim</a>
</br>
texte dans la div "download"
</div>

<!-- il affiche le texte "image laissé..." et quand on laisse la souris dessus il affiche "pke c une tache" -->
<h3 class="titre"><acronym title="Pke c une tache!">image laissé pour ma soeur</acronym></h3>


<img id="image1" alt="mon image 1" title="mon image 1" src="HPIM0412_800x600.jpg" />
</br>
</br>
</br>
</br>
__Fin page__
</body>
</html>

Modifié par mushylex

Partager ce message


Lien à poster
Partager sur d’autres sites

Les commentaire en css c'est pas <!-- commentaire -->

mais /* commentaire */

 

Donc là ou tu as du css, change tes commentaire, ça donne ça :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>

<!-- Rajouter du son sur le site -->
<bgsound src="\musiques\Sonnerie_Ultrason.mp3" loop=infinite>

<!-- rajouter une image dans la barre d'adresse -->
<link rel="icon" type="image/png" href="http://alex4gous.123.fr/favicon.png" />
<!--[if IE]> <link rel="shortcut icon" type="image/x-icon" href="http://alex4gous.123.fr/favicon.ico" /> <![endif]-->


 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />

<!-- le titre -->
 <title>Alex4gous powa</title>

 <!--  entrée du code CSS -->

 <style type="text/css">

/* les balises importantes */

*
{
font-family: Arial;
background-image: url(background.jpg);
background-attachment: fixed !important;
}

a:link
{
color: green !important;
}

a:visited
{
}

a:hover
{
}

a:active
{
}


/* Les balises pour le texte */

.titre
{
font-style: italic
}

h1
{
border: dashed;
text-align: center;
background-color: white;
color: blue !important;
font-size: xx-large !important;
text-decoration: blink !important;
}

h2
{
text-align: center;
color: gray !important;
font-size: x-large !important;
}

h3
{
margin: 10px;
color: white !important;
font-size: medium !important;
}

div#download
{
margin: 10px;
min-width: 470px;
text-decoration:underline;
color: yellow;
}

#image1
{
width: 800px; height: 600px;
}
/* blink ne fonctionne pas sous IE 6.0, mais fonctionne sous Firefox quel nul ce bilou alors ! */


 </style>
</head>
<body>

<h1 class="titre">Re construction du site</h1>
<h2 class="titre">En CSS</h2>
</br>

<div id="download">
<a href="\musiques\Sonnerie_Ultrason.mp3">Ultrason pour dim</a>
</br>
texte dans la div "download"
</div>

<!-- il affiche le texte "image laissé..." et quand on laisse la souris dessus il affiche "pke c une tache" -->
<h3 class="titre"><acronym title="Pke c une tache!">image laissé pour ma soeur</acronym></h3>


<img id="image1" alt="mon image 1" title="mon image 1" src="HPIM0412_800x600.jpg" />
</br>
</br>
</br>
</br>
<!-- Fin page -->
</body>

</html>

Au passage, préfère <br/> à </br> t'auras moins de problèmes si tu cherches ensuite à faire valider tes pages :P

Modifié par Phantom-X

Partager ce message


Lien à poster
Partager sur d’autres sites

Les commentaire en css c'est pas <!-- commentaire -->

mais /* commentaire */

Dac

 

Au passage, préfère <br/> à </br> t'auras moins de problèmes si tu cherches ensuite à faire valider tes pages :P

c'est fait... ça fera des erreurs en moins lors du passage sur W3C :P

 

Mais...

background-attachment: fixed ! important;

ne fonctionne toujours pas :P

Partager ce message


Lien à poster
Partager sur d’autres sites

Question, c'est quoi l'astérisque (*) pour les trois premiers attributs css ? (c'est la première fois que je vois ça :P )

 

Si ça concerne toute la page met plutôt body :P

Modifié par Phantom-X

Partager ce message


Lien à poster
Partager sur d’autres sites

Question, c'est quoi l'astérisque (*) pour les trois premiers attributs css ? (c'est la première fois que je vois ça :P )

 

* signifie pour n'importe quelle balise.

 

effectivement la balise body aurai le même effet

Modifié par mushylex

Partager ce message


Lien à poster
Partager sur d’autres sites

Euh..........

 

avec la balise body plutot que *, ça marche...

 

body
{
font-family: Arial;
background-image: url(background.jpg);
background-attachment: fixed ! important;
} 

 

merci Phantom-X :P

Partager ce message


Lien à poster
Partager sur d’autres sites

Je te l'avais dit.

 

Parce qu'en fait,d'après ta description, * et body désignent deux choses différentes.

body désigne bien sûr le corps de la page (tout ce qu'il y a entre les balises <body> et </body> dans le code html) alors que * désigne tous les class et id de ta page. Ainsi ici tu instaurais une police et un background à tous les class et id, ce qui fonctionne sans problème, mais la background-attachment ne s'applique qu'à body (je crois)

 

Du coup ça devait essayer tant bien que mal d'appliquer un background-attachment à, par exemple, des liens, ce qui bien évidemment ne fonctionne pas :P

Partager ce message


Lien à poster
Partager sur d’autres sites

Quelques précisions, si vous permettez,

  • "id" et "class" sont des étiquettes qui permettent d'attribuer un comportement à UNE occurrence d'une balise ("id") ou un ensemble d'occurrences de balises ("class"). Les attributs du "background", quels qu'ils soient, s'appliquent à un conteneur, c'est-à-dire à une (ou des) balise(s) comme le <body> lui-même, bien sûr, mais aussi une <div>, un <span>, un <p>, etc. Dans ce cadre, "background-attachment" n'a pas plus de limitations d'utilisation qu'un autre attribut.


  • Comme l'indiquent les recommandations du W3C, dans l'alinéa 6.4.2 Les règles avec la valeur !important (ici, traduction du site yoyodesign.org), "! important" ou "!important" est destiné à permettre au visiteur de prendre le pas, avec une feuille de style personnelle, sur celle de l'auteur de la page web. Ainsi, il ne semble pas pertinent de trouver "!important" dans la feuille de style de l'auteur, puisque de toute manière le visiteur aura finalement gain de cause.

    Cependant, une extension de son utilisation permet d'outrepasser la sacro-sainte règle de priorité des feuilles de style "en cascade" (qui veut que ce soit le dernier qui cause qui ait raison). Le site babylon-design.com va encore plus loin, en utilisant le constat d'inefficacité de "!important" sous IE pour aller jusqu'à proposer des résultats différents selon les navigateurs ! Mais là, on s'éloigne de la préoccupation initiale...


  • Les recommandations du W3C précisent encore (même source yoyodesign.org), dans le même chapitre 6, à l'alinéa 6.2.1 La valeur 'inherit', que « La valeur 'inherit' (symbolisée par l'* dans la feuille de style) provoque l'héritage des valeurs par les propriétés. Ceci s'applique également aux propriétés dont la valeur n'est normalement pas héritée ». L'exemple donné n'est hélas pas extrêmement démonstratif...

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×