feuille de style externe

[klaviebel]

voilà, j'ai réécrit ton mon site en séparant le CSS et le HTML. Pour le moment j'ai mis dans chaque page.html mon CSS.
Est-ce que maintenant, je dois regrouper TOUT mon CSS dans une feuille de style externe type design.css même si une page n'est pas concernée par, par exemple, les tableaux ou les formulaires?

De plus, si c'est bien le cas, est-ce que il existe un code qui fait qu'un block (que j'ai appelé contenu) s'ajuste à la taille du contenu du block en fonction de la page? (je sais pas si je suis bien claire...)

Autre question, dans ma version "fouilli" de mon premier site, j'avais trois feuilles de code php (correspondant à trois formulaires). depuis que j'ai réécris mes pages en séparant le html du css, mes codes php ne fonctionnent plus vraiment.... : je n'ai rien dans ma boite e-mail et lorsque je fais envoyer j'ai en retour un truc du genre:

"; echo "Votre email 2 est $m2
"; echo "Votre email 3 est $m3
"; echo "Votre email 4 est $m4
"; echo "Votre email 5 est $m5
"; echo "Votre nom est $n
"; echo "Votre prenom est $p
"; echo "Votre message est $me
"; $message .= $m1."\n"; $message .= $m2."\n"; $message .= $m3."\n"; $message .= $m4."\n"; $message .= $m5."\n"; $message .= $n."\n"; $message .= $p."\n"; $message .= $me."\n"; mail ("keocreations@free.fr", "faireconnaitre", $message, "From: $m1"); echo "Votre message pour faire connaitre le site de Keo à vos ami(e)s vient de m'être envoyée. Merci de votre confiance.
"?>

alors que c'était intelligible avant...
est-ce qu'il faut que je le réécrive lui aussi?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

je rajoute une question annexe qui me vient en regardant des codes sources de sites:
est-il plus judicieux de créer plusieurs feuilles de styles externes? une pour le design général, une attribuée aux tableaux, une pour les formulaires etc.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

L'intérêt d'une seule feuille de style (externe) pour tout ton site:
le jour où tu veux changer le design, tu n'a que cette feuille de style à modifier et le tour est joué.
Si tu as une feuille de style par page, il faudra que tu modifies autant de fichiers que tu auras de pages.

Quant à avoir plusieurs feuilles de styles, pourquoi pas? mais attention à ne pas tout alourdir à vouloir démultiplier les choses!

Un bloc pour lequel aucune largeur et hauteur n'est défini s'adapte (en taille) automatiquement au contenu

[klaviebel]

Merci Chinon37

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Ymai]

voilà, j'ai réécrit ton mon site en séparant le CSS et le HTML. Pour le moment j'ai mis dans chaque page.html mon CSS.
Est-ce que maintenant, je dois regrouper TOUT mon CSS dans une feuille de style externe type design.css même si une page n'est pas concernée par, par exemple, les tableaux ou les formulaires?

