Comportements des div

L’élément HTML <div> (qui signifie division du document) est un conteneur générique qui permet d’organiser le contenu sans représenter rien de particulier.
La balise <div> définit une division ou une section, appelé aussi calque, dans un document HTML. La balise <div> est utilisée pour regrouper des éléments sous forme de block et ainsi pouvoir les formater en CSS.

La meilleur chose à faire pour comprendre les div est d’expérimenter et de voir leurs différents comportements.

  1. à partir de la page index.html

  2. coder dans le HTML ( rappel on code uniquement dans le <body>)

<!DOCTYPE html>
<html>
     <head>
        <title> le titre de ma page </title>
        <meta name="description" content="Portfolio en design">
        <meta name="keywords" content="design, création, toulouse">
        <meta charset="utf-8" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />

     </head>
     <body>

        <div>
          <h1> les div </h1>
        </div>
        <div>
          <a href="#"> explication </a>
          <a href="#"> comportements </a>
          <a href="#"> attributs </a>
          <a href="#"> styles </a>
        </div>
        <div>

          <p>L'élément HTML  (qui signifie division du document) est un conteneur générique qui permet d'organiser le contenu sans représenter rien de particulier.</p>
          <p>La balise  définit une division ou une section, appelé aussi calque, dans un document HTML. La balise  est utilisée pour regrouper des éléments sous forme de block et ainsi pouvoir les formater en CSS.</p>

        </div>
        <div>
            <a href="#"> contact </a>
            <a href="#"> téléphone </a>
            <a href="#"> Instagramme </a>
        </div>

    </body>
</html>

  1. coder dans le CSS

ajoutons une bordure qui montera visuellement la limite et la taille des div. Nous pouvons donner une bordure d’une larguer de 1px,avec un trait solide et de couleur noir .
Pour les bordures, on peut aussi spécifier d’autres formes de bordure avec la fonction CSS border-style:

border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;


div {
border: 1px solid #000;
}

Par défaut le comportement des div est le suivant :

  1. elles prennent 100% de la largeur de la fenêtre du navigateur.
  2. elles prennent en hauteur 100% de la taille de leurs contenus.
  3. si vous déclarez une div en 1er dans le code HTML, elle sera en haut de la page web, en 2eme dans le code HTML, ele sera en dessous de la 1ère div, ect… On appelle cela le “flux HTML”.

Cibler une div en particulier

Nous voyons qu’en ajoutant une bordure, toutes nos div sont affectées par le CSS

Comment peut-on cibler une div en particulier ?

En utilisant l’attribut id="nom_de_div"

Pour cela, coder ainsi:

<!DOCTYPE html>
<html>
     <head>
        <title> le titre de ma page </title>
        <meta name="description" content="Portfolio en design">
        <meta name="keywords" content="design, création, toulouse">
        <meta charset="utf-8" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />

     </head>
     <body>

        <div id="header">
          <h1> les div </h1>
        </div>
        <div id="menu">
          <a href="#"> explication </a>
          <a href="#"> comportements </a>
          <a href="#"> attributs </a>
          <a href="#"> styles </a>
        </div>
        <div id="content">
          <p>L'élément HTML  (qui signifie division du document) est un conteneur générique qui permet d'organiser le contenu sans représenter rien de particulier.</p>
          <p>La balise  définit une division ou une section, appelé aussi calque, dans un document HTML. La balise  est utilisée pour regrouper des éléments sous forme de block et ainsi pouvoir les formater en CSS.</p>
        </div>
        <div id="footer">
            <a href="#"> contact </a>
            <a href="#"> téléphone </a>
            <a href="#"> Instagramme </a>
        </div>

    </body>
</html>

CSS

div {
border: 1px solid #000;
}

#header{
  background-color:#BA5240;
}

#menu {
  background-color: #E2A7C0;
}

#content{
  background-color: #CF6E8B;
}

#footer{
  background-color: #BF4071;
}

background-color: = couleur de fond de la div.

PROPRIÉTÉS CSS : height & width

