• sg1
  • lsda
  • autrerp
  • ressource
  • remerciment

 [HTML + CSS] Creation de balise simple
avatar

Date d'inscription :
26/11/2011

Feuille Personnage
Points de vie:
176/176  (176/176)
Posture: Lanceur de Fioles
Équipement:
Eteend


Légendaire
Légendaire


MessageSujet: [HTML + CSS] Creation de balise simple   Jeu 31 Oct - 12:32

Salut, donc bon ce tuto ne révolutionnera pas votre aperçut de l'html mais c'est des petit truc qui donnerons un plus a votre forum et site. mais pour bien faire je vais vous expliqué comment le faire en plusieur box, hé oui je suis un ouf Very Happy(si seulement cela était vrai x))





Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis dictum dictum. Pellentesque dictum diam sit amet lacus feugiat sollicitudin. Aliquam mattis sem risus, in aliquet lectus tincidunt mollis. Proin euismod semper libero, at pellentesque nisi hendrerit in. Proin porta, metus eu lobortis pretium, lorem dui bibendum nisl, sit amet blandit mauris neque sit amet est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc cursus egestas leo a accumsan. Fusce ligula odio, dapibus et lacus vel, consectetur imperdiet est. Mauris vel tincidunt turpis. Nam id neque vitae velit lacinia consequat. Nullam sodales mollis sapien, at vulputate libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse commodo nec ipsum sit amet condimentum. Nunc congue egestas est sagittis ultrices. Sed non ante euismod, rhoncus risus vitae, sodales augue. Vestibulum in rhoncus lectus.

Integer semper enim diam, posuere dapibus tellus dapibus vel. Nam pulvinar magna non nunc egestas sollicitudin. Nunc sed suscipit diam. Suspendisse tellus lacus, semper ac purus nec, accumsan sodales velit. Nulla ultrices cursus semper. Nulla pharetra, est in dignissim interdum, lectus eros posuere ligula, id hendrerit eros ligula a neque. Curabitur venenatis adipiscing augue. Vivamus placerat gravida dui et feugiat. Mauris accumsan lacinia odio ut porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cras id erat vitae dolor suscipit luctus at quis risus. Etiam suscipit enim orci, eu viverra ipsum posuere eu. Nunc porta consectetur odio, eu semper felis egestas eget. Cras eros erat, gravida at nisl vel, pharetra mollis felis. Nunc pulvinar consectetur elit sit amet eleifend. Phasellus vulputate ligula diam, ac blandit nunc lobortis id. Sed arcu elit, commodo ut tempor at, aliquet eget lacus. Cras in ultricies neque, a egestas eros. Nulla ut tortor nulla. Donec pretium arcu sed lacus malesuada, nec malesuada arcu accumsan. Aliquam erat volutpat. Aenean vel euismod nulla.

Aliquam arcu quam, mollis sed tristique at, lacinia in enim. Mauris in tellus at odio convallis varius. Aenean sagittis sem id eros faucibus rhoncus. Maecenas iaculis ut quam at mattis. Quisque consectetur tortor ut tortor bibendum, quis condimentum est dapibus. Cras at lorem eu erat fringilla interdum. Suspendisse eu aliquet elit.

Sed at vulputate erat. Cras vehicula ac metus in malesuada. Suspendisse vel adipiscing neque. Nulla nec vestibulum odio. Aliquam interdum auctor tortor, sed imperdiet elit auctor eget. Phasellus eu tortor tempus nulla porta consectetur. Proin diam sapien, auctor eu porttitor sed, eleifend ut diam. Praesent interdum quam at turpis bibendum viverra. Cras feugiat tellus in nulla blandit cursus. Maecenas vehicula, dui in luctus hendrerit, est nisi ultrices sem, eget scelerisque justo risus id lectus. Nullam consectetur dignissim fringilla. Duis vehicula sapien id nisl sollicitudin, non sagittis enim porta. Nulla vitae arcu vestibulum, consectetur est ac, lacinia augue. Maecenas auctor massa eu ante faucibus pellentesque. Vestibulum posuere, magna nec auctor convallis, nulla nibh faucibus est, at tincidunt libero nunc et enim. Curabitur mattis, felis ut tincidunt sollicitudin, diam velit ultrices ipsum, eu ultrices velit nibh congue ipsum. Praesent sollicitudin ipsum at tortor.

Donc box simple, une seul balise :)mais je vais quand même expliquer ceci:

Deja le code HTML n'est fait que d'une seul balise; div. c'elle ci defini la box ou le bloc si vous préféré.