De plus, si c'est bien le cas, est-ce que il existe un code qui fait qu'un block (que j'ai appelé contenu) s'ajuste à la taille du contenu du block en fonction de la page? (je sais pas si je suis bien claire...)

Autre question, dans ma version "fouilli" de mon premier site, j'avais trois feuilles de code php (correspondant à trois formulaires). depuis que j'ai réécris mes pages en séparant le html du css, mes codes php ne fonctionnent plus vraiment.... : je n'ai rien dans ma boite e-mail et lorsque je fais envoyer j'ai en retour un truc du genre:

"; echo "Votre email 2 est $m2
"; echo "Votre email 3 est $m3
"; echo "Votre email 4 est $m4
"; echo "Votre email 5 est $m5
"; echo "Votre nom est $n
"; echo "Votre prenom est $p
"; echo "Votre message est $me
"; $message .= $m1."\n"; $message .= $m2."\n"; $message .= $m3."\n"; $message .= $m4."\n"; $message .= $m5."\n"; $message .= $n."\n"; $message .= $p."\n"; $message .= $me."\n"; mail ("keocreations@free.fr", "faireconnaitre", $message, "From: $m1"); echo "Votre message pour faire connaitre le site de Keo à vos ami(e)s vient de m'être envoyée. Merci de votre confiance.
"?>

alors que c'était intelligible avant...
est-ce qu'il faut que je le réécrive lui aussi?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Il faudrait le code de la page complète. Il doit y avoir un <?php qui a disparu dans la bagarre.

[Ymai]

je rajoute une question annexe qui me vient en regardant des codes sources de sites:
est-il plus judicieux de créer plusieurs feuilles de styles externes? une pour le design général, une attribuée aux tableaux, une pour les formulaires etc.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

A moins que le site devienne gigantesque et complexe, je dirais 2 feuilles de style: une pour l'écran, une pour l'impression.

[klaviebel]

ca c'est mon code dans ma feuille.php:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog"
 content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog"
 content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog"
 content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog"
 content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog"
 content=""><meta id="_moz_prolog" content=""><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>faireconnaitre</title></head>
<body><br><?php $m1 = htmlentities($_POST['email1']);
$m2 = htmlentities($_POST['email2']);
$m3 = htmlentities($_POST['email3']);
$m4 = htmlentities($_POST['email4']);
$m5 = htmlentities($_POST['email5']);
$n = htmlentities($_POST['votreNom']);
$p = htmlentities($_POST['votrePrenom']);
$me = htmlentities($_POST['votreMessage']);
echo "Votre email 1 est $m1 <br />";
echo "Votre email 2 est $m2 <br />";
echo "Votre email 3 est $m3 <br />";
echo "Votre email 4 est $m4 <br />";
echo "Votre email 5 est $m5 <br />";
echo "Votre nom est $n <br />";
echo "Votre prenom est $p <br />";
echo "Votre message est $me <br />";
$message .= $m1."\n";
$message .= $m2."\n";
$message .= $m3."\n";
$message .= $m4."\n";
$message .= $m5."\n";
$message .= $n."\n";
$message .= $p."\n";
$message .= $me."\n";
mail ("keocreations@free.fr", "faireconnaitre", $message, "From: $m1");
echo "Votre message pour faire connaitre le site de Keo à vos ami(e)s vient de m'être envoyée. Merci de votre confiance. <br />"?></body></html>

et ça c'est mon code dans ma feuille .html

Code : Tout sélectionner

<div id="contenu">
	<h4>Pour faire connaître le site de Keo à vos ami(e)s cliquez <a href="faire_connaitre.html">ici</a><img src="boutons%20de%20navigation/mailbox%20RED.png"></h4></br>
	<h2>Envoyer à :</h1>
	<form method="post" action="faireconnaitre.php" name="FaireConnaitre">
	<p>E-mail 1 : <input type="text" name="email1"/><br></p>
	<p>E-mail 2 : <input type="text" name="email2"/><br></p>
	<p>E-mail 3 : <input type="text" name="email3"/><br></p>
	<p>E-mail 4 : <input type="text" name="email4"/><br></p>
	<p>Votre Nom (facultatif) : <input type="text" name="votreNom"/><br></p>
	<p>Votre prénom (facultatif) : <input type="text" name="votrePrenom"/><br></p>
	<label> Votre message pour vos ami(e)s:<br />
         <textarea name="votreMessage" rows="10" cols="33"></textarea>
	</label><br>
	<p><input name="Envoyer" value="Envoyer" type="submit"/> <input name="annuler" value="Annuler" type="reset"/></p>
	</form>

et les trois formulaires de mon site ne fonctionnent pas, à l'image de cet exemple...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Mongo Bob]

A moins que le site devienne gigantesque et complexe, je dirais 2 feuilles de style: une pour l'écran, une pour l'impression.

Pour les media, Ymai, "print" pour la feuille impression, et pour l'autre? "screen" ou "all"? Est-ce important? Si on met que "screen", qu'en est-il des autres medias cités ci-dessous, alors? Si on met "all" quand on va demander une impression il va tout imprimer, je suppose, et ne pas tenir compte de la feuille "print"?
aural, braille, embossed, handheld, projection, tty, tv

De plus, si c'est bien le cas, est-ce que il existe un code qui fait qu'un block (que j'ai appelé contenu) s'ajuste à la taille du contenu du block en fonction de la page? (je sais pas si je suis bien claire...)

Si j'ai bien compris (j'ai retrouvé mon dico ), l'assertion ci-dessous pourrait te satisfaire: quand tu ne mentionnes pas la largeur d'un bloc -et je parle d'un bloc strictement en langage html : un élément conteneur par exemple un : <h1> ... <h6>, un <div>, un <p> y'en a d'autres- il prend toute la largeur disponible dans le bloc dans lequel il est contenu, serait-ce le <body> lui-même.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

Si j'ai bien compris (j'ai retrouvé mon dico Clin d'oeil ),

ouf je suis sauvée

klaviebel a écrit:
De plus, si c'est bien le cas, est-ce que il existe un code qui fait qu'un block (que j'ai appelé contenu) s'ajuste à la taille du contenu du block en fonction de la page? (je sais pas si je suis bien claire...)

En fait, j'ai créé un <div id="contenu"> est qui contient différentes informations en fonction des pages.html. Dans certaines, il y a peu de choses et dans d'autres beaucoup. Bref, cette mise en page est importante puisqu'elle contient un fond de page coloré (qui n'est pas celui du body justement). Et bon, voilà tout ça pour dire que j'ai ôté la longueur de la page dans mon doc design.css... et ça marche!!!! si si merci
Par contre, depuis que je l'ai fait, ça provoque un déplacement de la mise en page sous IE (fichu IE de....!!!) : C'est à dire que mon fameux bloc qui était centré sur la page vient se coller en haut à gauche de mon cadre.
J'ai fait un test sur le site du service de validation CSS du WC3, et il me dit que :

Code : Tout sélectionner

15 	#page  	Propriété érronée : position La propriété position n'existe pas. : absolute
16 	#page 	Propriété érronée : top La propriété top n'existe pas. : 13%
17 	#page 	Propriété érronée : left La propriété left n'existe pas. : 13%

Pourtant je n'ai rien inventé (je le jure! ), j'ai juste appris ma leçon et mon vocabulaire
sachant que mon <div id="contenu"> est dans un <div id="page"> dont le code css est:

Code : Tout sélectionner

#page
{
	background-color: rgb(255, 204, 255);
	font-family: Georgia;
	width: 780px;/*obligatoire si on veut que margin:auto fonctionne*/
	margin: auto;/* demander à ce que le bloc soit centré avec "auto" */
	position: absolute; /*pour le positionnement du bloc*/ 
	top: 13%; /*donnee necessaire pour que la position fonctionne*/
	left: 13%; /*idem*/
}

Bref, je me demande si il y a un rapport entre les deux...
sachant que la mise en page sous Mozilla est parfaite....

Pfff.... une lueur d'espoir svp... Est-ce qu'un jour vraiment tout marche ? Et avoir de nouveau plein de temps pour créer mes bijoux sans me triturer les méninges des dizaines d'heures de suite sur les css, le html et les résolutions de bugs?
Ou c'est une cause vouée à l'échec ????

Et encore je ne vous ai pas parlé des autres bugs sous IE que je commence seulement à relever....



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Mongo Bob]

