> Tous les forums > Forum des Webmasters
 feuille de style
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
melissasat
  Posté le 27/10/2012 @ 16:30 
Aller en bas de la page 
Petite astucienne

Bonjour

je n'arrive pas a appliquer ma feuille de style, quand je fais un test dans firefox, IE ou google chrome le texte s'affiche en brut.

voila ma feuille de style:

/* CSS Document feuille de stye */


/* Styles spécifiques */


body {
background-image: url(../images/fond.gif);
left:50%;
top :50%;
width:700px;
height:500px;
margin-left:-350px;
margin-top:-250px;
}


#Titre {
background-image: url(../images/titre.gif);
background-repeat: no-repeat;
left : 0px ;
top : 0px ;
width : 100% ;
height : 60px ;
}

#Menus {
left : 0px ;
top : 60px ;
width : 100 ;
height : 20px ;
text-align : center ;
background-color : #333333 ;
}

#Bandeau {
left : 0px ;
top : 80px ;
width : 100 ;
height : 100px ;
background-image:url(../images/bandeau0.jpg) ;
}

#Postits {
left : 350px ;
top : 160px ;
width : 320px ;
height : 220px ;
}

#Postit1 {
left : 0px ;
top : 0px ;
}

#Postit2 {
left :170px ;
top : 0px ;
}

#Postit3 {
left :0px ;
top : 120px ;
}


#Postit4 {
left :170px ;
top : 120px ;
}


#Ident {
left : 30px ;
top : 200px ;
width : 160px ;
height : 60px ;
background-color : #FFFFFF ;
background-image:url(../images/ident.png) ;
background-repeat:no-repeat;
}
#TextIdent {
left : 40px ;
top : 0px ;
width : 120px ;
height :100 ;
}


#News {
left :30px ;
top : 280px ;
width : 250px ;
height : 195px ;
background-image:url(../images/news.png) ;
background-repeat:no-repeat;

}

#TextNews {
left :0px ;
top : 75px ;
width : 100 ;
height :120px ;
background-color : #FFFFFF ;
}

#Liens {
left : 350px ;
top : 430px ;
width : 320px ;
height : 45px ;
background-color : #FFFFFF ;
background-image:url(../images/lien.png) ;
background-repeat:no-repeat;
}

#TextLiens {
left : 50px ;
top : 0px ;
width :270px ;
height :100 ;
}

#Pied {
left : 0px ;
top : 487px ;
width : 100 ;
height : 13px ;
font-size : x-small ;
text-align : right ;
background-color : #666666 ;
}

/* Styles généraux */

.petitTitre {
background-color : #AAAAAA ;
font-weight : bold ;
width : 100 ;
text-align : center ;

}

.petitTexte {
text-align : left ;
font-color : #000000 ;
font-size : x-small ;
}

.div {
overflow : hiden ;
position : absolute ;
font-family : verdana, serif ;
font-size : small
color : #FFFFFF ;
}

div.divPostit {
width : 150px ;
height : 100px ;
background-color : #AAAAAA ;
text-align : center ;
cursor : pointer ;
}


/*modification style prédéfini */

a:link {
text-decoration : none ;
color : #AAAAAA ;
}

a:visited {
text-decoration : none ;
color : #AAAAAA ;
}

et ma page html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1 //EN"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="shortcut icon" type="image/x-icon" href="images/boutiqueIcon.ico" />
<title>Ma Boutique Personnelle</title>
<link rel="stylesheet" type="text/css" href="princpal.css"/>
</head>
<body>
<div id="Principal">

<div id="Titre" > Ma Boutique Personnelle </div>
<div id="Menus"> acceuil t-shirt personnalisé boutique votre panier espace personnel contact </div>
<div id="Bandeau"></div>
<div id="Ident"> Deja client <div id="TextIdent"> login: <br> mdp: </div></div>
<div id="Postits"> <div id="Postit1"> T-shirt <br> personnalisé </div><div id="Postit2">boutique</div>
<div id="Postit3">Votre<br>Panier</div><div id="Postit4">votre<br>espace<br>personnel</div></div>
<div id="News"> News <div id="TextNews"></div></div>
<div id="Liens">Mes liens Favoris <div id="TextLiens">madmoizelle.com </div></div>