Nous allons donner des tailles à chaque div

css

div {
border: 1px solid #000;
}

#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
}

#content{
  background-color: #CF6E8B;
  height:300px;
  width:800px;
}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}

Par défaut le comprtements des div est :

  1. a la fin de la balise fermante </div> il y a un retour à la ligne
  2. par défaut les balises sont de types block

block & inline

Il existe deux grands groupes principaux de balises : les balises de rendu CSS block et les balises de rendu CSS “en-ligne”inline. Ces valeurs de rendu visuel coïncident généralement par défaut avec le groupe d’appartenance HTML.

La différence fondamentale entre ces deux structures d’éléments est aisément compréhensible.

block

<div> : balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page.
<h1> ... <h6> : encadre un titre ou un sous-titre.
<p> : paragraphe.
ul>, <ol>, <dl> : listes (non ordonnée, ordonnée ou avec définition).
<li>, <dt>, <dd> : élément de liste, définition, et titre de définition.
<table> : tableau.
<blockquote> : paragraphe indenté (décalé à droite) normalement utilisé pour présenter une citation.
<pre> : block de code préformaté.

Les div sont de type block vont donc avoir tous ces comportements:

inline

Les éléments “en-ligne” sont prévus pour rester dans le texte pour l’enrichir (lien hypertexte, emphase, renforcement, etc.):

Et voici quelques éléments en-ligne que vous avez sans doute déjà utilisés :

<a> : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel on veut diriger un lien.
<strong> : utilisé pour marquer l'importance particulière d'une portion de texte. Tous les navigateurs actuels afficheront cette portion en gras. NOTE : l'ancienne balise <b> (bold) est obsolète et ne doit plus être utilisée.
<i> (italic) est obsolète et ne doit plus être utilisée.
<img> : image, permet de placer une image au milieu du flux de texte.
<br> : saut de ligne. Voilà un cas tout à fait particulier d'élément en-ligne, qui provoque un saut de ligne. Malgré cette particularité, <br> n'est définitivement pas un block et doit être classé comme élément en-ligne.
<abbr> : signale une abbréviation (placez votre curseur dessus pour voir le fonctionnement). Note : Internet Explorer ne gère pas cette balise dans ses versions antérieures à la version 7.

PROPRIÉTÉS CSS : display

La propriété display permet d’indiquer explicitement le mode de rendu d’un élément HTML. Les valeurs les plus connues sont none, block et inline. Pourtant il y en a beaucoup d’autres et en particulier la valeur inline-block… Mais, attendons un peu.

Les caractéristiques d’un élément de display:none;

Vous effacez l’élément ciblé. Il est considéré comme absent.

Les caractéristiques d’un élément de display:block;

Les caractéristiques d’un élément de type display:inline;

display:inline-block, un mélange des deux !

Avec cette valeur de la propriété display, vous allez avoir des éléments qui vont se comporter à la fois comme s’ils étaient de type block et de type inline. Concrètement, ça va donner les caractéristiques suivantes :

Cela va avoir quelques conséquences :

CSS :

#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
  display: inline-block;
}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
  display: inline-block;
  top:200px;

}

#content{
  background-color: #CF6E8B;
  height:300px;
  width:800px;
}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}

Malheur de malheur!

Rien ne se passe comme prévu ! Il y a un décallage entre la div "header" et la div "menu" qui fait n’importe quoi !

Attention ! Vous voici en CSS, c’est à dire que chaque div réagit en fonction des autres div ( et nous allons voir aussi en fonction de leur contenu )… C’est le plus dur, c’est à dire anticiper et connaitre le comportement des div pour pouvoir corriger et parvenir à ce que vous souhaitez … :-)

En l’occurence, que se passe-t-il ?

En créant un <h1> les div </h1> dans <div id="header"></div> vous créez aussi une line-height qui est liée à la nature du titre 1( revoyez le cours précédent si cela ne vous dit rien …). Vous avez ce que l’on nomme en CSS une ligne de base. Ceci se vérifie par la suite avec les élèment de la div id="menu" qui sont positionnés sur cette ligne de base ( le texte “les div” et " explication comportement "… sont tous alignés sur une ligne )

