GTAOnline.net

Forum GTAOnline => Discussions générales => Graphisme/Créations => Discussion démarrée par: Infu le 05 Juin 2013, 18:20:08

Titre: [HTML 5 / CSS 3] Experience Template [Débutant]
Posté par: Infu le 05 Juin 2013, 18:20:08
Bonjour,

Depuis quelques temps je me mets à apprendre le HTML et le CSS. Grace aux connaissance que je bénéficie maintenant et de l'aide de maniac sur certain points... Je vous présente une template, simple mais suffisant pour quelqu'un qui souhaite juste faire apparaître trois ou quatre news. Tout est manuel (comme la majorité des templates), une news se fait dans le script.

Pour créer une news, il faut procéder comme ceci:

Code: (html5) [Sélectionner]
<section>
<div class="iconemessage"><div class="baralanoix"><p>
..Votre texte ici..
</p></div></div>
</section>

Explications...

Code: (html5) [Sélectionner]
<div class="iconemessage"> <!-- Permet d'afficher la flèche verte. (Que vous pouvez changer à partir du dossier d'images) -->
<div class="barrealanoix"> <!-- C'est la barre verticale blanche à côté de l'image. Elle se rétracte et s'allonge par rapport au nombre de lignes -->
<p></p> <!-- Permet de conserver la mise en page -->

L'ordre dans lequel j'ai disposé les balises est primordial, sinon tout sera au mauvais endroit.

Quelques screens...

Haut du site: (http://uppix.net/1/b/e/958c7bb6b72b76d72f3b81c928a01.png)

Bas du site: (http://uppix.net/f/7/2/1f716230f5ca70457ab91fca0ab67.png)

Téléchargement...

SolidFiles - v1 (http://www.solidfiles.com/d/9a286010aa/)



Comme j'ai précisé dans l'archive, je vous demande de ne pas vous approprier ce fichier, ça ne vous coûte rien.
Titre: Re : [HTML 5 / CSS 3] Experience Template [Débutant]
Posté par: rafffel le 05 Juin 2013, 19:15:06
Un peu light pour que ce soit un Template complet mais c'est déjà un bon début.
J'aime bien le fond .
Il te reste plus qu'à te mettre au php/mysql/javascript et tu auras la panoplie du parfait développeur web :p.
Titre: Re : [HTML 5 / CSS 3] Experience Template [Débutant]
Posté par: Infu le 05 Juin 2013, 19:52:40
Merci Raffel. C'est vrai que c'est léger, mais disons que je me perfectionnerai ...
Pour le PHP toussa, Maniac m'a dit la même chose.


++  :smile:
Titre: Re : [HTML 5 / CSS 3] Experience Template [Débutant]
Posté par: GtaManiac le 05 Juin 2013, 19:59:24
Ah ok je penser que tu voulais juste montrer un screen de ton blog :rolleyes:

Essaye de faire quelque chose d'un peu plus avancé et qui sort de l'ordinaire, moi j'ai juste fait en sorte que ton code soit pas crade en validant ça sur le W3C ^^

Sinon pour le JS c'est de moins en moins utiliser depuis HTML 5 et CSS3 avec toute les transitions et effet plus ou moins complexe qui sont possible maintenant, et puis un site sans JS c'est un gain de temps, réactivité et sécurité ^^
Titre: Re : [HTML 5 / CSS 3] Experience Template [Débutant]
Posté par: rafffel le 05 Juin 2013, 20:07:40
Je suis d'accord sur le fait qu'il soit moins utiliser et encore que ça reste a voir avec les balises Canvas les  websocket (NodeJs) ,l'ajax(pour vérifier si un pseudo est déjà occuper par exemple) qui utilise le javascript.

Pour ce qui est des transition simple oui il est possible d'éviter le javascript mais l'apprendre ne sera pas un mal.
(surtout que pour connaitre la base de son utilisation on reste dans des choses simples).
Titre: Re : [HTML 5 / CSS 3] Experience Template [Débutant]
Posté par: Gzsume le 05 Juin 2013, 20:43:54
Évite d'utiliser un paragraphe pour la mise en page des marges, tous les navigateurs ne réagiront pas de la même manière et certains n'afficheront pas la même marge. À la place, tu peux utiliser le code CSS

Code: (css) [Sélectionner]
margin(-top, -bottom): 1337px;
Sur l'élément dont tu souhaites appliquer une marge. :wink:
Titre: Re : [HTML 5 / CSS 3] Experience Template [Débutant]
Posté par: GtaManiac le 05 Juin 2013, 21:28:37
Ouais c'est sur, ça reste largement utiliser mais de plus en plus de professionnel ou même des particuliers trouve des méthodes moins "lourdes" dans l'HTML5 et le CSS3 pour arriver à avoir la même chose, ce qui fait que c'est plus léger, plus rapide, moins chiant à mettre en place et t'es sur de pas te taper des injections :rolleyes:

Après certes, ça reste expérimental et il faut de la "mécanique" sous le capot ^^
Titre: Re : [HTML 5 / CSS 3] Experience Template [Débutant]
Posté par: Rezen le 09 Juin 2013, 23:33:37
J'aime bien moi ! Courage mon p'tit Infu !  :kiss:
Titre: Re : [HTML 5 / CSS 3] Experience Template [Débutant]
Posté par: Infu le 10 Juin 2013, 15:44:37
Merci rezen :)

[spoiler]Tiens voilà tes 10€  :closedeyes:

(http://www.google.fr/url?source=imglanding&ct=img&q=http://www.heberger-image.fr/data/images/66504_10_euros.jpeg&sa=X&ei=ONi1Ub_aOcOR0AXbv4C4CQ&ved=0CAkQ8wc&usg=AFQjCNFq4AEIQpLfvOqVyBh-w62uVKWPpQ)[/spoiler]