Tutoriel Vidéo HTML-CSS : Le positionnement en CSS

Voici un tutoriel vidéo plus théorique que d'habitude qui vous permettra donc d'en apprendre un peu plus sur le positionnement CSS avec les attributs :

Vous verrez aussi analyser la structure d'un site internet pour apprendre à développer vos propres structures...


Télécharger la vidéo
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

Feuilles CSS3

Feuilles CSS3
8m

Dans ce tutoriel vidéo vous allez apprendre à détourner la propriété...

Fontstruct

Fontstruct
12m

Dans ce tutoriel vidéo je vous propose de découvrir le service...

34 commentaires
Ajouter un commentaire

LOLO Il y a 18 jours Répondre

Pourquoi vos videos font que de s'arreter et revenir au depart ?

morceus66 Il y a 5 mois Répondre

il n'y qu'une chose à dire: PEDAGOGUE.
bravo

DrScheme Il y a 8 mois Répondre

Slt a tous
merci tt dabord pr le tuto.
Jai un soucis. Je ne parciens pas situer la pubblicité sur mon site qui est ecrite en Javascripte. Jaimerai la positionner a l'extreme gauche et a l'extreme doite(les espaces en blanc) que faire?
http://mickyloranger.com/fr/html/sources.html

Uchiha-Madara Il y a 9 mois Répondre

très bon tuto.
Merci

Shadou Il y a 10 mois Répondre

Très sympa, très clair !
Bravo. ^^

Ungarubu Il y a 11 mois Répondre

Clair et bien organisé. Continuez !

Guga Il y a 1 an Répondre

Enfin la lumière.
Merci mille fois pour ton tuto bien bien clair que tout ce que j'ai pu lire jusqu'à maintenant.

hindoustani Il y a 2 ans Répondre

Merci bien c gentil de votre part

Pobourger Il y a 2 ans Répondre

Pour télécharger les videos des tutoriels, il faut que tu est un compte, et que tu paye 2 euros par moi ou 10 euros pour 6 mois et tu pourras télécharger les vidéo et les sources dans un but pédagogiques biensûr

Cordialement,

hindoustani Il y a 2 ans Répondre

bsr a tous , bon je me suis inscrite mais je sais pas est ce que je peux telecharger ces tutoriels et comment ??merci d'avance

amigos_dz Il y a 2 ans Répondre

merci bcp pour tes tuto bonne continuation , from bejaia in algeria town

Lose Il y a 2 ans Répondre

Super Tuto Merci !

Gartt Il y a 2 ans Répondre

Excellent Tuto! Merci beaucoup, c'est clair comme de l'eau de roche maintenant! ^^
Continue comme ça tu fais plaisir a beaucoup de monde! Merci encore!

koko Il y a 2 ans Répondre

merci super tuto
si possible va enleve la music

SPAM Il y a 2 ans Répondre

J'oubliais, qu'utilise tu avec komodo edit pour que quand tu commence à écrire flo.. par exemple tu es un menu déroulant avec float: et pleins d'autre chose ?

Merci d'avance !

SPAM Il y a 2 ans Répondre

Des bases bonnes à se remémorer !

Merci bien !

boardingnow Il y a 2 ans Répondre

Tres bon est beau site BRAVO je regarde souvent encore merci de prendre sur ton temps

lu2o Il y a 2 ans Répondre

Très bon Tuto! très clair comme l'ensemble de ceux que j'ai visionné sur le site.
Dans la continuité de ce tuto, j'aimerais savoir comment faire suivre deux div avec une hauteur variable selon le contenu, donc une hauteur inconnue au départ.
En page d'exemple : http://lpourtout.free.fr/test/
Merci d'avance

Grafikart Il y a 2 ans

L'idéal est d'englober les 2 éléments dans un grand élément qui prendra l'image de fond, sans oublier le clear à la fin des éléments en float. Sinon on peut faire ça en utilisant du Javascript

lu2o Il y a 2 ans - Répondre

Merci pour la réponse, c'est noté.

Babou Il y a 2 ans Répondre

Très bien merci

Babou Il y a 2 ans Répondre

