Potes 'n' Roll !
L'Agora => Informatique & Multimédia => Discussion démarrée par: Matt le 1er Mars 2006 à 10:25
-
Donc comme promis à Alaiya, voici un piti topic pour se lancer dans les css le plus simplement possible...
Tout d'abord il y a ici un bon tutorial :
http://pompage.net/pompe/cssdezero-1/(http://pompage.net/pompe/cssdezero-1/)
ensuite, il faut télécharger un éditeur css, si possible un éditeur avec aperçu immédiat du rendu des css en cours de création...
en voici quelques uns : http://www.allhtml.com/telechargement/categorie2.php(http://www.allhtml.com/telechargement/categorie2.php)
je conseille d'en tester plusieurs, afin de bien comprendre le principe de fonctionnement, et d'être à l'aise avec...
ensuite le mieux est de se faire une page d'essai, contenant par exemple un tableau avec du texte, un titre, un paragraphe de texte...
Puis on créera la feuille de style, qu'on attachera à la page de test, et on pourra voir les modifications de la feuille de style sur celle-ci !
voilà, j'attends tes questions maintenant Al' !! :D
-
Yeeeeaahhhh!!!! :D
Merci Glaz'!^^ (ça a du bon de se croiser sur WoW, sérieux...) Je vais lire tout ça à tête reposée ce soir. Déjà, j'ai lu la première page du tutoriel, et a priori, j'ai... tout compris. (alors c'est donc ça la signification du
que je voyais sur le code source de cette fichue page qui veut jamais faire la même chose... :mrgreen:)
Juste une question: est ce qu'il n'y a pas un déjà éditeur css dans NVu? Parce que, dans la rubrique "outils", il y a "Editeur css". Mais honnêtement, quand je clique dessus... je ne vois pas bien ce qu'il faut y faire. Enfin, si, je vois à quoi ça sert, j'ai vaguement tripatouillé, mais à vrai dire, je ne sais pas où ça s'enregistre, comment on s'en sert, ni même comment on voit ce qu'on fait... bref. :sweatdrop:
-
sisi, il y en a un , mais je pense que pour débuter, il est mieux d'utiliser un piti programme dédié plutôt qu'un all-in-one !! TopstyleLite est plutôt facile à utiliser, et propose un aperçu direct des styles , ce qui est plutôt chouette :D
par contre j'installerai Nvu ce soir aussi, je connais pas bien son principe de fonctionnement encore ! (pis on peut toujours faire un ou deux trucs en simultané via msn, je prends pas grand chose comme honoraires !!! :mdr:)(ça a du bon de se croiser sur WoW, sérieux...)
-
la question bête du jour : c'est quoi le "css" ? :wheelchair:
-
feuilles de style en cascade, en gros c'est une page de code très simple ou y'a écrit des styles
ex : le style grasbleu
ben figure toi qu'on va déclarer dans le code que le texte est gras et bleu !! :D
comme ça dans les pages internet qui font appel à cette feuille de style, on dira pas à cahque fois ce texte est gras et bleu, mais on appliquera le style directement...
L'intérêt ? Ben là j'ai fait simple avec un style grasbleu, mais on peut faire plein de choses, ajuster des images, du texte, faire plein d'effets visuels...Et ensuite , vu qu'on applique les styles, on gagne beaucoup de poids pour les pages internet, et donc on gagne en rapidité et en lisibilité, et pis si on veut modifier un style, ben on le modifie directement dans la feuilel de style, et les modifications sont appliquées à toutes els pages d'un coup ! vouala :D
un bon site pour voir des exemples aussi :
www.alsacreations.com(http://www.alsacreations.com)
-
L'intérêt ? Ben là j'ai fait simple avec un style grasbleu, mais on peut faire plein de choses, ajuster des images, du texte, faire plein d'effets visuels...Et ensuite , vu qu'on applique les styles, on gagne beaucoup de poids pour les pages internet, et donc on gagne en rapidité et en lisibilité, et pis si on veut modifier un style, ben on le modifie directement dans la feuilel de style, et les modifications sont appliquées à toutes els pages d'un coup ! vouala
Question con: imaginons, j'ai fait une page. Je sais que cette page, je vais devoir la dupliquer X fois du point de vue de la forme, il n'y a que le texte qui change (et les liens), tout le reste ne doit PAS bouger. Si je copie-colle le code source de cette page pour les prochaines, ça marche non? (comment ça c'est du bricolage de bas étage?!^^)
Et alors, imaginons que je fasse ça. Bon, j'ai ma mise en forme. Maintenant, je dois changer le texte sur cette nouvelle page. Si je copie colle le texte à partir de word pour aller dans le pavé code source, est ce que ledit éditeur va lui même mettre les
par exemple, à chaque endroit où j'ai un "entrée" dans mon texte sous word?
Je sais pas si je suis très claire là... :sweatdrop:
-
Je ne sais pas si j'ai bien pigé ta demande, mais l'intérêt du css, c'est entre autre de créer un fichier unique css qui centralise tout ce qui concerne la forme et qui va donner le style à toutes les pages de ton site, le contenu.
De cette manière, si par exemple tu veux un jour changer la couleur de texte de toutes les pages de ton site, tu n'auras qu'à trifouiller le code de ton fichier css et hop ! Toutes les pages de ton site auront leur couleur de texte changée.
Tu n'auras pas à passer sur chaque page de ton site.
(bon, là, c'est simplifié à l'extrême, hein ^^ )
-
en fait il y a des programmes qui permettent de retranscrire en format html une mise en forme de texte, si tu veux gagner du temps...Si vraiment tu veux faire comme ça je te trouverai ce prog, mais tu vas voir ça n'est vraiment pas indispensable !!!
Pour ce qui est de copier coller le code source, non ce n'est pas la peine, si tu fais ça tu auras toujours la même page !! Non, il suffit que tu indiques dans la balise qui contient ton texte la classe css utilisé...
ex : je fais un tableau...
soit le code source suivant :
<table>
<tr>
<td>ce texte est destiné à être mis en forme</td>
</tr>
</table>
ici, c'est la balise de la cellule td qui contient le texte...
il suffira donc de dire :
<td class="bleugras">ce texte est destiné à être mis en forme</td>
pour que le texte soit mis en forme selon le style...à condition bien sûr d'avoir indiqué dans ta page le chemin de ta feuille de style :
<head>
<title>mon blog sur les rollmops</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
elle se place donc dans la balise head, et dans cet exemple elle est dans le même dossier que les pages html...
-
De cette manière, si par exemple tu veux un jour changer la couleur de texte de toutes les pages de ton site, tu n'auras qu'à trifouiller le code de ton fichier css et hop ! Toutes les pages de ton site auront leur couleur de texte changée.
Avec un lien pour illustrer cela : http://www.csszengarden.com/(http://www.csszengarden.com/)
-
vi ! enfin ça c'est le level au dessus !!! la crème de la crème in css :mdr:
-
Yep, et faudrait que je my mette... Depuis le temps que je dis ça... ^^;
-
Bon... retour de ma part.
Non, je n'ai pas abandonné mon idée! *têtue la fille* et maintenant que je vais pouvoir me poser, je me replonge dedans.
Je suis retournée voir les liens donnés par Glazou' et m'en vais imprimer tout ça.
Entre temps, j'ai retrouvé le tutoriel de NVu (le complet, pour la version standard), soit une belle centaine de pages à me potasser. A vrai dire, j'avais commencé une vague ébauche de site, mais m'étais arrêtée devant justement la lourde répétition "manuelle" des mises en forme des pages que de toute manière je perdais souvent en partie, même en récupérant le code source de la page qui me servait (toujours artisanalement) de modèle.
Donc, je vais reprendre ma route difficile vers le design de site, ce qui signifie en gros qu'il va falloir vous attendre à voir fleurir une palanquée de questions débiles de ci de là dans ce topic...
*rires dans le fond*
Et on ne se moque pas, non mais!^^;;;;;
-
bah amuse toi bien :D
mais bon le mieux c'est de faire une page de base avec un menu, des liens, des images, des tableaux, bref toutes les joyeusetés du html , pis tu appliques les styles et tu modifies les styles directement...
au moins c'est visuel, tu t'emmerdes pas ^^
-
Remontée de topic pour une question qui me pose souci.
Mine de rien, je m'y suis mise, effectivement, les CSS c'est puissant, et extrêmement utile. Seulement, j'ai un peu de mal à intégrer la notion de chemin relatif/chemin absolu...
En remontant ce topic, j'ai trouvé ces lignes données par Glaz':<head>
<title>mon blog sur les rollmops</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
elle se place donc dans la balise head, et dans cet exemple elle est dans le même dossier que les pages html...
Et dans ce cas, justement, ou les pages html et css sont dans le même dossier, mon lien relatif, en fait, ce n'est que mon "nom de fichier".css et aucune arborescence avant?
Nan, parce que forcément, sur ma bécane, ça marche, mais en ligne, ça marche pas. Je sais que j'ai merdouillé dans le chemin de la feuille de style, mais je voudrais être sûre que j'ai bien compris en fait^^
-
Euh... tu parles de quoi là ?
De chemin relatif et absolu dans le html ou dans le css ( pour le positionnement ) ?
Bon sinon moi je colle toujours tout en relatif ( sauf en cas de php / include chiant où je colle des url en absolu ) et c'est ce qu'il y'a faire... demande à tout intégrateur web il te diras la même chose que moi ;)
J'ai aussi la fâcheuse tendance à mettre mes images dans un dossier medias et ma css dans un dossier style... ce qui me donne un chemin
<link href="styles/general.css" rel="stylesheet" type="text/css" media="all" />
A priori je dirais que ton code est bon... file moi le lien de ta page ( pm si tu veux ) et je te dirais quoi...
Je conseil aussi firebug qui permet de voir tous ce qui bug de css et de le modifier en ligne ;)
-
Dans le html^^
En fait, je t'explique: y a un moment, j'avais fait un page web, avec la feuille de style qui allait avec. J'ai fait une autre page, et du coup, je voulais réutiliser la même feuille de style. Donc j'ai exporté ladite feuille de style, dans le même dossier que celui où j'enregistre mes pages html.
Donc, pour créer ma deuxième page, j'ai appelé ma feuille css, mais en fait, j'ai laissé le chemin absolu de la css, et je n'ai pas mis le chemin relatif. Forcément, sur ma bécane, ça s'affiche, nickel, mais sur le net, non. Donc, il faut que je modifie le chemin du .css dans le code de ma page. Là, j'ai ça:
<link rel="stylesheet" href="file:///C:/Documents%20and%20Settings/Vanina/Mes%20documents/Vanina/blog%20UDC/doc%20technique/export.css" type="text/css">
Ca marche pas, on est bien d'accord^^
Est ce que si j'écris tout simplement ça (sachant que tout est dans le même dossier):
<link rel="stylesheet" href="export.css" type="text/css">
Ca va marcher, d'après toi? :unsure:
-
Normalement oui :)
Maintenant si tu as appelé des images en background dans ta Css et qu'elles ont un chemin "ile:///C:/Documents%20and%20Settings/Vanina/Mes%20documents/Vanina/blog%20UDC" elles ne s'afficheront pas
-
Cool! :D Merci, je vais faire mes modifs dans la soirée (ce serait vraiment bête de se retaper toute la feuille de style^^).
Maintenant si tu as appelé des images en background dans ta Css et qu'elles ont un chemin "ile:///C:/Documents%20and%20Settings/Vanina/Mes%20documents/Vanina/blog%20UDC" elles ne s'afficheront pas
Mais par curiosité, pour quoi ne s'afficheraient elles pas? parce qu'elles ne sont pas dans le même dossier? Dans ce cas, il faut écrire ce que tu as mis plus bas? à savoir:
<link href="styles/general.css" rel="stylesheet" type="text/css" media="all" />
En fait là dedans, tu déclares que ta feuille de style est dans un dossier à part (styles), c'est ça, et du coup tu déclares le dossier en question? Mais pour tes images, le code va les chercher où du coup?
-
Mais par curiosité, pour quoi ne s'afficheraient elles pas? parce qu'elles ne sont pas dans le même dossier?
En fait là dedans, tu déclares que ta feuille de style est dans un dossier à part (styles), c'est ça, et du coup tu déclares le dossier en question?
Mais pour tes images, le code va les chercher où du coup?
En fait moi j'ai pas de lien "Mes documents tout ca"
Je travail dans un dossier "web", dans web il y'a "medias" où je mets les images, "france" où je mets les pages à part l'index et "style" pour la css...
Si tu veux coller une image dans un background faut coller dans ta css...
#fond_blocdroit
{background-image:url(../medias/Bg_DegradeBD.jpg);}
Là il va chercher ton image dans le dossier medias par rapport non pas à ta page mais à ta feuille de style ( ca te pemet de faire des sous dossiers dans "france" et d'utiliser le même styles sans changer ton arborescence parce que tu as crée des sous dossiers )
Donc c'est un lien relatif...
Un petit schéma pour que tu vois bien le côté relatif du lien
- Web
- index.html
- france
- styles
- styles.css
- medias
- Bg_DegradeBD.jpg
Les "../" indique que le chemin sort d'abord du dossier "style" il se retrouve donc à la racine où tu trouves france / styles et medias ... puis il va dans medias " medias/" puis prend l'image ;)
-
En fait moi j'ai pas de lien "Mes documents tout ca"
Je travail dans un dossier "web", dans web il y'a "medias" où je mets les images, "france" où je mets les pages à part l'index et "style" pour la css...
Et sinon... ben j'ai tout compris! :D Tu expliques hyper bien, c'est un plaisir pour suivre, merci beaucoup. Déjà, tu vois, savoir ce que veut dire "../" tout de suite, ça va mieux. Dans le cas d'un site web, donc ta "racine" c'est index.html auquel sont rattachés tous tes dossiers. Donc, y a plus qu'à lui dire dans quel dossier chercher. Ca, c'est impec'. Et le coup de l'image déclarée direct dans la css, c'est quand même bien puissant. En fait, on peut faire à peu près tout ce qu'on veut, et si on blinde bien son truc dès le départ dans la css, on gagne un temps monstrueux.
J'adore^^
-
En fait moi j'ai pas de lien "Mes documents tout ca"
Je travail dans un dossier "web", dans web il y'a "medias" où je mets les images, "france" où je mets les pages à part l'index et "style" pour la css...
Et sinon... ben j'ai tout compris! :D Tu expliques hyper bien, c'est un plaisir pour suivre, merci beaucoup. Déjà, tu vois, savoir ce que veut dire "../" tout de suite, ça va mieux. Dans le cas d'un site web, donc ta "racine" c'est index.html auquel sont rattachés tous tes dossiers. Donc, y a plus qu'à lui dire dans quel dossier chercher. Ca, c'est impec'. Et le coup de l'image déclarée direct dans la css, c'est quand même bien puissant. En fait, on peut faire à peu près tout ce qu'on veut, et si on blinde bien son truc dès le départ dans la css, on gagne un temps monstrueux.
J'adore^^
Pour l'image dans le css après tu as des astuces :
Si tu as un dégradé en hauteur tu peux par exemple ne prendre qu'un pixel de large et tout de haut... avec un background-repeat:repeat-x; il se repetera seulement sur la largueur... c'est moins lourd en terme de poids qu'un dégradé de 700px par exemple...
Avec background-position tu peux aussi l'aligner à droite ou à gauche, en bas ou en haut...
par exemple pour l'exemple en image, je coupe mon image juste au dessus du bleu, je fais une image du truc rouge seulement et je vais le positionner à droite de mon div... ca m'évite de faire une image de toute la largueur ou de devoir faire un tableau, donner une taille aux cellules du tableau, de mettre l'image en dur dans la page... comme ca si le client en veux plus je le mets en commentaire dans ma css et ca m'évite de l'enlever à la mano dans chaque page où je l'ai utilisé et de supprimer le tableau parce qu'il me servira plus :P ( j'suis paresseux des fois )
Les css c'est quand même bon pour customiser... là je suis aussi sur un site où toutes les couleurs et dégradé change en fonction de l'univers où tu es ( site de sport...)
Donc le code est le même partout, on va juste chercher dynamiquement la css en fonction de l'univers ca permet de pas avoir à tout recoder à chaque fois juste pour des images XD