-
le B.A. BA
Le minimum à savoir avant d'attaquer cette partie :
- Créer une classe
- L'utiliser dans une page html
Vous avez bien lu? Ok, alors on va voir comment combiner les deux (même si je pense que vous avez déjà une petite idée)
On va travailler avec div. Tout d'abord, créer une classe de type boite en css.
On a vu que, devant le nom du sélecteur, on pouvait mettre un point ou un dièse. Je ne me sert presque jamais des dièse dans ekla, mais c'est bien de savoir l'utiliser si vous avez envie de créer un site web. Bref, on sais également qu'il faut mettre un ou des attribut avec div. Les deux qui nous intéresse pour faire apparaître notre objet dans une page, ce sont "class" et "id". Vous commencez a comprendre?
Si ma classe, est précédé d'un point, je le fais apparaître avec l’attribut "class"
Si ma "classe" est précédé d'un dièse, je le fais apparaitre avec l'attribut "id". Et dans ce cas, on dit que c'est un identifiant
Voici le code pour ceux qui ont besoin d'un exemple:CSS.boite{ width: 40%;
border: 1px double black;
box-shadow: 0px 0px 10px #de510f;
padding: 5px 15px 5px 15px;
margin: 5px 5px 5px 15px;
color: black;
background-image: url("http://ekladata.com/3XiUMiigLjJ0MbKR4SHbxwsS6WE.jpg");}HTML<div class="boite">Blabla d'exemple </div>
Ce qui me donne:Blabla d'exemple
Si vous ne voulez qu'un texte personnalisé, on utilise une autre balise : <span>
Cela fonction exactement de la même manière qu'avec <div>, sauf que l'on remplace "div" par "span" ;)
-
Commentaires
Heu... très bizarre... Je vois pas d'ou sort ce p> XD
Tu peux me montrer tout le code de ton article? (si c'est que ça, je vois vraiment pas quoi faire ^^')
Coucou =D
Merci pour le tutoriel,mais faut-il a chaque fois faire le code?car c'est un peu ennuyant de tout faire ...
Peut-on par exemple quand on fait un article il se met directement?
Pas que je sache... C'est vrais que ça serai plus pratique, mais a force, c'est automatique d'écrire dans le html ;) Et puis, <div class="CLASSE"> c'est quand même pas trop long a écrire ^^
Désolé de te rederanger >.> je n'arrive pas a mettre la "boite au milieu j'ai essayé sur l'accueil de mon blog mais c'est toujours a gauche =/
xD Merci *-* j'avais totu essayé mais j'ai rien trouvée xD /SORT/ Il faut le mettre dans css?J'attends que tu fasse l'article car la je suis perdue >.> /sort/ *se sent bête comme un poisson rouge/regarde son poisson -oui oui j'ai un poisson rougeu_u-/
Oui, c'est à mettre dans le css, dans le code de ta classe ;)
Je pense que je vais mettre l'article demain
voila mon code
.boite{ width: 90%; border: 1px double #29436f; box-shadow: 0px 0px 10px #29436f;padding: 5px 15px 5px 15px; margin: 5px 5px 5px 15px; color: #29436f; background-image: url("http://data0.eklablog.fr/hello-project/mod_article23631380_1.jpg");}
Il faut mettre du html aussi, ça ne risque pas de marcher sinon ;)
Met ce code dans l'article ou tu veux mettre ta boite:
<div class="boite">Texte, image....</div>
Coucou nagalia, j'ai fait le tuto et ça marche parfaitement !
Mais, comment fait-on pour centrer la boite ?
Oui, c'est pour centrer. ça supprime les marge de gauche et de droite par contre, mais tu peux rajouter margin-top et margin-bottom, pour faire les marges en haut et en bas.
/!\ Il faut indiquer la largeur de l'éément pour le centrer
margin: 0 auto;
width: Xpx;Il faut que que fasse MAJ+Enter pour sauter des lignes sans tout déformer ;)
Ou bien tu le fais en le html en mettant <br/> à chaque fois que tu reviens à la ligne
Aaaaah d'accord ! *a du relire l'article dix fois pour finir par comprendre*
Super, je vais essayer ça tout de suite ! Merci. :)
29NovaliaDimanche 11 Mars 2012 à 12:14j'ai.. rien pigé >_> (alors que j'ai lu les articles en lien au moin 10 fois et que j'ai aussi relu cet article 10 fois ._.)
Soit : 1. je suis nulle
2. je comprend pas comme je devrais comprendre (ça m'arrive souvent)
3. j'ai besoin d'entrainement xD
Le but, c'est de créer des "boite" dans les articles, comme je fais souvent. Si tu ne comprend pas avec mes explications, copie le css dans ton css et met le html dans un article quelconque pour voir le résultat sur mon blog.
Tu modifie ensuite ce que tu veux.
31NovaliaDimanche 11 Mars 2012 à 19:17c'est bon, je vien de comprendre xD
j'avais pas compris ce que ça faisait en fait... parce que c'est la même chose que créer une classe...
Réponse numer : 2. je comprend pas comme je devrais comprendre (ça m'arrive souvent)
C'est créer une classe en css et l'appliquer dans une page html ;)
Et qu'est-ce que tu devrais comprendre que tu ne comprend pas? (c'est français c'te phrase?)
Ca va te paraître débile mais... quel code? Je suis vraiment une débutante alors c'est bien galère pour moi >.<
Tu dis "J'arrive pas à mettre mon module simple hors de la page"
Quel code CSS et quel code HTML as-tu utiliser pour essayer de mettre ton module hors de la page?
Celui que tu avais mis sur l'article; <div class="navigation">CONTENU</div> et .navigation {position: fixed;
top: Xpx;
left: Xpx;}Déjà, dans le css, il fait que tu modifie le code que je t'ai donné
.navigation {position: fixed;
top: Xpx;
left: Xpx;}Remplace les X par un nombre de pixel, ça indiquera à quel emplacement ce trouve ton module.
Mais attention, ça ne déplace pas le module, uniquement le contenu que tu mettre à la place de CONTENU
<div class="navigation">CONTENU</div>
merci pour tout ces codes !!! mais je crois avoir vu un jour dans ton blog (si je ne me trompe pas...désolé si je me trompe) un code pour avoir un header supérieur a 400ko et je ne trouve plus l'article alors si jamais tu saurais où il se trouve pourrais-tu me passez le lien ? dsl du dérengement
44NovaliaDimanche 11 Novembre 2012 à 14:59Est-ce qu'on peut changer la dimension de la boite juste dans le html ? (par exemple, la mettre plus petite, mais juste une boite)
Est-ce qu'on peut faire deux boites sur la même ligne ?
dans le html, c'est la même propriété qu'en css, mais avec l'attribut "style":
<div class="boite" style="width: Xpx; height: Xpx;">Blabla</div>
Pour mettre deux div sur la même ligne, il faut que tu les définisse comme flotante:
<div class="boite" style="float: left">Blabla</div><div class="boite" style="float: left">Blabla</div>
46NovaliaDimanche 11 Novembre 2012 à 20:01J'ai un gros souci : quand je clique sur html dans l'éditeur d'un article (et de tous les autres articles), bah les
codes n'aparaissent pas et je n'ai pas possibiliter une fois que j'ai mis mon code de l'enregistrer :S
Coucou !
Merci pour ce tuto très instructif ! Je suis fan de ton blog, qui m'aide un peu sur le HTML et le CSS ! Je connaissais un peu du premier, mais tu m'as fais un intéressant rafraichissement de mémoire xD J'expérimente un peu les codes pour le moment après je me lancerais un peu plus ;)
Mais tite question : que veut dire pudding ?
Ajouter un commentaire
Efface le dans le html