Juste une petite question, au lieu de créer une class pour le .clear{}, peut-on à la place mettre le <br clear="all" /> dans le html ?
C'est ce que j'utilise personnellement, mais c'est juste pour savoir si c'est conforme, merci

Badbart Il y a 2 ans - Répondre

C'est la même chose, sauf que pour le W3C c'est mieux de le faire avec une class.

Cajoline Il y a 2 ans Répondre

Super Tuto ! En revanche à la propriété clear je préférerais overflow:hidden à mettre directement dans le conteneur, elle permet de faire la même chose sans mettre des balises <div> ou <br /> inutiles dans le code html

Thomas Il y a 2 ans Répondre

Super tuto ca fait deux ans que je me suis lancé dans le css html et je crois que c'est la première fois que je vois un tuto simple et bien expliqué.
Pour ma part j'ai bcp appris en utilisant firebug et en étudiant des sites.
Pour les novices attention votre code css peut réagir différemment selon les navigateurs (notamment ie 6 ie 7 moi j'utilise le programme ietester pour verifier) il doit être le plus "propre possible" ...

Merci encore graphik pour ton site

tibeoh Il y a 2 ans Répondre

Juste un truc, les éléments H1, H2, H3, H4, H5 sont de type block ! Donc ton histoire de div à l'intérieur est autorisé et valide, mais je t'accorde le fait que c'est tout à fait plus propre de mettre un span à la lecture !

Grafikart Il y a 2 ans - Répondre

Oui effectivement une petite erreur, mais je pense qu'on a compris l'idée
Merci

cerise Il y a 2 ans Répondre

Un tuto vraiment utile pour la construction de nos site
merci

Badbart Il y a 2 ans Répondre

Ce tuto devrai être obligatoire a l'école ! Ça éviterai pas mal de problème, et pas mal de demande d'aide sur les forums aussi ^^

Suk3 Il y a 2 ans Répondre

C'est un très bon tutoriel, les positions, j'y avais jamais rien compris :s

Par contre je ne fait pas comme toi, je met un float:left sur mon menu par exemple et pour les contenus je met un clear:right et je met un margin-left avec une valeur supérieur au width de mon menu. Et enfin en fin de page je met un clear:both. Cela change t'il quelque chose par rapport à ta technique ?

Grafikart Il y a 2 ans - Répondre

J'ai déja vu faire cette méthode. Il faut voir si tous les navigateurs modernes (on oublie IE6) mettent bien la sidebar au dessus de la marge du contenu. Sinon ça ne change rien par rapport à ma technique.

dechuck Il y a 2 ans Répondre

Il est super ce tuto!!

Je viens de comprendre la différence entre relative et absolute !! :P lol
merci!!

samir Il y a 2 ans Répondre

merci tu nous approns boucoups
c'est toujour un plaisir de voir tes tutoriaux

Florian Il y a 2 ans Répondre

Super tuto !

Mais j'ai une question : pour qu'un conteneur prenne la dimension des éléments flottants qu'elle contient, j'utilise aussi "overflow:auto;", est-ce une bonne méthode ?

deejay saad Il y a 2 ans Répondre

Super Tuto ! Surtout je suis encore debutant en CSS et xHTML :$
merci beaucoup

Babou Il y a 2 ans Répondre

Super tuto, grand merci à toi, je n'avais pas du tout compris de système des positions ca va beaucoup m'aider, d'ailleurs on peut faire des grandes choses avec une positions banales, avec le fixed, on pourrais faire une genre de barre d'outils qui reste en haut de la page
Merci encore. Continue comme ca :D

darkcryeer Il y a 2 ans Répondre

Très bonne explication du positionnement avec du CSS, si j'avais eu un tel tutoriel des que j'ai commencé à coder en (x)HTML/CSS, je doit dire que cela m'aurais bien aidé.

En attendant, merci à toi encore une fois pour tes tutoriels toujours aussi attractifs et éducatifs.

BORK Il y a 2 ans Répondre

des bases essentielle pour structurer un design =)

mais il est vrai que parfois j'ai bien du mal a placer des éléments alors je force un peut et sa marche donc merci je vais pouvoir me perfectionner un peut plus sur ce théme ^^

tibeoh Il y a 2 ans Répondre

Super !

Merci beaucoup je regarde de suite !

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.