[HTML 5 / CSS 3] Experience Template [Débutant]

[Infu]

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:

Bas du site:

Téléchargement...

SolidFiles - v1


Comme j'ai précisé dans l'archive, je vous demande de ne pas vous approprier ce fichier, ça ne vous coûte rien.

[rafffel]

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.

[Infu]

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.


++ 

[GtaManiac]

Ah ok je penser que tu voulais juste montrer un screen de ton blog

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é ^^

[rafffel]

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).

[Gzsume]

É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.

[GtaManiac]

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

Après certes, ça reste expérimental et il faut de la "mécanique" sous le capot ^^

[Rezen]

J'aime bien moi ! Courage mon p'tit Infu ! 

[Infu]

Merci rezen :)

[spoiler]Tiens voilà tes 10€ 

[/spoiler]