Réaliser des textes sur deux colonnes par exemple, uniquement en CSS et sans tableau.
Ce texte est formaté normalement avec code HTML
Avec le type de positionnement absolu qui est le plus rencontré, le placement
d'un objet consiste à créer une boîte indépendante
du reste du contenu de la page, dans laquelle on place du texte ou des images.
Il se trouve très souvent utilisé car il est le plus précis
et on obtient d'excellents résultats. Ce positionnement est déterminé
par rapport au coin supérieur gauche de la fenêtre du navigateur.
Avec ce type de positionnement absolu qui est le plus rencontré, le placement d'un objet consiste à créer une boîte indépendante du reste du contenu de la page, dans laquelle on place du texte ou des images. Il se trouve très souvent utilisé car il est le plus précis et on obtient d'excellents résultats. Ce positionnement est déterminé par rapport au coin supérieur gauche de la fenêtre du navigateur.Avec ce type de positionnement absolu qui est le plus rencontré, le placement d'un objet consiste à créer une boîte indépendante du reste du contenu de la page, dans laquelle on place du texte ou des images. Il se trouve très souvent utilisé car il est le plus précis et on obtient d'excellents résultats. Ce positionnement est déterminé par rapport au coin supérieur gauche de la fenêtre du navigateur.
Avec ce type de positionnement absolu qui est le plus rencontré, le placement d'un objet consiste à créer une boîte indépendante du reste du contenu de la page, dans laquelle on place du texte ou des images. Il se trouve très souvent utilisé car il est le plus précis et on obtient d'excellents résultats. Ce positionnement est déterminé par rapport au coin supérieur gauche de la fenêtre du navigateur. Avec ce type de positionnement absolu qui est le plus rencontré, le placement d'un objet consiste à créer une boîte indépendante du reste du contenu de la page, dans laquelle on place du texte ou des images. Il se trouve très souvent utilisé car il est le plus précis et on obtient d'excellents résultats. Ce positionnement est déterminé par rapport au coin supérieur gauche de la fenêtre du navigateur.
Le calcul à effectuer est simple :
Exemple boîte "un"
left:10% = distance
entre bord gauche boîte "un" et bord gauche fenêtre.
top:430px = distance entre bord supérieur boîte "un"
et bord supérieur fenêtre.
width: 40% = largeur accordée au
contenu de la boîte.
Exemple boîte "deux"
left:55% = distance
entre bord gauche boîte "deux" et bord gauche fenêtre
: 10% de la boîte "un" + 40% du contenu de la boîte "un"
+ 5% de distance pour séparer boîte "un" de la "deux"
= 55%.
top:430px = distance entre bord supérieur boîte "deux"
et bord supérieur fenêtre.
width: 40% = largeur accordée au
contenu de la boîte.
Seules les valeurs de "left" ont changé, c'est-à-dire les distances par rapport à la bordure gauche de la fenêtre.
Code de cette page entre <HEAD> et </HEAD>
<style type="text/css">
body
{color:black ; text-align:justify ; font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ;
background-color: #FFFFFF ;}
.un
{ position:absolute ;
left:10% ;
top:430px ;
font-family: Arial, Helvetica, sans-serif ;
color: #000000 ;
width: 40%;}
.deux
{ position:absolute ;
left:55% ;
top:430px ;
font-family: Arial, Helvetica, sans-serif ;
color: #000000 ;
background-color: #FFFF00 ;
width: 40%;}
</style>
Code 1 dans BODY soit appel de classes :
<p class="un"><b> Texte ......... </p>
<p class="deux"><b> Texte ......... </p>
Code 2 dans BODY soit en ligne :
boîte "un"
<div style="position:absolute ; left:10%; top:430px ; font-family: Arial, Helvetica, sans-serif ; color: #000000 ; background-color: #FFFF00 ; width: 40%;" > Texte .... </div>
boîte "deux"
<div style="position:absolute ; left:55%; top:430px ; font-family: Arial, Helvetica, sans-serif ; color: #000000 ; background-color: #FFFF00 ; width: 40%;" > Texte .... </div>