</div>
</body>
</html>

ou es mon erreur? merci d'avance!

Publicité
pc-facile13
 Posté le 27/10/2012 à 16:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour,

Ne serait-ce pas juste une faute de frappe ici:

<link rel="stylesheet" type="text/css" href="princpal.css"/>

princpal au lieu de principal ?

melissasat
 Posté le 27/10/2012 à 17:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

ah bah deja si.... maintenant la page est toute blanche quand je fais un test...

pc-facile13
 Posté le 27/10/2012 à 17:11 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

trouvé {#} :

.div {
overflow : hiden ;
position : absolute ;
font-family : verdana, serif ;
font-size : small
color : #FFFFFF ;
}

Il te manque ";" après small

melissasat
 Posté le 27/10/2012 à 17:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

aah oui merci, bon c'est mieux mais tous les autres ne s'appliquent pas, j'ai pas le simages ni les couleurs, juste les ecriture comme je voulais...

pc-facile13
 Posté le 27/10/2012 à 17:29 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Toujours dans:

.div {
overflow : hiden ;
position : absolute ;
font-family : verdana, serif ;
font-size : small
color : #FFFFFF ;
}

il faut 2 "d" à hidden

melissasat
 Posté le 27/10/2012 à 17:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

je suis desolé.. :/ ça marche toujours pas... j'ai aussi mis le fichier css avec le html dasn le meme dossier je l'ai appelé style.css ça change tjs rien:

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">;
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<link rel="shortcut icon" type="image/x-icon" href="images/boutiqueIcon.ico" />
<title>Ma Boutique Personnelle</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

sinon, au niveau des meta j'ai mis <meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">. et y'a pas d'entete au fichier css?

pc-facile13
 Posté le 27/10/2012 à 17:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Non pas de souci à ce niveau là puisque les styles s'appliquent bien sur les polices c'est qu'il trouve bien la feuille de style.
Il n'y a pas besoin d'en-tête sur les feuilles CSS.
Je réfléchis voir si je trouve autre chose...



Modifié par pc-facile13 le 27/10/2012 18:20
melissasat
 Posté le 27/10/2012 à 17:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

j'ai tenté de remplacer #principal en body et toujours rien.... ok merci :)

Publicité
elle
 Posté le 27/10/2012 à 18:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

<meta name="generator" content="PSPad editor, www.pspad.com">;

elle
 Posté le 27/10/2012 à 18:04 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Tu devrais valider ton code HTML et ta feuille de styles pour commencer...

Vérifie le chemin des images (si tu as déplacé ta page HTML, les chemins doivent être corrigés...)

Les majuscules dans les styles, pas une bonne idée...



Modifié par elle le 27/10/2012 18:08
melissasat
 Posté le 27/10/2012 à 18:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

je met un ";"? j'en met a tous dans le head?

comment ça valider?

pc-facile13
 Posté le 27/10/2012 à 18:11 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bien vue elle, cette ligne a été changée entre le premier et le dernier post. {#}

elle
 Posté le 27/10/2012 à 18:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

melissasat a écrit :

je met un ";"? j'en met a tous dans le head?

comment ça valider?

Non, tu enlèves le ;

Valider à l'aide d'un validateur : http://validator.w3.org/, http://validator.progysm.com/



Modifié par elle le 27/10/2012 18:16
melissasat
 Posté le 27/10/2012 à 18:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

voila l'erreur:

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>

Erreur à la colonne 50: "HTTP:" n'est pas un nom réservé(type #31)

Erreur à la colonne 50: ne peut continuer en raison des erreurs précédentes(type #154)

j'ai tout supprimer, recommencé le projet du debut et collé ce que j'avais fait du coup plus de problème sur la ou sont les fichiers. maintenant le fond s'affiche... et c'est tout j'ai plus les écritures.



Modifié par melissasat le 27/10/2012 18:22
melissasat
 Posté le 27/10/2012 à 18:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

j'ai fais les verification et j'ai tout corrigé ça me dis que tout est ok feuille de style et html. Mais je n'ai toujours que le fond sui s'affiche...

pc-facile13
 Posté le 27/10/2012 à 18:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Montre nous le code CSS et HTML corrigés stp.



Modifié par pc-facile13 le 27/10/2012 18:51
Publicité
melissasat
 Posté le 27/10/2012 à 18:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">;
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<link rel="shortcut icon" type="image/x-icon" href="images/boutiqueIcon.ico" >
<title>Ma Boutique Personnelle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>


<div id="titre" > Ma Boutique Personnelle </div>
<div id="menus"> acceuil t-shirt personnalisé boutique votre panier espace personnel contact </div>
<div id="bandeau"></div>
<div id="ident"> Deja client <div id="TextIdent"> login: <br> mdp: </div></div>
<div id="postits"> <div id="postit1"> T-shirt <br> personnalisé </div><div id="postit2">boutique</div>
<div id="postit3">Votre<br>Panier</div><div id="postit4">votre<br>espace<br>personnel</div></div>
<div id="news"> News <div id="textNews"></div></div>
<div id="liens" >Mes liens Favoris <div id="textLiens">madmoizelle.com </div></div>


</body>
</html>

/* CSS Document feuille de stye */


/* Styles spécifiques */

body{
background-image:url(images/fond.jpg);
left:50%;
top :50%;
width:700px;
height:500px;
margin-left:-350px;
margin-top:-250px;
}


#titre {
background-image: url(images/titre.jpg);
background-repeat: no-repeat;
left : 0px ;
top : 0px ;
width : 100% ;
height : 60px ;
}

#menus {
left : 0px ;
top : 60px ;
width : 100% ;
height : 20px ;
text-align : center ;
background-color : #333333;
}

#bandeau {
left : 0px ;
top : 80px ;
width : 100% ;
height : 100px ;
background-image:url(images/bandeau0.jpg) ;
}

