Les blocs
Pour que se site soit plus beau, vous pouvez utiliser des blocs qui contiendront tout un morceau de texte, images, liens. Sur ce site par exemple, il y a deux blocs. Un bloc de menu et un bloc de contenu. Il y a bien entendu des sous-blocs. Ce qui est très intéressant avec les blocs, c'est qu'on peut leur attribuer toutes sortes de choses grâce aux feuilles de styles. Un bloc est en fait une balise <DIV> qui contient du texte. Pour reconnaitre cette balise, on va lui donner un attribut. Elle deviendra donc: <DIV id="nom_de_l'attribut">Contenu</DIV>
Vous pouvez jouer avec les blocs que vous avez créés en les plaçant en position absolue et en les recouvrant les uns les autres.
Voici un exemple où un bloc en recouvre un autre:
Exemple
Dans la balise <BODY>, tapez ceci:


<div id="bloc1">bloc 1</div>
<div id="bloc2">bloc 2</div>
<div id="bloc3">bloc 3</div>

Dans la balise <HEAD>, tapez ceci:


div{
font-size:20pt;
font-weight:bold; /*propriétés s'attachant à tout les blocs */
text-align:center;
border:thin solid black;
}
#bloc1{
background-color:#FF0000;
position:absolute;
width:x px;
height:y px;
top: w px;
left:z px;
}
#bloc2{
background-color:blue;
position:absolute;
width:w px;
height:x px;
top:y px;
left:z px;
}
#bloc3{
background-color:yellow;
position:absolute;
width:w px;
height:x px;
top:y px;
left:z px;
}


Pour mettre un bloc au-dessus d'un autre, il suffit de changer son emplacement dans <BODY>. Comme il peut se révéler ennuyeux de déplacer un gros bloc de texte d'une partie du document à une autre, on peut aussi lui attribuer une valeur inférieure aux deux autres blocs pour que ceux ci se trouvent au-dessus. Pour ce faire, on utilise la propriété z-index:....;
Exemple:


#bloc2{
background-color:blue;
z-index:-1;
position:absolute;
width:w px;
height:y px;
top: w px;
left:z px;
}

Voici le résultat:
Exemple

Si vous souhaitez avoir un bloc transparent, il suffit que dans la propriété "background-color" vous indiquiez transparent comme couleur. Exemple:
Exemple

Vous pouvez aussi cacher un bloc. Il sera toujours là mais n'apparaîtra pas à l'écran. Pour ce faire, il vous suffit de rajouter la propriété "visibility:hidden;"

les éléments cachés sont considérés comme des spams par les moteurs de recherche.


Le positionnement relatif



Le positionnement relatif permet de décaler des éléments à gauche ou à droite. Il est impossible de jouer en hauteur avec le positionnement relatif.
Voici un exemple:
Dans <BODY>:

<div>
<p id="un">paragraphe 1</p>
<p id="deux">paragraphe 2</p>
</div>

Code CSS dans <HEAD>:

div{
width:x px;
background:#code hexadécimal;
padding-top:5 px;
padding-bottom:5 px;
}
p#un{
position:relative;
left:50 px;
width:150px;
backround-color:yellow;
margin-left:2 px;
padding:2 px;
}
p#deux{
width:175 px;
background-color:#FF0000;
margin-left:1 px;
padding:2 px;
}

Voici le résultat:
Exemple

précédent   suivant

Creative Commons License
Sauf mention contraire, le contenu de cette page est sous licence Creative Commons
Page générée en 0.3227 secondes.
Retour en haut de la page
Imprimer cette page