Code:
<div class="alertuto">votre texte</div>
, bon je vais quand même développé ceci:


  • div : defini un bloc
  • class="" : defini la propriété css qui lui est rattaché



Refuser
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis dictum dictum. Pellentesque dictum diam sit amet lacus feugiat sollicitudin. Aliquam mattis sem risus, in aliquet lectus tincidunt mollis. Proin
ici deux balise sont utilisé, fieldset et legent. mais comment tout cela fonctionne, c'est tres simple:

Code:
<FIELDSET class="alertuto"><LEGEND><strong>Refuser</strong></LEGEND>le texte</FIELDSET>

  • FIELDSET : defini le bloc comme une div en gros mais c'est un peut plus complexe
  • class="" : defini sont identifiant css
  • LEGEND : defini la Legende (le titre plus grossièrement)



hors les div ou fieldset on peut aussi utiliser un tableau





[Vous devez être inscrit et connecté pour voir cette image]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis dictum dictum. Pellentesque dictum diam sit amet lacus feugiat sollicitudin. Aliquam mattis sem risus, in aliquet lectus tincidunt mollis. Proin euismod semper libero, at pellentesque nisi hendrerit in. Proin porta, metus eu lobortis pretium, lorem dui bibendum nisl, sit amet blandit mauris neque sit amet est. Vestibulum ante ipsum primis in faucibus

ceci est simple

Code:
<table class="alertuto">
<tr>
<td><img src="http://droopy69.free.fr/Image%20site/smiley/smiley%20jack/jack-choppe.gif"/></td><td>text</td>
</tr>
</table>
allez décomposons ceci Wink


  • table : defini le tableau
  • tr : defini une ligne
  • td : defini une colone
  • img : Defini une image



Bon passons au CSS

Code:
.alertuto{
background:#440000;
border: 1px solid  #DF0000;
box-shadow : 0px 0px 2px #000000;
width: 600px;
color: #FFFFFF;
position: center;
padding-left: 2px;
overflow: auto;
height: 80px;
}
allez passons a l'autopsie de ce code Twisted Evil 

.alertuto{ <== {Identifiant CSS}

  • background:#440000; <== {couleur de fond}
  • border: 1px solid  #DF0000; <== {bordure (1px: epaisseur | solid: type de bordure | #couleur}
  • box-shadow : 0px 0px 2px #000000; <== {ombre du bloc}
  • width: 600px; <== {largueur}
  • color: #FFFFFF; <== {couleur texte}
  • padding-left: 2px; <== {margin interieur gauche}
  • overflow: auto; <== {ceci empeche le debordement en ajoutant une scrollbar (voir le bloc 1)}
  • height: 80px; <== {taille du bloc}


[Vous devez être inscrit et connecté pour voir cette image]

[color=#ff0000]SWTOR Signature[/color]:
 



Spoiler:
 
Revenir en haut Aller en bas
Prochain Messages:
avatar

Date d'inscription :
18/07/2012

Age :
20

Localisation :
quelque part dans l'univers
Spencer


Chevalier
Chevalier


MessageSujet: Re: [HTML + CSS] Creation de balise simple   Mer 6 Nov - 18:15

génial grâce a toi mon ordi a crash, il a pas supporté le choc de cette vivisection ^^'


[Vous devez être inscrit et connecté pour voir cette image]
Revenir en haut Aller en bas
Prochain Messages:
avatar

Date d'inscription :
26/11/2011

Feuille Personnage
Points de vie:
176/176  (176/176)
Posture: Lanceur de Fioles
Équipement:
Eteend


Légendaire
Légendaire


MessageSujet: Re: [HTML + CSS] Creation de balise simple   Ven 8 Nov - 16:54

mdr x)


[Vous devez être inscrit et connecté pour voir cette image]

[color=#ff0000]SWTOR Signature[/color]:
 



Spoiler:
 
Revenir en haut Aller en bas
Prochain Messages:
Contenu sponsorisé





MessageSujet: Re: [HTML + CSS] Creation de balise simple   

Revenir en haut Aller en bas
Prochain Messages:
 [HTML + CSS] Creation de balise simple
Page 1 sur 1

 Sujets similaires

-
» Les codages HTML de tata Melow || PREMIER COURS : création d'une boîte
» Go Habs Go - Simple Plan
» AVIS DE RECHERCHE !!!!! LE PASSE SIMPLE AU PASSE COMPOSE !
» Un simple POEME qui dit tant de notre SORT :Le loup et le chien
» creation d'un BB ork sauvage

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Rôle Play Universe  :: Tutoriels-