#postits {
left : 350px ;
top : 160px ;
width : 320px ;
height : 220px ;
}

#postit1 {
left : 0px ;
top : 0px ;
}

#postit2 {
left :170px ;
top : 0px ;
}

#postit3 {
left :0px ;
top : 120px ;
}


#postit4 {
left :170px ;
top : 120px ;
}


#ident {
left : 30px ;
top : 200px ;
width : 160px ;
height : 60px ;
background-color : #FFFFFF ;
background-image:url(images/ident.png) ;
background-repeat:no-repeat;
}
#textIdent {
left : 40px ;
top : 0px ;
width : 120px ;
height :100% ;
}


#news {
left :30px ;
top : 280px ;
width : 250px ;
height : 195px ;
background-image:url(images/news.png) ;
background-repeat:no-repeat;

}

#textNews {
left :0px ;
top : 75px ;
width : 100% ;
height :120px ;
background-color : #FFFFFF ;
}

#liens {
left : 350px ;
top : 430px ;
width : 320px ;
height : 45px ;
background-color : #FFFFFF ;
background-image:url(images/lien.png) ;
background-repeat:no-repeat;
}

#textLiens {
left : 50px ;
top : 0px ;
width :270px ;
height :100% ;
}

#pied {
left : 0px ;
top : 487px ;
width : 100% ;
height : 13px ;
font-size : x-small ;
text-align : right ;
background-color : #666666 ;
}

/* Styles généraux */

.petitTitre {
background-color : #AAAAAA ;
font-weight : bold ;
width : 100% ;
text-align : center ;

}

.petitTexte {
text-align : left ;
color: #000000 ;
font-size : x-small ;
}

.div {
overflow : hidden ;
position : absolute ;
font-family : verdana, serif ;
font-size : small ;
color : #FFFFFF ;
}

.postit {
width : 150px ;
height : 100px ;
background-color : #AAAAAA ;
text-align : center ;
cursor : pointer ;
}