Pfff.... une lueur d'espoir svp... Est-ce qu'un jour vraiment tout marche ? Et avoir de nouveau plein de temps pour créer mes bijoux sans me triturer les méninges des dizaines d'heures de suite sur les css, le html et les résolutions de bugs?
Ou c'est une cause vouée à l'échec ????

C'est parce que tu essaies de faire bien que tu t'embêtes autant! Sinon, tu irais sur un blog clefs en mains! La voilà qui fait du css, maintenant, qui ne voulais pas en entendre parler il y a une semaine! Et qui se fait valider par le W3C en +! (euh.. j'ai bien dit "W et 3 et C" dans cet ordre là ).
Peux-tu donner le code concerné par cette histoire de bloc?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

Quel code? le html ou le css? pas de prob, j'ai les deux
alors le code pour le <div id="contenu">

Code : Tout sélectionner

#contenu 
{
	margin-top: 0;
	margin-bottom: 0;
	padding: 7px; /* Marge intérieure de 12px */
}

pour le code du <div id="page">

Code : Tout sélectionner

#page
{
	background-color: rgb(255, 204, 255);
	font-family: Georgia;
	width: 780px;/*obligatoire si on veut que margin:auto fonctionne*/
	margin: auto;/* demander à ce que le bloc soit centré avec "auto" */
	position: absolute; /*pour que le positionnement du bloc*/ 
	top: 13%; /*donnee necessaire pour que la position fonctionne*/
	left: 13%;
}

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Mongo Bob]

