28172 sujets

CSS et mise en forme, CSS3

[Résolu] Feuilles de styles et xhtml

Bonjour à tous,
voici mon site : ici

Voici mon problème :
Je voudrais créer une feuille de style mais quand je la crée, certains styles ne s'appliquent pas a la page (police, background, padding).
Alors que quand je met le code dans la page, tout fonctionne...

J'ai mis l'adresse de mon site pour que vous puissiez mieux voir le problème, qui se situe sur la page "accueil". Les autres pages sont très bien mais c'est parce que le code se trouve dans la page même.

Voici mon code (que j'ai mis dans ma feuille de styles css qui se nomme "format.css") :
<style type="text/css">
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #ccddff ;
}

div#conteneur
{
	width: 996px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #000 ;
	background: #fff ;
}

h1#header
{
	height: 258px ;
	background: url(banpierfin.jpg) no-repeat left top ;
	margin: 0 ;
}

h1#header a
{
	width: 400px ;
	height: 70px ;
	display: block ;
	background: url(x.gif) no-repeat ;
	position: relative ;
	left: 350px ;
	top: 15px ;
	text-indent: -5000px ;
}


ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	background: url(bg_menu10.gif) repeat-x 0 -25px ;
	list-style-type: none ;
}

ul#menu li
{
	float: left ;
	text-align: center ;
}

ul#menu li a
{
	width: 130px ;
	line-height: 25px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #dea ;
}

ul#menu li a:hover
{
	background: url(bg_menu10.gif) repeat-x 0 0 ;
}

div#contenu
{
	padding: 0 25px 0 100px ;
	background: url(bg_page4.gif) no-repeat 15px 15px ;
}

div#contenu h2
{
	padding-left: 50px ;
	line-height: 50px ;
	font-size: 1.4em ;
	background: url(little_diaporama.gif) no-repeat left bottom ;
	color: #0044ee ;
	border-bottom: 1px solid #0044ee ;
}

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

div#contenu a
{
	color: #8a0 ;
}

div#contenu a:hover
{
	color: #9b2 ;
}

p#footer
{
	margin: 10 ;
	padding-right: 0px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}


pre span
{
	color: #560 ;
}

pre span.comment
{
	color: #b30000 ;
}
</style>


et voici le lien que j'ai mis entre <head> et </head> sur ma page et qui se réfère à cette page :

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



Est-ce que quelqu'un pourrait me dire s'il voit une erreur.
D'avance merci.
Modifié par Thibaud89 (23 Aug 2008 - 15:41)
Bonsoir Thibaud89,

Comme tu le sais, soit tu emploies une feuille de styles externe (ta balise link est effectivement prévue pour cela) soit tu ajoutes ton code directement dans ta page avec <style type="text/css"></style> comme tu l'as fait pour tes autres page, le mixe des deux est hasardeux :
<link type="text/css" rel="stylesheet" href="format.css"[#red][b]/[/b][/#]>
(ne pas oublier de fermer tes balises)
Et dans cette feuille de styles que tu appelles :
[#red][b]<style type="text/css">[/b][/#]
body
{
...
[#red][b]</style>[/b][/#]

Concernant les erreurs (il y en a Smiley cligne ) tu peux utiliser ces services du W3C:
Code html : http://validator.w3.org/
Code css : http://jigsaw.w3.org/css-validator/

Cdt,
Sylvain
Voilà, j'ai modifié l'erreur mais cela n'a rien changé.
En fait, ce que je ne comprend pas c'est que ces 2 "techniques" devraient normalement donner le même résultat mais ce n'est pas le cas.
En effet, pour ma page accueil j'ai employée une feuille de style externe et pour les autres j'ai ajouté le code directement dans la page.

Aussi, si j'ai mélangé les 2, ce n'est que provisoire car je compte utiliser une feuille de style externe pour toutes mes pages mais comme j'ai un problème avec la feuille de style externe, j'attend de l'avoir résolu avant de l'appliquer a toutes les pages.

Merci de ton aide,
aurais-tu une autre idée d'où pourrait provenir le problème ? (surtout point de vue de la police. je voudrais avoir celle la 
font: 0.8em "Trebuchet MS", helvetica, sans-serif
et j'obtiens autre chose sur ma page "accueil")
De plus, j'ai mis dans le code : 
background: #ccddff
et mon backround, sur ma page d'accueil, est blanc Smiley decu

Merci


PS : j'ai mis mon site à jour avec les nouveaux changements
Modifié par Thibaud89 (22 Jun 2008 - 22:24)
Bonsoir

Dans ta feuille de style format.css, supprime la première ligne
<style type="text/css">

puis la dernière

</style>
Re bonsoir Thibaud89,

Je me suis certainement mal exprimé, désolé Smiley ohwell
Donc:
Effectivement, que tu choisisses l'une ou l'autre méthode pour appeler tes styles:
<link type="text/css" rel="stylesheet" href="format.css"/>

<style type="text/css">
Tes déclarations...
</style>

C'est du pareil au même, bonne nouvelle non ?
Tu peux même cumuler ces appels (et d'autres...)
Tout ce que tu désires savoir sur l'appel des feuilles de styles Smiley cligne

Par contre, il n'est pas autorisé dans la feuille de style de procéder comme tu l'as fait :

[b][#red]<style type="text/css">[/#][/b]
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #ccddff ;
}

div#conteneur
{
	width: 996px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #000 ;
	background: #fff ;
}

etc...
[#red][b]</style>[/b][/#]

En d'autres termes, ouvres ta feuille de styles "format.css" et supprimes ce qui est en rouge ci-dessus Smiley smile

En CSS toute longueur doit avoir une unité de mesure à l' exception de la valeur 0 (zéro) ( et line-height... )
Smiley cligne 
p#footer
{
	margin: 10[b][#red]px[/#] [/b];
	padding-right: 0px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}


En espérant avoir été plus clair, n'hésites pas à utiliser les validateurs pour corriger tes codes, uses et abuses des marges (internes et externes) pour mettre en forme tes pages, et mettre un frein aux sauts de ligne (<br />)

Cdt,
Sylvain
*(Message pour Florent V. : Dis, tu m'appendras la pédagogie ? Smiley smile )
Merci beaucoup !!!
J'ai fait ce que vous m'avez conseillé, et tout fonctionne Smiley banane .

et pour ce qui est des br et autres fautes, je m'en vais corriger çà de suite.


Merci 1000 fois à vous 6l20 et pastazere.
A+
Modifié par Thibaud89 (23 Jun 2008 - 09:09)
Sujet clos
Aller à