Vous pouvez influer sur le positionnement de l’élément sur la ligne de base typographique en utilisant la propriété
vertical-align:top;

CSS

#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
  display: inline-block;
  vertical-align:top;

}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
  display: inline-block;
  top:200px;
  vertical-align:top;

}

#content{
  background-color: #CF6E8B;
  height:300px;
  width:800px;
}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}

Le cas «white-space»

Comme tous les éléments de type inline ou de contenu textuel, les objets munis de la déclaration display: inline-block respectent la règle des caractères blancs (whitespace), c’est-à-dire que n’importe quel caractère HTML espaçant deux éléments va immanquablement apparaître entre leurs deux boîtes avec une largeur de 4px. Chaque caractère «espace», «tabulation», «nouvelle ligne», «retour chariot» ou «nouvelle page» peut tenir lieu de white-space et séparer les blocks visuellement de 4px.

PROPRIÉTÉS CSS : margin & padding

exemple de css:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

on l’écrit aussi comme cela:
dans le sens des aiguilles d’une montre en commençant: en haut, droite, bas, gauche.

body { margin: 100px 40px 10px 70px;  }

CSS

body {
    margin: 100px 40px 10px 70px;

}

#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
  display: inline-block;
  vertical-align:top;

}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
  display: inline-block;
  top:200px;
  vertical-align:top;

}

#content{
  background-color: #CF6E8B;
  height:300px;
  width:800px;
}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}

Maintenant, on voudrait corriger les white-space entre les div “header”, “menu” et “content”.
Pour cela nous utilisont les margin mais avec des margin négatifs :-)

CSS

body {
    margin: 100px 40px 10px 70px;

}


#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
  display: inline-block;
  vertical-align:top;
  padding:0px;
  margin: 0 -4px -16px 0;

}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
  display: inline-block;
  top:200px;
  vertical-align:top;
  padding:0px;
  margin: 0 0 -16px 0;

}

#content{
  background-color: #CF6E8B;
  height:300px;
  width:800px;
}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}

EXERCICE

Essayez d’obtenir le résultat suivant:

CSS

body {
  margin: 100px 40px 10px 70px;
}


#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
  display: inline-block;
  vertical-align:top;
  padding:0px;
  margin: 0 -4px -16px 0;

}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
  display: inline-block;
  top:200px;
  vertical-align:top;
  padding:0px;
  margin: 0 0 -16px 0;

}

#content{
  background-color: #CF6E8B;
  height:300px;
  width:800px;
}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}


p{
width:30%;
vertical-align:top;
display: inline-block;
padding:100px 50px 0 100px;


}

div et contenu

Nous allons effectuer un changement de quantité de contenu pour identifier les comportement des div. Nous allons ajouter beaucoup de texte dans <p></p> et ajouter une image.

HTML

<!DOCTYPE html>
<html>

<head>
  <title> le titre de ma page </title>
  <meta name="description" content="Portfolio en design">
  <meta name="keywords" content="design, création, toulouse">
  <meta charset="utf-8" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <div id="header">
    <h1> les div </h1>
  </div>
  <div id="menu">
    <a href="#"> explication </a>
    <a href="#"> comportements </a>
    <a href="#"> attributs </a>
    <a href="#"> styles </a>
  </div>
  <div id="content">
    <img src="images/image1.jpg" />
    <p>

      Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere
      omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae. Ex
      turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi
      sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes. Paphius quin etiam et Cornelius
      senatores, ambo venenorum artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos vellent,
      adiecta religione firmarat, nullum igni vel ferro se puniri iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem aruspicem dedit, in negotio eius nullo sacramento constrictus. Advenit post multos Scudilo Scutariorum tribunus
      velamento subagrestis ingenii persuasionis opifex callidus. qui eum adulabili sermone seriis admixto solus omnium proficisci pellexit vultu adsimulato saepius replicando quod flagrantibus votis eum videre frater cuperet patruelis, siquid per inprudentiam
      gestum est remissurus ut mitis et clemens, participemque eum suae maiestatis adscisceret, futurum laborum quoque socium, quos Arctoae provinciae diu fessae poscebant. Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii
      ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua,
      quas subinde dimittebat ad principem. Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec
      contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus,
      sed victoriis lustratae sunt. Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur
      et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset,
      conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur. Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu
      nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum
      vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae. Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim
      commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti. Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium
      ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.
    </p>
  </div>
  <div id="footer">
    <a href="#"> contact </a>
    <a href="#"> téléphone </a>
    <a href="#"> Instagramme </a>
  </div>