C'est que du css que tu m'as donné. Comprends rien, le site est en ligne ou que chez toi, sinon?
Il me faudrait la page html + la feuille css, si le site est en ligne, le lien. A+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

Bonjour
il est en ligne: http://klaviebel.free.fr

Les formulaires remarchent (miraculeusement... je n'ai rien fait... les mystères du net?)

Sur IE, il me manque un formulaire et il y a un petit bug de mise en page notamment dans index.html

En tout cas, je n'en reviens pas d'avoir tenu le challenge de tout réécrire...
(bon, certes en trois jours... mais quand même... )

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

Code : Tout sélectionner

body
{
	background-color: rgb(255, 204, 0); 
	width: 800px;
	margin: auto; /* Pour centrer notre page */
	color: black; /*pour que la couleur de tout le document soit noire, sauf précision*/ 
}

#page
{
	background-color: rgb(255, 204, 255);
	font-family: Georgia;
	width: 780px;/*obligatoire si on veut que margin:auto fonctionne*/
	margin: auto;/* On peut donc demander à ce que le block soit centré avec "auto" */
	position: absolute; /*pour que le positionnement du bloc*/ 
	top: 13%; /*donnee necessaire pour que la position fonctionne*/
	left: 13%;
}

#logo
{
	background-color: rgb(255, 255, 255);
	margin-bottom: 0;
	height: 141px;
	padding: 12px; /* Marge intérieure de 12px */
	background-image: url("logo%20Keo/logo%20ent%EAte%20page.jpg");
	background-repeat: no-repeat;
	text-align: center;
}

#entete
{
	height: 54px;
	margin-top: 0;
	margin-bottom: 0;
	padding: 7px; 
	margin-left: auto;
	margin-right: auto;
	width: 276px;
	background-image: url("logo%20Keo/BijouxpourElle.jpg");
	background-repeat: no-repeat;
	text-align: center;
}
   
#menu
{
	height: 27px;
	margin-top: 0;
	margin-bottom: 0;
	padding: 7px; 
	text-align: center;
}
   
#contenu 
{
	margin-top: 0;
	margin-bottom: 0px;
	padding: 7px; /* Marge intérieure de 12px */
}


h1
{
	font-family: Jester, Georgia;
	color: rgb(153, 0, 0);
	margin-top : 0;
	margin-bottom : 0;
	line-height: 34px; 
	padding: 13px; 
}

p
{
	text-align: justify;
	font-family: Georgia;
	font-size: medium;
	margin-top : 0;/* Marge exterieur entre les blocks pour qu'ils soient collés*/
	margin-bottom : 0;
	padding: 7px; /* Marge intérieure de 12px */
}

.different
{
	text-align: left;
	padding: 3px;
}

.indent
{ 
	text-indent: 30px ; 
} 

.caprices
{
	text-align: center;
	padding: 3px;
}

p em /* => tous les em situés à l'intérieur d'un p */
{
	font-style: normal;
	font-size: medium;
	text-align: center;
	font-weight: bold;
}

.titreimage
{
	font-family: Georgia;
	font-size: large;
	padding: 3px;
	text-align: center;
	text-decoration: underline;
}

h3
{
	font-family: Georgia;
	font-size: medium;
	text-align: center;
	margin-top : 0;/* Marge exterieur entre les blocks pour qu'ils soient collés*/
	margin-bottom : 0;
	padding: 9px;
}

h4
{
	font-family: Georgia;
	text-align: center;
	margin-top : 0;/* Marge exterieur entre les blocks pour qu'ils soient collés*/
	margin-bottom : 0;
}

h5
{
	font-family: Georgia;
	text-align: center;
	font-size: large;
	margin-top : 0;/* Marge exterieur entre les blocks pour qu'ils soient collés*/
	margin-bottom : 0;
	padding: 13px; /* Marge intérieure de 12px */
}

img.centre
{
	display: block;
	clear: both;
	margin-left: auto;
	margin-right: auto;
}

.centrer
{
	text-align: center;
}

a /* Lien normal */
{
   text-decoration: underline;
   color: black;
   font-style: normal;
}

a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration: none;
   font-weight: bolder;
   font-size: x-large;
   color: rgb(153, 0, 0);
}

