création d'un site web

[Latinus]

Merci !

[svernoux]

Bon, je viens de faire quelques essais avec le css, ça marche bien, j'ai bien compris le principe. Seulement, va falloir que je bûche sur tout ça et surtout que je réécrive mon html puisque Ooo ne m'a tout mis dans des <p>, aucun <h1> par exemple (enfin, forcément, en même temps je lui ai pas demandé de le faire...) donc, je vais potasser tout ça ce wwek-end. Je me pose plein de questions à l'avance, mais je vais essayer de ne pas mettre la charrue avant les boeufs, donc je garde mes questions pour l'instant.
Si, j'en ai une bien bête quand même : pour écrire le fichier css, y a-t-il des règles quant à l'ordre des balises et à l'ordre des propriétés pour chaque balise ? Ou bien on fait ce qu'on veut, du moment qu'on s'y retrouve soi-même ?

[Latinus]

Si, j'en ai une bien bête quand même : pour écrire le fichier css, y a-t-il des règles quant à l'ordre des balises et à l'ordre des propriétés pour chaque balise ? Ou bien on fait ce qu'on veut, du moment qu'on s'y retrouve soi-même ?

Je ne sais pas s'il y a un ordre à "préférer". Personnellement, j'écris mon css au fur et à mesure que je rencontre des éléments à y entrer
Faut surtout s'y retrouver !

Tu trouveras toutes les "spec" du CSS2.1 ici (la 3 étant en développement), je pense qu'il n'y a pas plus complet

N'hésite pas en cas de questions/pb.

[svernoux]

Euh... ben avec ça, au moins, je manquerai pas de lecture !

Merci en tout cas !

[Latinus]

Euh... ben avec ça, au moins, je manquerai pas de lecture !
Merci en tout cas !

