Thin:Media

Positionnement avec css

André — Wed, 01 Sep 2010 18:34:37 +0000

Pour débuter, le css est appliqué au DOM ( Document Object Model ) d’un document, sauf dans les cas explicitement indiqués et c’est ce que l’ont va étudier dans cette articles. Par exemple, prenez une suite de balises comme ceci :
[xhtml wraplines="false"]

Salut tous le monde!

[/xhtml]

Et regardons cela plus en détail. Le DOM à toujours une racine(parent/root) et est suivit d’un ou plusieurs enfants/descendant et ses enfant peuvent être aussi des parents d’enfants! Donc dans notre exemple nous avons comme racine du document la balise div ayant comme valeur de l’attribut id ‘boite1′ avec deux enfants, un est

qui lui ce trouve à être parent avec la balise qui elle est enfant de

et petit enfant de

. . . OUF !

Maintenant, ceci expliqué, débutons avec les différentes façons de positionner une boîte en css à l’aide des propriétés et des valeurs possibles. Nous allons utiliser, pour la première partie, la propriété ‘position’ qui peut avoir l’une des valeurs suivantes :

static : La boîte est placé dans le flux normal de la page.

relative : La boîte est placé en décalage par rapport à sa position calculé dans le flux normal

absolute : La boîte est placé directement dans le conteneur racine à l’aide des propriétés left, top, right et bottom à l’endroit demandé

fixed : La boîte est placé de la même façon que ‘absolute’ à la différence que la boîte sera fixe dans le document à l’endroit indiqué

inherit : hérite des propriétés de son parent

Voici le fichier css pour positionner le mot ‘monde’ avec chacune des valeurs vues ci-haut :

[css]
#boite1{
width:1024px;
height:200px;
background-color: gray;
}

#para1{
color:black;
font-family:Verdana;
font-size:16px;
}

#italique{
color:yellow;
position:static;
}
[/css]

Avec ‘relative’ maintenant, ce qui donne :
[css]
#boite1{
width:1024px;
height:200px;
background-color: gray;
}

#para1{
color:black;
font-family:Verdana;
font-size:16px;
}

#italique{
color:yellow;
position:relative;
right:10px;
}
[/css]

Avec ‘absolute’
[css]
#boite1{
width:1024px;
height:200px;
background-color: gray;
}

#para1{
color:black;
font-family:Verdana;
font-size:16px;
}

#italique{
color:yellow;
position:absolute;
right:220px;
top:30px;
}
[/css]

Vue d’ensemble de c’est trois première possibilités :

Exemple des valeurs de la propriété position

Comme vous avez pus le lire plus haut, ‘fixed’ positionnent de la même façon que ‘absolute’ à la différence qu’elle va rester fixe dans le document, donc en utilisant l’ascenseur de votre navigateur, cette boîte ne bougera pas et restera en place.

Structurer une page web avec div et float

André — Fri, 27 Aug 2010 01:24:17 +0000

Comment bien structurer un code source avec un minimum de balise toute en étant de même apparence dans tous les navigateurs et systèmes d’exploitation?

En utilisant la balise
et l’associer avec une feuille de style. Cette technique est très largement utiliser et fait d’une page web, conçus de cette façon, plus compréhensible lors de dépannage et surtout dans les standard stricte du Xhtml1. À l’aide de cette simple balise vous construirez tous le corps et structure de votre document et positionnerai avec les feuilles de style.

Commençons avec un exemple simple, un page avec un en-tête :

[xhtml]

Ma page

Mon en-tête

Le contenu

[/xhtml]

Si vous écrivez ce code, cela vous donnera ceci :

Balisage avec div sans css

Pas très esthétique! C’est pour cette raison que nous allons utiliser les feuilles de style pour positionner et rendre le tout haut en couleur! Petit rappel pour insérer une feuille de style dans votre document html :

Cette dernière sera inséré entre la balise ouvrante et fermante , le fichier css, ici appelé ‘style.css’ et qui ce trouve dans le même dossier (même niveau) que la page web. Et voici ce qu’il inclut comme code :
[css]
body{
color:black;
font-family: Helvetica;
text-align: left;
}

#page{
width:1024px
}

#entete{
width:1024px;
height:200px;
background-color:gray;
}

#contenu{
width:1024px;
min-height:500px;
height:auto !important;
height:500px;
background-color:blue;
}
[/css]
Maintenant ça donne quelque chose de plus agréable pour les yeux!

Balisage avec div contenant du css

L'utilisation ici de !important est pour rendre le tout identique dans tous les navigateur. Essayez en retirant cette valeur et jouez avec les autre valeurs aussi et décrivez ce qui ce passe!

Bon, maintenant passons à un autre étape, celle ou nous ajoutons un menu de navigation à gauche de la page. Un peut de théorie sur la façon de faire. Il faut ce rapeller que la balise
créé un saut de ligne juste après la fermante
correspondantes, donc comment créer un menu avec
si il y a déjà une
sur la même ligne?

N.B. Il y a deux type de balise en xhtml, les balises dite en-ligne et les balises de blocs. Alors que le type en-ligne contribue à formater d'autres éléments sur la même ligne, donc un à la suite des autres, les blocs eux, ajoutes les éléments un par dessus les autres.

Et voila le truc! En utilisant css pour le positionnement des blocs un à la suite des autres avec la propriété float, et un de ses quatre valeurs possible : left, right, inherit ou par défaut none.

Alors sans plus tarder, créons un menu en reprennent le code déjà étudié :
[xhtml]

Mon en-tête

Mon super menu

Le contenu

[/xhtml]
Voyons maintenant le code css pour positionner notre structure :

[css]
body{
color:black;
font-family: Helvetica;
text-align: left;
}

#page{
width:1024px
}

#entete{
width:1024px;
height:200px;
background-color:gray;
}

#contenu{
width:1024px;
min-height:500px;
height:auto !important;
height:500px;
background-color:blue;
float:right;
}

#menu{
width:248px;
min-height:500px;
height:auto !important;
height:500px;
border-right:2px dotted white;
float:left;
}
[/css]
Comme expliquer plus haut, nous contournons le saut de ligne habituellement créé par la balise
en lui précisant, à l'aide d'une feuille de style, de quel façon nous voulons la voir apparaitre, ce qui donne :

Balisage avec div et création d'un menu

Et voila, ça commence à prendre forme! Maintenant, essayer de créer un coin pour votre logo dans l'en-tête à gauche, d'aller placer au centre, encore à l'intérieur de l'en-tête, un texte quelconque et pour terminer, à droite complètement, pour, par exemple, une série de liens.

À force de travail et d'essais/erreur vous comprendrai vite comment appliquer une structure adéquate et concise à vos page web et de coder comme un expert!

@+ dans un autre article sur Thin:Media

connectez-vous au compte

André — Wed, 25 Aug 2010 23:43:22 +0000

Il suffit de vous rendre à cette adresse pour vous connecter à votre compte pour éditer vos pages et articles :

http://thin-media.ca/

Une fois à l’intérieur de votre compte, vous pourrez changer les différents aspect de vos pages, articles et éditer les options.

Thin:Media