a:visited 
{
	color: rgb(153, 0, 0);
	text-decoration: none;
}

a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
}

input, textarea
{
   font-family: Arial, Times, serif; /* On modifie la police du texte tapé l'intérieur des champs */
}

input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
{
   background-color: rgb(255, 204, 0);
}

label
{
   color: black; /* Colorer en bleu tous les labels (bah oui, pourquoi pas en bleu ?) */
   font-size: medium;
   font-family: Georgia;
   text-align: left;
}

legend /* On met un peu plus en valeur les titres des fieldset */
{
   font-family: Georgia, "Arial Black", Georgia, "Times New Roman", Times, serif;
   color: black;
   font-size: medium;
   font-weight: bold;
}

fieldset
{
   margin-bottom: 15px; /* Une marge pour séparer les fieldset */
   background-color: rgb(204, 102, 204);
   vertical-align: top;
   text-align: left;
   width: 300px;
}

table
{
   border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
   background-color:rgb(255, 153, 255); 
   width: 670px; 
   text-align: center; 
   margin-left: auto; 
   margin-right: auto;
   margin: auto; /* Centre le tableau */
   border: 3px; /* Bordure du tableau */
   border-collapse: collapse; /* Colle les bordures entre elles */
}

.couleur
{
background-color: rgb(255, 204, 255);
}

td
{
   border: 0px;
   font-size: medium;
   font-family: Georgia;
   vertical-align: top;
   text-align: left;
   padding: 5px;
}

th /* Les cellules d'en-tête */
{
   background-color: rgb(255, 204, 255);
   color: rgb(153, 0, 0);
   font-size: x-large;
   font-family: Georgia;
}

td /* Les cellules normales */
{
   border: 0px;
   font-family: Georgia;
   font-size: medium;
   text-align: left; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}

et donc, ci-dessus c'est mon text/css... avec des petits "pense-bête" dedans

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Mongo Bob]

Je vois une contradiction ci-dessous :

Code : Tout sélectionner

#page
{
   background-color: rgb(255, 204, 255);
   font-family: Georgia;
   width: 780px;/*obligatoire si on veut que margin:auto fonctionne*/
  margin: auto;/* On peut donc demander à ce que le block soit centré avec "auto" */
   position: absolute; /*pour que le positionnement du bloc*/
   top: 13%; /*donnee necessaire pour que la position fonctionne*/
   left: 13%;
} 

Entre "margin:auto;" et "position:absolute;" :
"auto" sur les 2 marges gauche-droite ne centrera le bloc que si celui-ci est dans le flux (ce qui dans Kazcades se traduit par :"Affichage, Flottante et Position" chacun en "Non défini" dans l'onglet Boîte).
J'évite au maximum les positions Absolue qui ne me servent que dans certains cas particuliers, j'essaie de tout mettre en "Non défini" mais souvent en flottant gauche ou droite pour juxtaposer des blocs ou les inclure les uns dans les autres.
Donc, enlève "absolue" dans position pour le bloc <div id="page">, mets "Non défini"'. Pour la largeur, ne mets pas de pixels mais un pourcentage qui te convient, type 80% pour que ça s'adapte sur toutes les résolutions. Du coup, pour le <table> à l'intérieu du <div> : aussi une largeur en pourcentage (par rapport au <div> qui le contient bien sûr).
Qu'est-ce que ça donne?
Grosse bourde :

Code : Tout sélectionner

<p class="centrer"><a href="accueil.html" title="Cliquer pour aller à la page d'accueil"/><img src="boutons%20de%20navigation/entr%E9e.gif" alt"bouton pour entrer dans le site"></p></a>

Un <p> est fait pour contenir du texte, ici, y'en a pas , enfin une image-texte mais c'est pas du texte pour autant (ah, mais c'est peut-être pas fini, au fait!). Il y a un lien (<a>) dedans mais le </a> est après le </p>. Aïe! Et pourtant le lien marche quand même, c 'est tout klaviebel, ça! Je me demande comment il peut marcher, ton lien

Je te dirais bien un truc à propose de l'accessibilité aux non-voyants, mais une chose à la fois (en gros, les images-texte, c'est moins bien que les vrais textes, bon, on verra). C'est trés bien d'utiliser les commentaires ("/* et */ ) pour te faire des mémos, quels progrès par rapport à la semaine dernière...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3