/*modification style prédéfini */

a:link {
text-decoration : none ;
color : #AAAAAA ;
}

a:visited {
text-decoration : none ;
color : #AAAAAA ;
}

elle
 Posté le 27/10/2012 à 18:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Va falloir utiliser des balises plus spécifiques que les div, si tu veux faire quelque chose de bien : des balises de titre, paragraphes, liens, etc.

Le ; est toujours là... Tu es certaine que ça valide en strict, ce code?



Modifié par elle le 27/10/2012 18:56
Dreamer
 Posté le 27/10/2012 à 19:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Beaucoup d'erreurs au validateu et à la première ligne..

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Il ne faut pas d'espace entre < et ! ni entre dtd et >

melissasat
 Posté le 27/10/2012 à 19:23 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

je m'etais trompée voila:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250"/>
<meta name="generator" content="PSPad editor, www.pspad.com"/>;
<link rel="shortcut icon" type="image/x-icon" href="images/boutiqueIcon.ico" />
<title>Ma Boutique Personnelle</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>


<div id="titre" > Ma Boutique Personnelle </div>
<div id="menus"> acceuil t-shirt personnalisé boutique votre panier espace personnel contact </div>
<div id="bandeau"></div>
<div id="ident"> Deja client <div id="TextIdent"> login: <br/> mdp: </div></div>
<div id="postits"> <div id="postit1"> T-shirt <br/> personnalisé </div><div id="postit2">boutique</div>
<div id="postit3">Votre<br/>Panier</div><div id="postit4">votre<br/>espace<br/>personnel</div></div>
<div id="news"> News <div id="textNews"></div></div>
<div id="liens" >Mes liens Favoris <div id="textLiens">madmoizelle.com </div></div>


</body>
</html>

/* CSS Document feuille de stye */


/* Styles spécifiques */

body{
background-image:url(images/fond.jpg);
left:50%;
top :50%;
width:700px;
height:500px;
margin-left:-350px;
margin-top:-250px;
}


#titre {
background-image: url(images/titre.jpg);
background-repeat: no-repeat;
left : 0px ;
top : 0px ;
width : 100% ;
height : 60px ;
}

#menus {
left : 0px ;
top : 60px ;
width : 100% ;
height : 20px ;
text-align : center ;
background-color : #333333;
}

#bandeau {
left : 0px ;
top : 80px ;
width : 100% ;
height : 100px ;
background-image:url(images/bandeau0.jpg) ;
}

#postits {
left : 350px ;
top : 160px ;
width : 320px ;
height : 220px ;
}

#postit1 {
left : 0px ;
top : 0px ;
}

#postit2 {
left :170px ;
top : 0px ;
}

#postit3 {
left :0px ;
top : 120px ;
}


#postit4 {
left :170px ;
top : 120px ;
}


#ident {
left : 30px ;
top : 200px ;
width : 160px ;
height : 60px ;
background-color : #FFFFFF ;
background-image:url(images/ident.png) ;
background-repeat:no-repeat;
}
#textIdent {
left : 40px ;
top : 0px ;
width : 120px ;
height :100% ;
}


#news {
left :30px ;
top : 280px ;
width : 250px ;
height : 195px ;
background-image:url(images/news.png) ;
background-repeat:no-repeat;

}

#textNews {
left :0px ;
top : 75px ;
width : 100% ;
height :120px ;
background-color : #FFFFFF ;
}

#liens {
left : 350px ;
top : 430px ;
width : 320px ;
height : 45px ;
background-color : #FFFFFF ;
background-image:url(images/lien.png) ;
background-repeat:no-repeat;
}

#textLiens {
left : 50px ;
top : 0px ;
width :270px ;
height :100% ;
}

#pied {
left : 0px ;
top : 487px ;
width : 100% ;
height : 13px ;
font-size : x-small ;
text-align : right ;
background-color : #666666 ;
}

/* Styles généraux */

