feuille de style

S'inscrire | Se connecter

> 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

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!

pc-facile13

Posté le 27/10/2012 à 16:59

Petit astucien

Bonjour,

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

princpal au lieu de principal ?

melissasat

Posté le 27/10/2012 à 17:03

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

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

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

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

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

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

Petite astucienne

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

elle

Posté le 27/10/2012 à 18:03

Grande Maîtresse astucienne

elle

Posté le 27/10/2012 à 18:04

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

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

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

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

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

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

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

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

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

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

Petite astucienne

je m'etais trompée voila:

<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 ;
}

#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

Maître astucien

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

Petite astucienne

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

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

Les bons plans du moment PC Astuces

Tous les Bons Plans

Batterie externe OUKITEL BP2000 2048 Wh (extensible jusqu'à 16 Kw), 2200W, LifePOE4 à 899 €
899 € 1500 € -40%
@Geekbuying

PC Dell Optiplex 3050 SFF (Core i5-6500, 8 Go RAM, SSD 250 Go, DVD-RW, Windows 10 Pro) reconditionné à 78,30 €
78,30 € 119 € -34%
@AfB Shop

-20% dès 99 € d'achat sur une sélection de champagnes et pétillants
-20% -1 -34%
@Cdiscount

Ecouteurs sans fil Bluetooth Xiaomi Redmi Buds 6 Play à 10,96 €
10,96 € 20 € -45%
@Amazon

PC portable Lenovo 12.5 pouces ThinkPad X280 reconditionné (Core i5, 8 Go RAM, SSD 250 Go, Windows 11) à 189 €
189 € 259 € -27%
@AfB Shop

PC portable 13 pouces Lenovo Ideapad Slim 5 (FHD+, Ryzen 5 7535HS, 16 Go RAM, SSD 512 Go, Radeon 660M, Windows 11) à 583,20 €
583,20 € 729 € -20%
@Lenovo

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