</body>

</html>

CSS



body {
  margin: 100px 40px 10px 70px;
}



#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
  display: inline-block;
  vertical-align:top;
  padding:0px;
  margin: 0 -4px -16px 0;

}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
  display: inline-block;
  top:200px;
  vertical-align:top;
  padding:0px;
  margin: 0 0 -16px 0;

}

#content{
  background-color: #CF6E8B;
  height:300px;
  width:800px;
}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}

AHhhhhhhhhhhhhhhhhhhhhh!!!
L’image et le paragraphe sortent de leur conteneur et passent au dessus de tout. Tout le design est cassé !

Il y a plusieurs solutions simples qui existent.

Vérifions une propriété des div que nous avons énoncée et qui s’applique ici:

elles prennent en hauteur 100% de la taille de leurs contenus.

Pourquoi, cette propriété ne s’applique pas ?

Parce que nous lui avons donné une taille fixe de height:300px; -> supprimons le et voyons le résultat.

CSS


body {
  margin: 100px 40px 10px 70px;
}



#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
  display: inline-block;
  vertical-align:top;
  padding:0px;
  margin: 0 -4px -16px 0;

}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
  display: inline-block;
  top:200px;
  vertical-align:top;
  padding:0px;
  margin: 0 0 -16px 0;

}

#content{
  background-color: #CF6E8B;
  width:800px;
}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}

C’est déjà beaucoup mieux ! Le site n’est plus cassé !

Attention les div réagissent aussi en fonction de leur contenu :-)

PROPRIÉTÉS CSS : overflow

overflow: hidden;

API

body {
  margin: 100px 40px 10px 70px;
}



#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
  display: inline-block;
  vertical-align:top;
  padding:0px;
  margin: 0 -4px -16px 0;

}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
  display: inline-block;
  top:200px;
  vertical-align:top;
  padding:0px;
  margin: 0 0 -16px 0;

}

#content{
  background-color: #CF6E8B;
  width:800px;
  overflow: hidden;

}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}

div conteneur ?

Nous avons dit comme quoi la div était un conteneur. Mais nous avons vu qu’elle pouvait être débordée par le flux HTML. Maintenant, nous allons jouer avec ses propriétés de conteneur. Nous allons donner à notre image une dimension. Par défaut, width et heigh sont exactement définis en pixels. Nous allons définir maintenant une dimension relative, c’est à dire en %. En disant, tu fais: width:100%; le CSS entend:
" tu vas occuper 100% de ton CONTENEUR"
donc

<img> à 100% de <div id="content"></div> = 800px

CSS

body {
  margin: 100px 40px 10px 70px;
}



#header{
  background-color:#BA5240;
  height:100px;
  width:300px;
  display: inline-block;
  vertical-align:top;
  padding:0px;
  margin: 0 -4px -16px 0;

}

#menu {
  background-color: #E2A7C0;
  height:100px;
  width:500px;
  display: inline-block;
  top:200px;
  vertical-align:top;
  padding:0px;
  margin: 0 0 -16px 0;

}

#content{
  background-color: #CF6E8B;
  width:800px;
  overflow: hidden;

}

#footer{
  background-color: #BF4071;
  height:50px;
  width:800px;
}

img{
  width:100%;
}

Ceci nous permet de faire la transition avec le prochain chapitre:
L’imbrication CSS