aide gratuite page perso Accueil  | Internet | Informatique | Créer sa page persoGlossaireMenu | CSS
www.aidenet.com

 

CSS
Feuilles de style
Positionnement absolu
de paragraphe (2)

Page - 36b  www.aidenet.com

 


exemple positionnement absolu

 

Texte formaté en HTML


Tel que positionné page précédente, il n'est pas toujours évident de savoir où on en est dans la mise en place des boîtes. Il faut donc surveiller sans cesse en visualisant sur le navigateur et en ajustant surtout la hauteur pour ne pas obtenir un chevauchement désastreux non désiré.
Tout le monde ne produit pas ses pages sur un logiciel performant qui traite le CSS presque automatiquement, et que dire de ceux qui ont plaisir encore de nos jours à créer le code source sur une page du bloc-notes. C'est pourquoi je vous propose de positionner vos boîtes en les glissant dans le flux des données du code HTML, en supprimant simplement le "top et sa valeur" qui fixe la position verticale. Tout est conforme pour "Validateur CSS du W3C".

 

Texte formaté en CSS

Exemple 1 : Boîte à l'état brut, sans padding, ni border ni margin.

Texte formaté suivant suivant code CSS : .un
Tel que positionné page précédente, il n'est pas toujours évident de savoir où on en est dans la mise en place des boîtes. Il faut donc surveiller sans cesse en visualisant sur le navigateur et en ajustant surtout la hauteur pour ne pas obtenir un chevauchement désastreux non désiré.
Tout le monde ne produit pas ses pages sur un logiciel performant qui traite le CSS presque automatiquement, et que dire de ceux qui ont plaisir encore de nos jours à créer le code source sur une page de bloc-notes. C'est pourquoi je vous propose de positionner vos boîtes en les glissant dans le flux des données du code HTML, en supprimant simplement le "top et sa valeur" qui fixe la position verticale. Tout reste conforme aux "Résultats du Validateur CSS du W3C".

 

 

 

 

 

 

 

Exemple 2 : Boîte à l'état brut, sans padding, ni border ni margin. Une couleur pour bien visualiser que la boîte correspond juste au texte.

Texte formaté suivant suivant code CSS : .deux
Tel que positionné page précédente, il n'est pas toujours évident de savoir où on en est dans la mise en place des boîtes. Il faut donc surveiller sans cesse en visualisant sur le navigateur et en ajustant surtout la hauteur pour ne pas obtenir un chevauchement désastreux non désiré.
Tout le monde ne produit pas ses pages sur un logiciel performant qui traite le CSS presque automatiquement, et que dire de ceux qui ont plaisir encore de nos jours à créer le code source sur une page de bloc-notes. C'est pourquoi je vous propose de positionner vos boîtes en les glissant dans le flux des données du code HTML, en supprimant simplement le "top et sa valeur" qui fixe la position verticale. Tout reste conforme aux "Résultats du Validateur CSS du W3C".

 

 

 

 

 

 

 

Code de cette page entre <HEAD> et </HEAD> (plus de "top")

<style type="text/css">
body
{
font-family: arial, verdana, trebuchet MS,sans-serif ;
font-size: 10pt ;
color: black ;
text-align:justify ;
background-color: #FFFFFF ;
}
.un
{
position:absolute ;
left:40px ;
font-family: Verdana, Arial, Helvetica, sans-serif ;
font-size: 10pt ;
color: #000000 ;
width:90% ;
}
.deux
{
position:absolute ;
left:40px ;
font-family: Verdana, Arial, Helvetica, sans-serif ;
font-size: 10pt ;
color: #000000 ;
background-color: aqua ;
width:90% ;
}
</style>

Code appliqué aux exemples 1 et 2 dans BODY

<DIV class = "un"> ......... </div>

<DIV class = "deux"> ......... </div>

 

Retour "positionnement absolu"

 

 

 aide gratuite

Tous droits réservés © 1997- 2005. www. aidenet.com

 

validateur HTML  validateur CSS