Mise en page css

Disponible uniquement sur Etudier
  • Pages : 10 (2280 mots )
  • Téléchargement(s) : 0
  • Publié le : 30 mars 2010
Lire le document complet
Aperçu du document
Div et CSS : une mise en page rapide et facile
par Pierre-Baptiste Naigeon

Date de publication : 19 Avril 2006 Dernière mise à jour : 04 Mai 2006

La mise en page en utilisant des tableaux est fortement déconseillée. Mais comment faire autrement ? Cet article va vous expliquer pas à pas comment arriver aux même résultats, le plus simplement du monde.

Div et CSS : une mise en page rapideet facile par Pierre-Baptiste Naigeon

Introduction I - Page simple : bandeau, contenu, pied de page. II - Ajout d'une barre de menu à gauche du contenu. III - Je voudrai séparer verticalement mon menu en deux blocs égaux... Je peux ? IV - Et un encart de news en haut à droite de mon contenu, sans que ca prenne toute la hauteur, c'est possible ?

-2Les sources présentés sur cette pages sontlibres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2006 - Pierre-Baptiste Naigeon. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse del'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/

Div et CSS : une mise en page rapide et facile par Pierre-Baptiste Naigeon

Introduction
Tout au long de cet exercice, nous allons utiliser deux fichiers : • • index.html : contiendra tout notre code HTML.style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs.

Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises et :

Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS :
div { text-align:center; }

Ce petit bout de code définit simplement que pourtous les éléments de type div, le texte sera centré (text-align).

-3Les sources présentés sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2006 - Pierre-Baptiste Naigeon. Aucune reproduction, même partielle, ne peut être faitede ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/

Div et CSS : une mise en page rapide et facile par Pierre-Baptiste Naigeon

I - Page simple : bandeau,contenu, pied de page.
Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : • • • Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur :#FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99

Ce qui va se transcrire dans notre fichier CSS par :
div#bandeau { width:600px; height:50px; background-color:#00CCFF; } div#contenu { width:600px; height:400px; background-color:#FFCC00; } div#piedpage { width:600px; height:50px; background-color:#33FF99; }

Vous remarquerez le signe '#' placé après 'div', et suivi d'un descriptif. Il vapermettre de définir un identifiant (unique), auquel s'appliquera le style. Ici, nous avons donc défini trois identifiants : 'bandeau', 'contenu', et 'piedpage'. Les noms sont, je pense, assez explicites pour ne pas avoir besoin d'en rajouter ;) Pour chacun des identifiants, nous avons défini trois propriétés : • • • width : la largeur de notre bloc height : la hauteur du bloc background-color : la...
tracking img