Cours HTML

CSS : Mise en page

Les boîtes

Les boîtes ou div sont des éléments HTML employés pour réaliser les mise en pages. Une DIV n'a pas de propriété de taille par défaut, elle s'adapte à son contenu.

Les boîtes ont par défaut un comportement dit en Block, c'est à dire que les DIV se placent les unes en dessous des autres dans la page HTML.

Les dimensions

Pour régler la largeur et la hauteur d'une DIV, on emploie les propriétés suivantes :

• width : Cette propriété règle la largeur d'un élément, en pixel, em ou pourcentage.
• height : Cette propriété règle la hauteur d'un élément, en pixel, em ou pourcentage.

Les marges d'une DIV se règlent:

• margin : Cette propriété règle la marge autour d'un élément, en pixel, em ou pourcentage. On peut régler la marge de manière identique, des quatre côtés, ou régler uniquement la margin-top, margin-right, margin-bottom ou margin-left. Lorsque l'on règle la margin on indique les dimensions en partant de la margin-top et dans les sens des aiguilles d'une montre, ensuite, la margin-right, la margin-bottom, puis la margin-left.
• padding : Cette propriété règle la marge à l'intérieur d'un élément, en pixel, em ou pourcentage. On peut régler la marge de manière identique, des quatre côtés, ou régler uniquement le padding-top, padding-right, padding-bottom ou padding-left, tout comme on le fait pour la margin.

La propriété display

La propriété displau permet de modifier le comportement des éléments. Voici les valeurs possibles :

• inline : en ligne, comme le sont par défaut les élément img, a, span, b, i, em, strong, cite. Ce sont des balises associées au texte. Les propriétés margin-top et margin-bottom ne fonctionnent pas sur les élément inline. Mais les règlages de margin left et right et le padding fonctionnent.
• none : masque totalement l'élément et annule des propriétés telles que margin, padding, width,
• in-line block :combine les propriétés des deux : en ligne et block

Les boîtes flottantes

Grâce à la propriété float je peux faire flotter une div dans la page, à droite, à gauche. Cela permet de réaliser par exemple des habillages d'images.

Je peux positionner une boîte verte dans une boîte grise, en haut à droite.

      .boitegrise{ 
      	background-color:ghostwhite; 
      	padding: 10px; margin:10px; 
      	width:500px; 
      	height:200px;
      	color:#000; 
      	}

      .boiteVerte{ 
      background-color:#5AD775; 
      padding: 10px; 
      margin:10px; 
      width:150px;
      color:#000;
      float:right;
       }
    

La propriété position

Elle permet de placer les DIV dans la page de manière relative, absolue, fixée.

• Relative : permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.

Boîte en position relative texte texte texte texte texte texte texte texte texte texte texte texte.

        .boitejaune {
        background-color:gold; 
        padding: 5px; 
        color:#000;
        position:relative; 
        bottom:10px;
        }
      

• Absolute : permet de placer un contenu précisément dans un autre

        .boiteorange{ 
        background-color:orange; 
        padding: 5px; 
        color:#000;
        position:absolute;
        left:300px;
        }
      

• Static : c'est sa valeur par défaut, c'est le positonnement habituel de l'élément, en fonction de son ordre d'arrivée. C'est une valeur requise dans les header pour les smartphone.
• Fixed : L'élément est positionné par rapport aux bords de la page mais ne défile pas avec la page. voici un exemple

La propriété overflow

C'est la propriété overflow qui définit comment rogner le contenu, comment afficher les barres de défilement ou encore comment afficher le contenu sortant du cadre dans un élément de type bloc.

• overflow: visible; Le contenu n'est pas rogné
• overflow: hidden; Le contenu est rogné
• overflow: scroll; Le contenu est rogné et affiche des ascenseurs
• overflow: auto; On laisse l'agent utilisateur décider

Afin que la propriété overflow puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur définie grâce à height ou max-height ou avoir white-space avec la valeur nowrap.