Page 1 sur 3
Page css externe
Publié : 18 nov. 2010, 06:52
par fcalmant
Bonjour,
Je me lance dans le css et je galère
J'ai créer une feuille externe style.css avec cascades de kompozer, la voici :
* {
margin: 0;
padding: 0;
font-family: georgia;
font-size: 100%;
}
#container {
width: auto;
margin-left: auto;
margin-right: auto;
background-color: #afafaf;
}
#sidebar1 {
float: left;
width: 200px;
color: red;
font-weight: bold;
background-image: url(Ravenalabordercssdroite.JPG);
}
#sidebar2 {
float: right;
width: 200px;
background-repeat: repeat-y;
background-position: left center;
background-image: url(Ravenalabordercss.JPG);
}
#content {
padding: 0px;
background-color: #ffffff;
margin-left: 200px;
margin-right: 160px;
}
div#content {
min-height: 600px;
}
#footer, #header {
background: #e0e0e0 none repeat scroll 0% 50%;
}
#header {
height: 217px;
background-position: center center;
opacity: 0.949;
width: 100%;
background-repeat: no-repeat;
background-image: url(header.jpg);
}
#footer {
height: 120px;
}
h1 {
font-size: 1.8em;
}
Je lie mon html avec cette ligne entre les head
<link rel="stylesheet" href="style.css" type="text/css">
</head>
J'upload le tout et....ça ne fonctionne pas!
Help please!!!
Merci!
Fred
Re: Page css externe
Publié : 18 nov. 2010, 08:47
par chinon37
Bonjour,
On peut avoir l'adresse du site?
Tu as bien mis la feuille de style dans le même répertoire que tes pages html ?
Re: Page css externe
Publié : 18 nov. 2010, 09:41
par teoli2003
Ton serveur web la sert bien avec le type text/css et pas text/plain ou text/html ?
Re: Page css externe
Publié : 18 nov. 2010, 12:55
par fcalmant
Voici la page de test:
http://www.exometeofraiture.net/csstest3.html
La feuille est bien dans le même répertoire et le type est text/css
Voici ce que ça devrait donner avec le css inclu dans l'html :
http://www.exometeofraiture.net/css.html
Re: Page css externe
Publié : 18 nov. 2010, 13:02
par Asumbaa
Bonjour,
La feuille de style est bien appelée et s'applique.
C'est le HTML qui ne contient aucune des balises stylées par la CSS
Re: Page css externe
Publié : 18 nov. 2010, 13:23
par fcalmant
Asumbaa a écrit :Bonjour,
C'est le HTML qui ne contient aucune des balises stylées par la CSS
Remède??
Re: Page css externe
Publié : 18 nov. 2010, 13:47
par chinon37
Pour préciser le propos de Asumbaa:
Tu as créé des identifiants (Id caractérisé par un # devant la règle de style). Si tu n'attribues pas ces Id à des balises html, ils ne pourront jamais s'appliquer à la page.
par exemple, au lieu de:
Code : Tout sélectionner
<div style="text-align: center;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
</div>
tu mets:
Code : Tout sélectionner
<div id="header">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
</div>
les règles de style de l'Id header s'appliqueront au div en question.
Si tu ne précises pas où doivent s'appliquer les règles de style, le navigateur ne décidera pas de lui-même (et heureusement). Il faut absolument que tu le précises dans la page html.
Tu codes tout à la main sur un éditeur de texte de type Notepad++ ou tu utilises un logiciel comme KompoZer pour créer tes pages? KompoZer permet d'attribuer très facilement des Id ou Class à des éléments html.
Re: Page css externe
Publié : 18 nov. 2010, 13:50
par fcalmant
Merci Chinon, J'ai édité à la main et j'ai pigé le truc! J'utilise Kompozer et ça m'intéresse de connaitre la marche à suivre pour attribuer les id plus facilement!
Re: Page css externe
Publié : 18 nov. 2010, 14:39
par Asumbaa
Modération : je te passe la main, Chinon, et déplace cette discussion dans le forum Kompozer.
Re: Page css externe
Publié : 18 nov. 2010, 17:00
par chinon37
Ok, Asumbaa, mais reste un peu dans le secteur, au cas où je dirais des bêtises!...
à fcalmant:
1- KompoZer dispose d'un module css qui permet de créer ses règles de styles de façon très aisée par F11
2- pour appliquer une classe ou un Id à un élément avec KompoZer, tu as 2 possibilités:
+ soit tu vas sur la barre d'outils mise en forme n°1 et tu cliques sur la classe ou l'Id concerné dans le deuxième champ déroulant. A noter qu'un Id ne peut être utilisé qu'une seule fois dans une page.
+ soit tu cliques droit sur l'élément (balise html) dans la barre de taches située tout en bas de l'écran (barre où tu as <html> <body> etc),puis tu mets ta souris sur Id ou Classes et apparaitront toutes les id ou classes créés > tu n'as plus qu'à choisir celui (Id)ou celle (classe) que tu veux appliquer.
Re: Page css externe
Publié : 18 nov. 2010, 23:38
par Ymai
chinon37 a écrit :Ok, Asumbaa, mais reste un peu dans le secteur, au cas où je dirais des bêtises!...
Modestie, quand tu nous tiens...
Re: Page css externe
Publié : 19 nov. 2010, 08:27
par chinon37
<hs> tiens, l'ermite sort de sa (t)caverne!!
</hs>
Je savais bien que j'allais dire une bêtise 
Re: Page css externe
Publié : 19 nov. 2010, 12:54
par fcalmant
chinon37 a écrit :Ok, Asumbaa, mais reste un peu dans le secteur, au cas où je dirais des bêtises!...
à fcalmant:
1- KompoZer dispose d'un module css qui permet de créer ses règles de styles de façon très aisée par F11
2- pour appliquer une classe ou un Id à un élément avec KompoZer, tu as 2 possibilités:
+ soit tu vas sur la barre d'outils mise en forme n°1 et tu cliques sur la classe ou l'Id concerné dans le deuxième champ déroulant. A noter qu'un Id ne peut être utilisé qu'une seule fois dans une page.
+ soit tu cliques droit sur l'élément (balise html) dans la barre de taches située tout en bas de l'écran (barre où tu as <html> <body> etc),puis tu mets ta souris sur Id ou Classes et apparaitront toutes les id ou classes créés > tu n'as plus qu'à choisir celui (Id)ou celle (classe) que tu veux appliquer.
Merci!
Re: Page css externe
Publié : 21 nov. 2010, 00:23
par fcalmant
Bonsoir,
J'ai pas mal avancé même si il reste du boulot! J'ai encore un problème; la page s'affiche correctement dans firefox mais c'est le bordel dans IE. Pouvez-vous y regarder svp, ce serait sympa!
http://www.exometeofraiture.net/csstest2.php
Merci!!
Re: Page css externe
Publié : 21 nov. 2010, 01:09
par FF_Olivier
Bonsoir,
Tu as deux fois les éléments <html>, <head> et <body>, c'est une fois de trop
!