Il faut le voir dans l'autre sens : quand tu ne trouves pas le nom d'une option définissable dans les CSS, alors tu consultes la bible
Ca ne sert pas à grand chose (si ce n'est pour les chapitres de généralités) de lire tout ça si tu n'y cherches pas quelque chose de précis !


Lat

[svernoux]

Voilà, j'arrive déjà avec une question !

J'ai un tuto qui m'explique qu'on peut mettre des attributs class pour attribuer différents styles à une même balise. Le tuto prend comme exemple des balises h1, p et img, mais je voudrais juste savoir si on peut mettre des class à n'importe quelle balise (enfin, ce qui m'intéresse pour l'instant, c'est les liens (<a>), mais en général aussi).

Et une deuxième petite question même si je pense connaître la réponse : admettons que je fais un <p> que je définis en bleu dans le css. Puis je voudrais avoir certains p en rouge et pas en bleu, donc je crée un attribut class="rouge" que je définis en rouge dans le css. Dois-je du coup aussi créer un class="bleu" pour les paragraphes qui restent en bleu, ou bien ils seront de toute façon bleus "par défaut" là où les balises p ne comporteront pas le class="rouge" ?

Merci d'avance !

[svernoux]

GRRRRR ! Pourquoi ça marche pas !

Je suis en train de créer un design fictif, toujours selon le tuto que j'utilise.
Sur la base d'un html comme ça :

Code: Select all

<div id="menu">
			<div class="element_menu">
				<h3>Titre menu</h3>
				<ul>
				<li><a href="page1.html">Lien</a></li>
				<li><a href="page2.html">Lien</a></li>
				<li><a href="page3.html">Lien</a></li>
				</ul>
			</div>
			<div class="element_menu">
			<h3>Titre menu</h3>
				<ul>
				<li><a href="page4.html">Lien</a></li>
				<li><a href="page5.html">Lien</a></li>
				<li><a href="page6.html">Lien</a></li>
				</ul>
			</div>
		</div>

Je mets les menus sur fond bleu dans le css, jusque là ça marche :

Code: Select all

.element_menu
{
   background-color: #0074b9;
   background-repeat: repeat-x;   
   border: 2px solid black;   
   margin-bottom: 20px;
}

Et après, veux changer la couleur des liens évidemment, parce bleu sur fond bleu, bof-bof.
Donc je mets :

Code: Select all

element_menu a
{
   color: #ffffff;
}

pour les transformer en blanc, et là... rien ne bouge, toujours bleu ! J'ai aussi essayé avec white au lieu de #ffffff, aucun résultat...

Qui peut m'aider ?

[Latinus]

Tu peux mettre n'importe quoi comme classe à une balise, le truc c'est qu'elle ne prendra en compte que les instructions qui pouvent la concerner si jamais certaines instructions de la classe ne peuvent pas lui être appliquées.
Images une classe .bidule où tu définis des bords colorés d'une épaisseur "x" et de l'italique pour le texte ; si tu affectes cette classe à une balise "img", l'image en question ne sera pas en italique

Et une deuxième petite question même si je pense connaître la réponse : admettons que je fais un <p> que je définis en bleu dans le css. Puis je voudrais avoir certains p en rouge et pas en bleu, donc je crée un attribut class="rouge" que je définis en rouge dans le css. Dois-je du coup aussi créer un class="bleu" pour les paragraphes qui restent en bleu, ou bien ils seront de toute façon bleus "par défaut" là où les balises p ne comporteront pas le class="rouge" ?

Merci d'avance !

Normalement ça reste bleu si tu ne précises rien d'autre.

[Latinus]

Et après, veux changer la couleur des liens évidemment, parce bleu sur fond bleu, bof-bof.
Donc je mets :

Code: Select all

element_menu a
{
   color: #ffffff;
}

pour les transformer en blanc, et là... rien ne bouge, toujours bleu ! J'ai aussi essayé avec white au lieu de #ffffff, aucun résultat...

Qui peut m'aider ?

C'est une erreur de copier/coller ou il manque bien un "." au début de ta classe "element_menu a" ?

donc :

Code: Select all

.element_menu
{
   background-color: #0074b9;
   background-repeat: repeat-x;   
   border: 2px solid black;   
   margin-bottom: 20px;
}

.element_menu A
{
   color: #ffffff;
}

?

[svernoux]

C'est une erreur de copier/coller ou il manque bien un "." au début de ta classe "element_menu a" ?

C'était bien ça !
En fait, je crois bien que j'avais copié collé depuis le tuto, alors j'avais fait confiance, mais je serai plus attentive à l'avenir !
Merci aussi pour les autres réponses

J'ai encore une question. Parce que finalement, au lieu d'aller tout modifier dans les fichiers que j'avais déjà, je suis en train de faire un autre méthode : en suivant mon tuto, je crée un nouveau design (enfin, ressemblant à l'autre, mais avec du css), vide, puis je copierai mon contenu dedans une fois qu'il sera bien nickel chrome. Le problème, c'est que mon tuto explique qu'on peut faire un "design fixe" ou un "design extensible", le deuxième étant celui qui prend toute la page, en s'adaptant à la résolution du visiteur, si j'ai bien compris. Et le tuto dit que même si l'extensible c'est mieux, il ne nous apprend pour l'instant que le fixe parce que c'est plus facile pour débuter (mais je crois pas qu'il explique l'extensible ailleurs). Mais comme moi je suis chiante, je voudrais bien un extensible

Donc, le tuto propose ça pour le design fixe :

Code: Select all

body
{
   width: 760px;
   margin: auto; 
   margin-top: 20px; 
   margin-bottom: 20px; 
   background-image: url("images/fond.png");
}

Si j'ai bien compris, c'est sur les deux premiers attribut (width et margin) de body que ça se joue ? Donc je voudrais savoir ce qu'il faut modifier... Ou bien je me gourre complètement ?

[svernoux]

Bon, en fait, je pense avoir résolu ma question ci-dessus toute seule (avec notamment l'utilisation de % au lieu de tailles fixes), mais je vous mets mon css (simplifié) ci-dessous, si quelqu'un avait la gentillesse de me confirmer qu'il n'y a pas d'erreur... Je veux surtout savoir si avec ça ma page devrait s'afficher normalement, en utilisant toute la page mais pas plus (sans barre de défilement horizontale) sur à peu près toutes les configurations.

Code: Select all

body
{
   margin: 10px;
}

#en_tete
{
   width: 100%;
   height: 100px;
}

#menu
{
   float: left;
   width: 120px;
}

#corps
{
   margin-left: 130px;
   margin-bottom: 20px;
   padding: 5px;
}

#pied_de_page
{
   padding: 5px;
}

Merci d'avance !

[Latinus]

Mais comme moi je suis chiante, je voudrais bien un extensible

Donc, le tuto propose ça pour le design fixe :

Code: Select all

body
{
   width: 760px;
   margin: auto; 
   margin-top: 20px; 
   margin-bottom: 20px; 
   background-image: url("images/fond.png");
}

Si j'ai bien compris, c'est sur les deux premiers attribut (width et margin) de body que ça se joue ? Donc je voudrais savoir ce qu'il faut modifier... Ou bien je me gourre complètement ?

en effet, "width: 760px;" attribue une largeur fixe pour le corps de ta page, elle ne sera ni plus ni moins large. Ensuite, les marge en "auto" pour que le "body" soit centré dans l'explorateur (il me semble).

[svernoux]

Merci !

Et pour ma deuxième question, c'est bon alors ? Je pense que oui, en tout cas ça marche chez moi Mais j'ai une autre question étroitement liée : Maintenant que j'arrive à occuper tout la largeur, je voudrais aussi occuper la hauteur enfin, c'est à dire que lorsque j'ajoute du texte dans le corps, le menu à gauche s'adapte et descende aussi bas que le bloc de corps du texte. J'ai essayé de mettre une propriété "height: 100%;" à mon menu, mais ça ne marche pas... Une idée ? Je vais aussi aller chercher dans la "bible" mais franchement c'est un peu obscur là-bas dedans...

[arkayn]

Malheureusement, tu ne réussiras pas à obtenir un menu qui s'adapte automatiquement à la hauteur de ta page en CSS (note que je peux me tromper, mais vraiment je ne crois pas).

Pour obtenir ce que tu veux, tu devras faire appel au Javascript ou au Java.

[svernoux]

Ah merci pour la réponse ! Bon, je vais m'en tenir au css, hein ! C'est vrai que mon premier design (celui qui est en ligne), il permettait cette adaptation automatique puisque c'était un tableau. Mais bon, justement, le tableau, pas pratique du tout sous bien d'autres rapports !

Ce que je peux faire aussi, c'est définir la hauteur du menu au coup par coup dans le html de chaque page, n'est-ce pas ?

bon je vais réfléchir à ce qu'il vaut mieux : ça, ou changer de design