-
Par Nagalia le 27 Octobre 2011 à 13:30
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" ;)
51 commentaires -
Par Nagalia le 27 Septembre 2011 à 19:24
La scrollbar, c'est la barre a droite des pages internet qui permet de monter ou de descendre. Mais on peut aussi l’utiliser dans des bloc grace à la balise <div>. Voilà un exemple:
Un titreBlablablablablablablablabla
Une image
Vous pouvez par exemple l'utiliser dans vos modules qui ont beaucoup de contenu pour ne pas allonger inutilement vos pages.<div style="width: LARGEURpx; height: HAUTEURpx; overflow-x: auto; overflow-y: auto;">CONTENU</div>Les seules valeurs à modifier sont indiquées en rouge, c'est HAUTEUR et LARGEUR (un nombre de pixel).
Votre texte/image/autre se place dans CONTENU
76 commentaires -
Par Nagalia le 25 Septembre 2011 à 18:09
Voici un code HTML tout simple pour faire défiler des éléments (texte, images...) de façon automatique :
CODE :<marquee direction="left" scrollamount="X" >CONTENU</marquee>
"direction" indique le sens du défilement. Il peut prendre les valeur "left" (vers la gauche), "right" (vers la droite), "up" (vers le haut) et down (vers le bas)
"scrollamount" indique la vitesse du défilement. Plus le nombre est grand, plus le défilement sera rapide. Dans l'exemple, j'ai utilisé scrollamount="3"
72 commentaires
Suivre le flux RSS des articles de cette rubrique
Suivre le flux RSS des commentaires de cette rubrique