.petitTitre {
background-color : #AAAAAA ;
font-weight : bold ;
width : 100% ;
text-align : center ;

}

.petitTexte {
text-align : left ;
color: #000000 ;
font-size : x-small ;
}

.div {
overflow: hidden;
position : absolute ;
font-family : verdana, serif ;
font-size : small ;
color : #FFFFFF ;
}

.postit {
width : 150px ;
height : 100px ;
background-color : #AAAAAA ;
text-align : center ;
cursor : pointer ;
}


/*modification style prédéfini */

a:link {
text-decoration : none ;
color : #AAAAAA ;
}

a:visited {
text-decoration : none ;
color : #AAAAAA ;
}

Dreamer
 Posté le 27/10/2012 à 19:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Re

Et si tu écris ceci, tu verras, ça ira mieux

body{
background-image:url(images/fond.jpg);
left:50%;
top :50%;
width:700px;
height:500px;
/*margin-left:-350px;
margin-top:-250px;*/
}

Ou supprimes le margin-left et le margin-top , car tu décales tout en haut et sur la gauche, résultat on ne vois rien !!

Supprimes-moi aussi le ; situé à la fin du meta author, ça fait tache

melissasat
 Posté le 27/10/2012 à 19:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Alors la MERCI!!!!!!! ça marche mouhahahahaa desolé je suis trop contente c'est bon!! j'ai perdu ma journée dessus!

Publicité
Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
87,91 €Carte mère Asus ROG Strix B450-F Gaming II (socket AM4) à 87,91 € livrée
Valable jusqu'au 20 Octobre

Amazon Allemagne fait une promotion sur la carte mère Asus ROG Strix B450-F Gaming II à 80,57 €. Comptez 7,04 € pour la livraison en France soit un total de 87,61 € au lieu de 120 €. La carte mère ASUS STRIX B450-F GAMING II est idéale pour concevoir un PC puissant et à l'aise dans toutes les situations : multimédia, bureautique et jeux vidéo, vous pourrez assembler la configuration de vos rêves avec un AMD Ryzen sur socket AM4.


> Voir l'offre
132,84 €Ecouteurs intra sans-fil Sony WF-1000XM3 à réduction de bruit active à 132,84 € livrés
Valable jusqu'au 20 Octobre

Amazon Italie fait une belle promotion sur les écouteurs intra-auriculaire sans-fil Sony WF-1000XM3 avec réduction de bruit active qui passent à 127,86 €. Comptez 4,98 € pour la livraison en France soit un total de alors 132,84 € livrés qu'on les trouve ailleurs à plus de 170 €. Performants, confortables et modernes, les écouteurs True Wireless Sony WF-1000XM3 s'inviteront naturellement dans votre quotidien. Livrés avec un boîtier de charge/transport, ils bénéficieront d'une autonomie maximale de 24 heures tout en assurant une écoute de haute qualité grâce à la puce Bluetooth 5.0. Gérez facilement votre lecture avec les commandes tactiles sur l'oreillette, prenez des appels dans les meilleures conditions avec les deux microphones intégrés et discutez facilement sans avoir besoin de retirer vos écouteurs grâce à la fonction Quick Attention.


> Voir l'offre
18,09 €Set de 30 lames bois et métal Bosch pour scies sauteuses + boite à 18,09 €
Valable jusqu'au 20 Octobre

Amazon fait une promotion sur le set de 30 lames bois et métal Bosch pour scies sauteuses avec leur boite de rangement à 18,09 €. On trouve l'ensemble ailleurs à partir de 36 €. Les lames portent les références T119BO, T111C et T118A (10 lames de chaque).


> Voir l'offre

Sujets relatifs
feuille de style avec dreamweaver CS6
Début d'une feuille de style
Problème feuille de style .css
creer une feuille de style
feuille de style e css
Feuille de style CSS
Blog/feuille de style/css
Feuille de style CSS
Affichage, feuille de style et résolution
Feuille de style
Plus de sujets relatifs à feuille de style
 > Tous les forums > Forum Forum des Webmasters