Forum de graphistes de la région Midi Pyrénées
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  Connexion  

Partagez | 
 

 positionnement block/inline

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
-patrick-
moderateur


Messages : 3
Date d'inscription : 01/02/2012

MessageSujet: positionnement block/inline   Mer 4 Avr - 6:14

Les inline peuvent être contenus dans des blocks alors que l'inverse n'est pas possible.
Il y a un autre moyen de différencier les deux types d'élément. Il s'agit de ce que l'on appelle le flux.

Le flux désigne l'ordre d'affichage par défaut des éléments.
Par défaut, le navigateur affiche les éléments selon leur ordre d'apparition dans le code source.
Une des propriétés remarquables d'une balise de type inline c'est le fait de ne pas créer un retour à la ligne.
Par conséquent, les éléments du type inline s'affichent par défaut les uns à la suite des autres sur la même ligne.
D'où leur désignation en anglais : inline qui signifie en ligne.

Code CSS :

Code:
.vert {
background-color:green; /* vert */
}

.rouge {
background-color:red; /* rouge */
}

.jaune {
background-color:yellow; /* jaune */
}

Code XHTML :

Code:
<span class="vert">tout sur</span> <span class="rouge">la même</span> <span class="jaune">ligne</span>

A l'inverse les types block s'affichent les uns en dessous des autres.
Avant et après l'affichage d'un élément du type block, il se crée automatiquement un retour à la ligne.

Exemple :

Code XHTML :

Code:
<div class="vert"> block1 ligne1</div>
<div class="rouge"> block2 ligne2</div>
<div class="jaune "> block3 ligne3</div>


Changer le type

Une des possibilités de manipulation des positionnements est celle de changer les types des éléments.
La propriété CSS pour modifier les types des éléments est display (='affiche').
Pour changer un élément de type block en inline il suffit de mettre

Code CSS :

Code:
Display :inline;

Et pour faire l'inverse, il suffit de mettre

Code CSS :

Code:
Display :block;
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
positionnement block/inline
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Le positionnement géographique
» block automatique
» block verrouillé en simulation
» pb avec 255w (positionnement decalé)
» Positionnement par GPS

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graphistes MP :: HTLM/Css :: Liste de balises-
Sauter vers: