BorderLayoutBoxedLayoutOpenLayout Maximum textMedium textSmall text
jeudi 24 mai 2012   Inscription

 
Par la rédaction le 19/10/2011

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

ECV : Développez tous vos sens !
Par Emilien Ercolani le 19/10/2011
Créée en 1984, l'École ECV (école de Communication Visuelle) forme des étudiants sur les métiers du visuel. De l'identité graphique d'une entreprise au packaging d'un produit, les étudiants y apprennent surtout à développer leurs sens.

[Lire le dossier...]

L'IDEM : L'école en phase avec les entreprises
Par Emilien Ercolani le 19/10/2011
L'IDEM (L'Institut de Développement et Enseignement Multimédia), situé dans le sud de la France à Perpignan, adopte un comportement très ciblé sur les entreprises et mise sur l'employabilité de ses étudiants. Ouverte sur l'internationale, l'école propose une formation inédite avec des échanges notamment.

[Lire le dossier...]

 Livres et DVD CréaNum

Concept Art sur Photoshop

/// Atelier pratique Photoshop /// Auteur : Antoine Defarges. /// Elephorm - Durée : 4h22 /// Prix : 40 euros

Le manuel du Mangaka – Débutant

/// Auteur : Kaori Yoshikawa. /// Edition Eyrolles – 158 pages /// Prix : 19 euros

Débutez dans la 3D avec Blender

Le logiciel libre pour réaliser toutes vos images et animations 3D /// Auteur : Antoine Veyrat. /// Editions Le livre du Zéro – 382 pages /// Prix : 29 euros

HTML5 (Video)

Le guide complet de la vidéo et l’audio HTML5 /// Auteur : Silvia Pfeiffer /// Edition Pearson – 368 pages /// Prix : 36 euros

L’animation numérique

Principes, pratiques et techniques : le guide essentiel pour les futurs animateurs /// Auteur : Andy Wyatt /// Edition : Pearson - 144 pages /// Prix : 24 euros

Créer votre application iPhone/ iPad

Apprendre à programer en Objective-C avec Xcode /// Stéphane Le Boiselier /// Elephorm, durée : 3h40 /// 49,90 euros

Apprendre Cinema 4D R13

Les Fondamentaux Vol 1/2 /// Stéphane Anquetil /// Elephorm, durée : 8h15 /// 49,90 euros

Guide pratique de la création graphique

/// Jason Simmons /// Editions Dunod - 2011 - 256 pages /// 22 euros

Responsive webdesign

/// Ethan Marcotte /// Editions Eyrolles - 2011 - 160 pages /// 11,40 euros

Peinture numérique avec Photoshop

Le portrait hyper-réaliste /// Eric Tranchefeux /// Elephorm /// Durée : 5h /// Prix : 39,90 euros 

Apprendre Motion 5

Les fondamentaux  /// Erwan Le Cloirec /// Elephorm /// Durée : 10h25 /// Prix :70 euros

Guide pratique du droit d’auteur 2ème édition

/// Anne-Laure Stérin /// Editions Maxima – 2011 - 544 pages /// Prix : 44,50 euros

Logos et identité visuelle

Principes fondamentaux et études de cas : 300 logos du monde entier, analysés et commentés  /// Auteur : Matthew Healey  /// Edition : Dunod – 2011 – 240 pages –  /// Prix : 29 euros 

L’animation de personnages 3D

Avec 3DS Max 2012 et Character Studio  /// Alain Maindron /// Elephorm /// Durée : 5h30 /// Prix : 50 euros

Apprendre Blender 2.5x 2.6x

Les fondamentaux /// Avec Mickael Guedon /// Elephorm /// Durée : 8h30 /// Prix : 50 euros

Joomla! Les meilleures extensions

/// Par Didier Mazier /// Editions ENI – 394 pages /// 26 euros en version papier /// 21 euros en version numérique

Travaux pratiques avec After Effects

/// Olivier Cotte /// Editions Dunod – 128 pages /// Prix : 22 euros

Le Matte Painting

Ateliers Créatifs  /// Ludovic Iochem  /// Elephorm  /// Durée : 4h45 /// Prix : 50 euros 

Apprendre HTML 5 et CSS3

/// Tutoriel vidéo avec un expert du Web Avec Thierry Audoux  /// Elephorm  /// Durée : 8h20 /// Prix : 50 euros 

Sketchup 8

/// Jean-Luc Clauss  /// Éditions ENI  /// Prix : nc 

L’art de l’iPhonographie

/// Stéphanie Roberts  /// Edition : Eyrolles - 160 pages /// Prix : 15 euros

Montage vidéo et audio libre

/// Par Laurent Bellegarde  /// Éditions Eyrolles – 418 pages /// 35 euros 

Apprendre le rendu 3d avec v-ray 2 - les fondamentaux

/// Vincent Grieu /// Elephorm /// Prix : 55 euros 

Techniques de l’image pour le webdesigner

/// Simon Kern /// Elephorm /// Prix : 49,90 euros

3DVIA Studio – Le guide officiel

/// Par Jacques Vernus /// Editions Eyrolles – 212 pages /// Prix : 33,25 euros