3. PARAMETRAGE DU FOND VIA CSS

Ouvrez le fichier «style.css» créé deux étapes plus tôt. Il ne doit contenir que deux lignes. Ne les effacez pas. Nous allons commencer par paramétrer le fond de notre site. Pour cela, écrivez ceci :

 

Nous paramétrons donc la balise présente dans la HTML «body». La propriété «background-image» nous permet de définir une image pour le fond de la page HTML. «background-repeat» nous permet de spécifier en mettant la valeur «no-repeat», que nous ne souhaitons pas que l’image de fond ce répète, ni en hauteur, ni en largeur. L’attribut «background-attachement», quand il a la valeur «fixed» nous permet de rendre le fond du site immobile, même si l’utilisateur scrolle grâce à une barre de défilement. J’ai ensuite mis un «background-color» avec pour valeur la couleur que nous avons mis au fond du design sur Photoshop. En effet, si le background ne se répétait pas, nous aurions eu donc du blanc autour de celui-ci. Le fait de mettre une couleur de fond nous permet ici d’assurer la continuité du design. Pour finir, le fait de mettre une valeur de «0» sur la marge extérieure (margin) et la marge intérieure (padding) nous permet de n’avoir absolument aucun décalage entre le contenu de la balise Body et les bords du navigateur. 

4. CREATION DU BLOC INFO

Sautez quelques lignes sous l’accolade fermante des paramètres du body afin de créer le bloc «info» :

Le «#» devant «info» nous permet de spécifier à CSS que nous allons ici créer une id. Une id est un ensemble de propriétés graphiques que l’on peut appliquer à une div (conteneur HTML), mais contrairement aux class, on ne peut l’appliquer qu’une seule fois dans une page. On formate donc ce bloc avec une largeur de 350 pixels (width), une hauteur de 400 pixels (height), on met sa position en «fixed» afin que même en cas de scroll le bloc reste dans le champ de vision, on place son z-index sur 2 afin que la div soit au-dessus des autres et pour finir on lui attribue une marge extérieure en haut de 150 pixels pour que le bloc ne soit pas collé en haut du navigateur.

Notations 

Autres tutoriels Flash, Web

Ecoles & formations - derniers articles
3IS : Une pédagogie sur projets
Par la rédaction le 20/08/2012
3IS, l’école des métiers du Cinéma et de l’Audiovisuel, a ouvert une filière Arts Numériques en 2011, avec l’idée de former des élèves afin qu’ils soient « multi-compétences », capables de répondre à tous les enjeux du monde professionnel.

[Lire le dossier...]

Aries : Une école en pleine mutation
Par la rédaction le 20/08/2012
Présent dans six villes en France, le groupe d’écoles Ariès présente plusieurs avantages : multiples filières (2D, 3D), qualité d’enseignement et une réelle volonté de proposer des formations qualifiantes pour les années à venir.

[Lire le dossier...]

Bellecour - ESIA 3D : Une fourmilière de talents pour l’industrie créative
Par Emilien Ercolani le 04/01/2012
Connue et reconnue, l’école Bellecour, située, comme son nom l’indique, à Lyon, ne se repose pas sur ses lauriers, et continue de proposer des formations au goût du jour à ses élèves, notamment dans la section ESIA 3D. Revue et actualité de l’école du Rhône. 

[Lire le dossier...]

COM'ART : Tentez une nouvelle expérience !
Par Emilien Ercolani le 19/10/2011
Voici une nouvelle école située à Paris. Baptisée Com'Art, elle propose une mise à niveau après le Bac (MANAA) puis des BTS et des formations, de la communication visuelle au design produit en passant par la décoration d'intérieur et l'animation 3D.

[Lire le dossier...]

 Livres et DVD CréaNum

Get Aggregated RSS