> 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 :)

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
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
749,99 €Ultrabook HONOR MagicBook 15 (Core i5, 16 Go, 512 Go SSD) à 749,99 €
Valable jusqu'au 28 Mai

Amazon fait une promotion sur son ultrabook HONOR MagicBook 15 qui passe à 749,99 € au lieu de 899 €. Cet ordinateur portable possède un écran 15 pouces Full HD IPS, un processeur Intel Core i5-1135G7, 16 Go de mémoire DDR4, un SSD 512 Go PCIe NVME, le WiFi6 / Bluetooth 5.1, un lecteur d'empreintes, une webcam, un clavier rétro éclairé, une batterie 56 Wh (jusqu'à 10h d'autonomie) et ne pèse que 1,53 kg. Il fonctionne sous Windows 10 (que vous pouvez passer à Windows 11). Une très bonne affaire pour une machine compacte et puissante.


> Voir l'offre
16,99 €Terminal de paiement SumUp Air à 16,99 €
Valable jusqu'au 29 Mai

RueDuCommerce fait une belle promotion sur le terminal de paiement SumUp Air sans fil qui passe à 16,99 € au lieu de 29,99 €. Avec lui et votre smartphone (application SumUP à installer), vous allez pouvoir accepter simplement des paiements par cartes bancaires. Oubliez les frais mensuels et les obligations contractuelles : Vous ne payez qu'une commission de 1,75% par transaction. Pas de frais supplémentaires. Les fonds sont directement transférés sur votre compte bancaire.

Pratique pour les petits commerçants, les marchés, les vides greniers, etc.


> Voir l'offre
168,99 €SSD Crucial MX500 2 To à 168,99 €
Valable jusqu'au 28 Mai

Amazon propose actuellement le SSD Crucial MX500 2 To à 168,99 € livré gratuitement. On le trouve ailleurs à partir de 190 €. Ce SSD salué par la critique par son rapport qualité prix imbattable offre des débits de 560 Mo/s en lecture et 510 Mo/s en écriture. Il est garanti 5 ans. Une bonne affaire.


> 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