La balise <div> est utilisée pour appliquer un style à un contenu. Cette balise est comme un calque qui ne possède pas de propriétés par défaut. Par exemple je peut créer une <div> verte avec un contour, large de 200 px et haute de 50 px: div{ background-color:#efffea;border:#1c560b 1px solid;width:200px; height:50px; }
Je peux aussi placer du texte dans une div grise de 30% de largeur et décider qu'il sera centré et qu'il y aura une marge intérieur de 5 px : div { background-color:#e0e0e0;border:#ccc 1px dashed;width:30%;text-align:center; font-family:"Courier New", Courier, monospace;padding:5px; }
Les éléments de votre mise en page, les div (ou les paragraphes) peut être en "blocké ou "in-line". On emploie la propriérté display avec les valeurs : block, inline, inline-block...
Block
Les div en block se mettent en page les un sous les autres :
div 1
div 2
div 3
inline
Les div en block se mettent en page les un à côté des autres :
texte court
texte longeur moyenne
texte très long : la largeur de la div s'adapte au contenant
inline-block
Les div en block se mettent les uns à côté des autres et on peut leur donner une dimension :
div 1
div 2
div 3
Les boîtes flottantes
Les Css permettent de régler le positionnement de différentes div grâce à la propriété float : right, left, none ou inherit. Par exemple je peux positionner une boîte verte dans une boîte grise, en haut à droite.
On peut fixer précisément un bloc dans la page avec la propriété position :
Relative :permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.
Lorem boîte en position relative ipsum dolor.
Absolute : permet de placer un contenu précisément
Dans cet exemple j'en profite pour aborder en exemple les propriétés de transparence. Le bloc vert vient se placer en transparence par dessus le texte.
Static : c'est sa valeur par défaut, c'est le positonnement habituel de l'élément, en fonction de son ordre d'arrivée
Fixed : L'élément est positionné par rapport aux bords de la page mais ne défile pas avec la page. Cette possibilité est encore peu reconnue par les navigateurs. Internet Explorer 6 ne reconnaît pas la valeur "fixed" appliquée à la propriété "position". voici un exemple
Les bords arrondis
Pour créer conteneurs avec des bords arrondis, on peut utiliser la propriété border-radius. On précise -moz-border-radius pour les navigateurs mozilla et Firefox, -webkit-border-radius pour Safari et Chrome -khtml-border-radius pour Linux. Il ne fonctionne pas pour IE. On ajoute uen valeur pour l'arrondis : 10px, 20px. On peut aussir préciser l'arrondi pour chaque angle.
angles arrondis
Le Z-index
La propriété "z-index" permet de préciser l'ordre de superposition de certains éléments d'une page. Elle permet d'indiquer que pour deux éléments X et Y , X sera placé au dessus de Y ou inversement.
Cependant, il faut bien faut attention car :
Seuls les éléments positionnés peuvent avoir un z-index, donc un élément qui a pour valeur "relative", "absolute" ou "fixed". Par défaut, les éléments d'une page ne sont pas positionnés (ils sont en "position:static").
Les valeurs les plus élevées sont au premier plan, et les plus faibles sont au second plan.
Un z-index de 2 sera placé au dessus d'un z-index de 1, et un z-index de -1 sera placé au dessus d'un z-index de -2.
Dans cet exemple , le texte est placé par dessus l'illustration, le cadre qui contient l'image est donc en z-index 1 et le texte en z-index 2.
Mise en page avancée en css
Mise en page à plusieurs colonnes
Les css permettent de réaliser des mises en page complexes, à plusieures colonnes. Voici un exemple :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Colonnes de longueurs différentes
Voici une solution pour représenter deux colonnes de largeur différentes et comportant l'une un texte court et l'autre un texte long. Cet exemple est inspiré du site openweb.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Habillage et lettrine
La lettrine
Pour réaliser une lettrine comme dans l'exemple suivant, voici comment procéder : on place le texte dans une div, on écrit la lettre entre deux balises span et on ajoute un peu de css pour le réglage :
Texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine
L'habillage
Pour réaliser un habillage, c'est à dire entourer de texte une image, il existe plusieurs solution.En voici deux :
La première consiste à créer un tableau avec une ligne et deux colonnes, dans lesquelles on met l'image et le texte.
La seconde consiste à reprendre le principe de la lettrine
texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec imagetexte avec image texte avec imagetexte avec image texte avec image texte avec image texte avec imagetexte avec image texte avec imagetexte avec image texte avec imagetexte avec image texte avec image texte avec image texte avec image
texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec image texte avec imagetexte avec image texte avec imagetexte avec image texte avec image texte avec image texte avec imagetexte avec image texte avec imagetexte avec image texte avec imagetexte avec image texte avec image texte avec image texte avec image