AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Formation HTML/CSS

Aller à la page : Précédent  1, 2, 3, 4, 5  Suivant
Re: Formation HTML/CSS  posté le :
Coucou !

Alors, après avoir mis en page le fond et le contour de notre balise, voyons maintenant comment modifier sa hauteur et sa largeur !

Comme on s'en doute, on peut attribuer deux tailles à une balise :
-La largeur
-La hauteur


Afin de définir la largeur d'une balise, on utilisera width :
Code:
.name{
width: Npx; /** N désignant un nombre non nul de pixels **/
}

Et pour la hauteur avec height, c'est la même chose :
Code:
.name{
height: Npx; /** N désignant un nombre non nul de pixels **/
}

Imaginons maintenant qu'on veuille que notre balise fasse 50% de la largeur totale de la page (ou de la balise dans laquelle elle est comprise). On aura juste à remplacer Npx par 50%, comme ça :

Code:
.name{
width: 50%;
}

C'est pareil avec height Wink

Ca va, tout compris ?
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Tout compris Smile

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Coucou Smile

On doit avancer, désolé Popy Sad

Continuons avec une petite résolution de problème..
Si on veut attribuer une taille minimale à notre balise, c'est à dire une taille par défaut, qui peut changer si la balise doit s’agrandir, comment faire ?
Déjà, qu'entends-je par là ?
Prenons un paragraphe (<p>) par exemple, dans lequel nous mettrons du texte. On veut que ce paragraphe fasse minimum 50px de hauteur, mais, si notre texte a besoin de plus de 50px, le paragraphe se règle pour s'agrandir afin que le texte soit tout compris dans celui-ci.
Pour cela, on utilisera la propriété height, avec un petit préfixe : min qui signifie : minimum
Pour notre paragraphe, on a alors :
Code:
.name{
min-height: 50px;
}

C'est bien beau tout ça, mais si notre texte est un gros pavé, il est hors de question que notre paragraphe prenne toute la page !
Pour ce faire, on va utiliser height avec un autre préfixe : max
Code:
.name{
max-height: Npx; /** N désigne un nombre non nul de pixels **/
}

Ca fonctionne pareil avec width, on a min-width et max-width
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Ok, tout compris Smile Et tout révisé, aussi.

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Pas de soucis,

Ok aussi
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Bon, huer on a résolu un prolème grâce à min et max, mais maintenant... Quand y'en a plus, y'en a eencooore !
Ici, on en a un autre.

Si le texte qu'on met dans notre paragraphe doit prendre plus de place que la valeur maximale autorisée, qu'est-ce qui se passera ?
Ben... Il se passera ça : bug

Heureusement, il y a une solution à cela !
Les scrollbars !

J'en ai déjà parlé quelque fois précédemment dans le cours. C'est la barre de défilement, qui permet de descendre ou monter dans la page.
On peut en attribuer à des balises (de type block uniquement) !  
Voici le code css permettant de faire ça :
Code:
.name{
overflow: scroll;
}

Là, une scrollbar verticale et une scrollbar horizontale se mettront si besoin Wink

Néanmoins, encore et toujours, un problème survient !
Si on veut que la scrollbar n'apparaisse que verticalement, ou horizontalement, comment faire ?
Et bien, on utilisera overflow suivi du suffixe de la largeur ou de la hauteur. La largeur se définit par la lettre x et la hauteur par la lettre y (et la profondeur par la lettre z, mais là, on en n'a pas besoin)

Du coup, on aura, pour une scrollbar verticale, donc pour la hauteur, overflow-y :
Code:
.name{
overflow-y: scroll;
}

Et pour une scrollbar horizontale, soit pour la largeur, overflow-x :
Code:
.name{
overflow-x: scroll;
}

D'accodac ?
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Tout compris Smile

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
ok pour moi aussi !
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Parfait Smile

Bon, je m'excuse, cette partie ne contient pas trop de pratique en ce moment. Dans 2 cours, vous aurez un petit exo Wink.

Quoi qu'il en soit, on en a fini avec la mise en page des balises ! On va passer à tout ce qui est marges maintenant Wink

A l'intérieur d'une balise de type block (div, h1, p, etc.), il est possible de laisser un espace entre la bordure et le contenu de la balise. Il y aura donc une sorte de marge intérieure.
Cette marge intérieure s'applique en utilisant la propriété padding
Code:
.name{
padding: 15px; /** De chaque côté de la balise (droite, gauche, haut, bas), il y aura une marge de 15 pixels **/
}

Maintenant, si on veut laisser une marge, mais différente à chaque côté, c'est possible aussi !
Code:
.name{
padding-left: 2px; /** Marge de 2 pixels à gauche **/
padding-right: 10px; /** Marge de 10 pixels à droite**/
padding-top: 5px; /** Marge de 5 pixels en haut **/
padding-bottom: 7px; /** Marge de 7 pixels en bas **/

C'est tout bon ? Wink
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Tout bon pour moi !

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Ok pour moi aussi(:
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Coucou Smile
Désolé pour le retard j'ai des examens en ce moment Sad. Vivement les vacances !

Après les marges intérieures, les marges "extérieures". C'est à dire la distance qu'il y a entre deux balises Smile.
Si nous appliquons une marge extérieure à un bloc seul dans la page, la marge se placera en fonction de la page entière

Et pour ces marges, c'est la propriété margin que nous utiliserons !
Code:
.name{
margin: 15px; /** Les balises ayant pour class name seront décalées à droite, gauche, haut et bas de 15 pixels à partir des bords de la page ou des autres balises **/
}

Ce qui donne, sur une page simple :
Spoiler:
 

Maintenant, c'est comme avec padding, on peut personnaliser tout ça de chaque côté !
Code:
.name{
margin-top: 15px;
margin-bottom: 12px;
margin-left: 8px;
margin-right: 32px;
}

Afin de voir si vous avez compris, j'aimerais que vous réalisiez cela :
exo:
 
margin en rouge
padding en bleu

Courage Wink
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Nous allons donc continuer avec le placement des balises, autrement qu'avec les marges.

Il existe 4 petites propriétés bien pratiques : top, bottom, left, right.
Comment fonctionnent-elles ?

En gros, si on veut que notre balise se place à 20pixels du haut de notre page, on lui attribuera un top: 20px;

Maintenant, imaginons que nous voulions une balise à 50px du bord gauche et à 30px du bord droit.
Notre code ressemblera à :
Code:
.name{
left: 50px;
top: 30px;
}

Seulement, si on essaie, on verra que... ça ne fonctionne pas.
Pourquoi ?
Tout simplement car l'élément a une position non appropriée !

En fait, il faut dire au navigateur d'où les distances sont prises.
Par rapport aux bords du navigateurs ? Par rapport à d'autres balises de la page ?

Avant de continuer avec nos left, top, bottom et right, attardons nous alors sur les positions css.
Il existe 4 positions css :
statique : c'est la position initiale quand nous n'en définissons pas pour un élément. Un élément positionné de manière statique est toujours positionné en fonction du flux normal de la page.
Les éléments positionnés de manière statique ne sont pas affectés par les propriétés left, top, bottom et right.

fixe : Un élément de position fixe est positionné par rapport à la fenêtre du navigateur. Il ne bougera pas, même si la fenêtre défile.

relative : Un élément de position relative, se positionne par rapport à l'élément qui le précède. Un élément de position relative peut chevaucher d'autres éléments.

absolue : Un élément de position absolue est positionné par rapport au premier élément parent qui a une position autre que statique. Si aucun élément n'est trouvé, le bloc conteneur est <html>
petite précision pour la position absolute.
En fait, l'élément en position absolute se placera en fonction des bords du navigateur s'il n'a pas d'élément parent référent, c'est à dire, un élément en position relative dans lequel il est contenu !

Ces propriétés se mettent en code de la sorte :
Code:
.name{
position: position_voulue; /** Donc fixed, relative ou absolute **/
}
/** Par exemple **/
.foo{
position: absolute;
}

Si on a bien tout compris, cela explique pourquoi ça ne fonctionnait pas notre code !
Notre élément était de position statique, et donc, ne prenait pas en compte notre code.

Pour que notre code soit pris en charge, il faut lui attribuer une autre position. Dans notre cas, on veut que notre élément se place par rapport aux bords de la page du navigateur. Donc on peut prendre soit une position fixe, soit une position absolue. Le résultat sera le même, la seule chose qui changera sera si la page défile : avec l'élément fixe, il ne bougera pas, alors qu'avec l'élément absolu, si Wink.
On va donc prendre ici, fixe, sans trop d'importance Wink.

Ce qui nous donne alors :
Code:
.name{
position: fixed;
left: 50px;
top: 30px;
}
Le résultat est :
Spoiler:
 

Avant de vous laisser tranquille, posons un problème :p
On a la div A contenant une image en fond et du texte par dessus, et la div B, qu'on veut placer par dessus la div A, car elle contient une autre image avec faible opacité qu'on met par dessus le texte.
Dans ce cas, on mettra notre div B en position relative et on la placera par dessus la div A grâce à top bottom left & top.
Afin d'être certain qu'elle se place bien par dessus, on pourra utiliser la propriété z-index.
En gros, z-index permet de dire quel élément va par dessus un autre. L'élément qui a le plus grand z-index se place par dessus Wink
Donc pour notre div B, on aura :
Code:
div.divb{
/**Position et placement de la div**/
z-index: 999;
}

999 étant la plus grande valeur de z-index possible Wink

On aurait très bien pu faire aussi :
Code:
div.diva{
z-index: 1;
}
div.divb{
z-index: 2;
}

Voilà Smile
Tout simple Wink

C'est bon, tout compris ? Smile
Avez-vous besoin d'un exemple pour une position en particulier ? Ou pour toutes ?
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
De mon côté, j'ai tout compris Smile

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Voici quelques trucs et astuces avant de passer à autre chose Wink

Si on veut centrer un élément de position statique dans notre page, on peut faire :
Code:
.name{
margin: auto;
}
Néanmoins, il ne faut pas oublier d'indiquer la hauteur et la largeur de notre élément si on utilise margin: auto ! Car elle est calculée en fonction de la taille de notre élément Wink

Si on veut s'assurer qu'il n'y aura aucune marge extérieure ni intérieure, on peut :
Code:
.name{
margin: 0;
padding: 0;
}

Si on attribue une position relative à un élément, et qu'on veut qu'il soit plus à gauche que sa position initiale par exemple, on utilisera left avec une valeur négative soit :
Code:
.name{
position: relative;
left: -10px;
}

Il est possible de définir la valeur avec des %. C'est grâce à ça qu'on va centrer un élément qui n'est pas de position statique.
Pour centrer un élément non statique dans une page, on mettra :
Code:
.name{
position: absolute; /** Position non statique **/
left: 50%;
top: 50%;
}
/** OU **/
.foo{
position: absolute;
right: 50%;
bottom: 50%;
}

Mais attention ! Cela ne centre que l'élément s'il fait 1pixel ! Puisque que en fait, cela fait ça :
image:
 
L'élément se place à l'intersection des deux valeurs. Du coup si on l'agrandit, cela donnera ça :
image suite:
 
Il faudra donc jouer sur les valeurs :
mettre left à 45% par exemple au lieu de 50 etc.

Voili voilou, c'est fini pour les trucs et astuces !

J'aimerais donc maintenant que tu me donnes le code qui permettrait de fixer un élément en bas de la page. Donc un footer.

Tu sais, quelque chose comme ça :
footer:
 

Bonne chance Wink Si tu as des questions, je suis là !
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Bon, et bien on touche à la fin de la partie CSS !
Alors, on va donc finir notre partie, avec une dernière propriété :
float

Imaginons que nous avons une image et une div. Nous voulons mettre la div à côté de l'image.
Impossible !
Oui, puisque div est une balise de type block, elle se mettra forcément en dessous.
La propriété float est donc là pour pallier ce problème.

Si nous voulons placer notre div à droite de l'image, on mettra :
Code:
<style>#name{
float: right;
}</style>
<body>
<img src="image.png" alt="" /><div id="name">Lorem ipsum...</div>
</body>

Exemple 1:
 

Et si on veut la placer à gauche :
Code:
<style>#name{
float: left;
}</style>
<body>
<div id="name">Lorem ipsum...</div><img src="image.png" alt="" />
</body>

Exemple 2:
 


C'est tout bon ?

Vu que c'est la dernière "leçon" sur le CSS, j'aimerais que tu me dises si tu as un quelconque remarque/question/doute sur tout ce qu'on a vu, pour qu'on le revoit là, avant l'exercice Wink.
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Pas de problème avec le float, on en avait déjà discuté sur Skype ! Smile
Comme ça, je vois rien. On verra avec l'exercice, je pense Smile

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Coucou Smile

Alors l'exo final !
On va me faire pas à pas !

Voici la création à réaliser :
http://i84.servimg.com/u/f84/19/33/14/37/captur10.jpg

Cette création est la page d'accueil d'un site. Assez complexe, je l'accorde :p.
C'est pour ça qu'on va y aller pas à pas !

On va imaginer que c'est une commande d'un membre. Ça, c'est la maquette que le membre fourni.
Comment procéder ?
Déjà, il faut imaginer les ressources nécessaires.
Qu'est-ce qu'il y a ?
Quelles balises vais-je utiliser ?
En CSS, quelles propriétés je vais utiliser ?
Le site est-il responsive webdesign (s'adapte-t-il aux tablettes, aux téléphones...) ?
Y'a-t-il des images que je dois demander au membre ?
Des dimensions ? Des typographies particulières ? Des codes couleurs ?

A chaque fois que tu dois répondre à une commande, c'est ainsi qu'il faut procéder.
Du coup, je te laisse analyser la "maquette" du site et me dire ce que tu en penses. N'hésite pas à me poser les questions que tu souhaites, je suis aussi bien le formateur que le commandeur Wink.
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
D'accord !

Alors, je vais commencer par te demander l'image que tu utilises pour le fond de ton site ! Et j'aurais besoin du nom des polices que tu utilises aussi. Pour le reste, on verra plus tard Razz

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
With pleasure !

L'image de fond est la suivante : http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg
La police utilisée est "Exo".
Elle est disponible ici -> http://fonts.googleapis.com/css?family=Exo
Pour l'utiliser dans tes scripts, tu dois ajouter :
Entre les balises head :
Code:
<link href="http://fonts.googleapis.com/css?family=Exo" rel="stylesheet" type="text/css">
Et puis, si tu veux l'utiliser dans ton CSS :
Code:
#name{
font-family: 'Exo', sans-serif;
}
Vu qu'Exo est une police personnalisée, on doit la mettre entre guillemets (simples ou doubles), puis on doit indiquer une police de "secours" qui n'est pas personnalisée au cas où la police ne soit pas fonctionnelle. Ici, j'ai choisi la police sans-serif (qui elle, n'est aps à mettre entre guillemets).

Voilà !
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Danke schön ! Very Happy

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Coucou Smile

On va donc essayer d'améliorer tout ça !
Pour rappel voici ton code :
Code:
  <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta charset="utf-8" />
      <title>Exercice final CSS</title>
      <style type="text/css">
    #barre_navigation {
      border:1px solid #0E0E0E;
      background-color:#0E0E0E;
      text-align : center;
      color: white;
    }
      .police{
      font-family: 'Exo', sans-serif;
      }
    .bouton_page {
      border:1px solid #452727;
      background-color:#452727;
    }
    #fond_page {
      background-image: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg');
      background-size:100%;
      background-repeat: no-repeat;
    }
    .titre_principal {
      border: 0px solid black;
      max-width:350px;
      height: 40px;
      background-color: rgba(16, 16, 16, 0.5);
      color: white;
      text-align: center;
      right:50%;
      font-size:12px;
      margin-left: 37%;
      margin-top: 10px;
    }
    #cadre1 {
      border: 2px solid white;
      height: 200px;
      width: 300px;
      margin-left: 80px;
      margin-top : 130px;
      background-color: rgba(16, 16, 16, 0.5);
    }
    #cadre2 {
      float: right;
      border: 2px solid white;
      height: 200px;
      width: 300px;
      margin-right: 80px;
      margin-top : 200px;
      background-color: rgba(16, 16, 16, 0.5);
      display:inline ;
    }
    .titre2 {
      border: 1px solid #A6071B;
      background-color: #A6071B;
      color: white;
      text-align: center;
      font-variant: small-caps;
      width: 250px;
      margin-left:25px;
    }
    .paragraphe {
      color:white;
      font-size:12px;
      text-align: justify;
      border-left: 1px dashed white;
      border-right: 1px dashed white;
      margin-left: 15px;
      margin-right: 15px;
    }
    #cadre 3 {
      border: 0px solid black;
      background-color: rgba(255, 255, 255, 0.5);
      height: 150px;
      width: 90%;
    }
    #titre2b {
      border: 1px solid #A6071B;
      background-color: #A6071B;
      color: white;
      text-align: center;
      font-variant: small-caps;
      width: 250px;
      margin-left:40%;
    }
    #footer {
    color: white;
    font-size: 10px;
    }
      </style>
    <link href="http://fonts.googleapis.com/css?family=Exo" rel="stylesheet" type="text/css">
    </head>
    <body id="fond_page">
      <nav id="barre_navigation" class="police">
        <a href="page1.html" class="bouton_page">Page 1</a>
        <a href="page2.html" class="bouton_page">Page 2</a>
        <a href="page3.html" class="bouton_page">Page 3</a>
      </nav>
      <section class="police">
        <h1 class="titre_principal">Bienvenue sur mon <strong>super site</strong> super trop génial</h1>
        <h1 class="titre_principal">Il parle de plein de choses intéressantes comme le chocolat</h1>
        <article id="cadre1">
            <h2 class="titre2">mes connaissances</h2>
            <p class="paragraphe">
            Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
            </p>
        </article>
        <article id="cadre2">
            <h2 class="titre2">life is beautiful</h2>
            <p class="paragraphe">
            Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
            </p>
            <p>Je ne suis qu'un test</p>
        </article>
        <article id="cadre3">
            <h2 id="titre2b">mon pseudo</h2>
            <p>I'm the best</p>
            <p>My website is the best</p>
        </article>
      </section>
      <footer id="footer" class="police">Super création - By Pseudo - </footer>
    </body>
    </html>

Alors, on va faire comme dans l'autre formation : faire de haut en bas Wink.
On va donc commencer par la balise body{}.
Déjà, une bonne habitude à prendre est de s'assurer que la balise body et que la balise html ne font pas de marges automatiques.
Du coup, dans chacun de nos codes, on va faire :
Code:
body, html{
   margin: 0;
   padding: 0;
}
Tu comprendras très vite ce code dans la suite de la formation ou dans l'autre formation Wink.
Ensuite, notre body que tu as "appelé" fond_page a ce CSS d'après toi :
Code:
#fond_page {
      background-image: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg');
      background-size:100%;
      background-repeat: no-repeat;
    }
Alors, ça pourrait marcher Very Happy.
D'ailleurs, ça marche ! Mais pas sur tous les navigateurs !
Et petit élément que j'ai oublié de préciser : l'image s'adapte à la taille de l'écran Wink.
Du coup, on va mettre l'image de fond, la centrer, ne pas lui mettre de marge et la "no-repeater" :p (ce que tu as fait).
Il nous suffit donc de rajouter :
Code:
background-image: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg') center 0 no-repeat;
Et d'enlever background-repeat: no-repeat;
On gagne une ligne comme ça Wink.
Enfin, l'image de fond s'adapte à la taille de l'écran du coup on ajoute ça :
Code:
-webkit-background-size: cover; /* Old Chrome & Safari*/
    background-size: cover; /* Standard version */
Tu ne connaissais pas cette propriété, et maintenant tu al connais :p.
Après il nous suffit donc d'enlever ton background)size et voilà !
Enfin, il faut enlever le "-image" de "background-image" car sinon ça bug si on met tout sur une ligne :$
Le code est donc :
Code:
  #fond_page {
      background: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg') center 0 no-repeat;
      -webkit-background-size: cover; /* Old Chrome & Safari*/
      background-size: cover; /* Standard version */
    }
Tu peux donc modifier ton code et essayer de modifier la taille de ta page web, tu verras que l'image prend la taille Wink.
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Ohh ! D'accord. Ça donne déjà mieux, et avec ça, je m'y serais pas pris de la même manière pour placer les différents éléments Razz

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Coucou Smile

Désolé du retard :$.
Du coup tu veux bien retoucher ton code avec ce que je t'ai donné et le mettre ici ? (comme ça on pourra avancer plus vite si à chaque fois tu remets ton code Wink).
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Oui, bien sûr ! Voici le code !

Code:

    <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta charset="utf-8" />
      <title>Exercice final CSS</title>
      <style type="text/css">
     body, html{
      margin: 0;
      padding: 0;
      }
     #barre_navigation {
      border:1px solid #0E0E0E;
      background-color:#0E0E0E;
      text-align : center;
      color: white;
     }
      .police{
      font-family: 'Exo', sans-serif;
      }
     .bouton_page {
      border:1px solid #452727;
      background-color:#452727;
     }
     #fond_page {
      background: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg') center 0 no-repeat;
      -webkit-background-size: cover; /* Old Chrome & Safari*/
      background-size: cover; /* Standard version */
     }
     .titre_principal {
      border: 0px solid black;
      max-width:350px;
      height: 40px;
      background-color: rgba(16, 16, 16, 0.5);
      color: white;
      text-align: center;
      right:50%;
      font-size:12px;
      margin-left: 37%;
      margin-top: 10px;
     }
     #cadre1 {
      border: 2px solid white;
      height: 200px;
      width: 300px;
      margin-left: 80px;
      margin-top : 130px;
      background-color: rgba(16, 16, 16, 0.5);
     }
     #cadre2 {
      float: right;
      border: 2px solid white;
      height: 200px;
      width: 300px;
      margin-right: 80px;
      margin-top : 200px;
      background-color: rgba(16, 16, 16, 0.5);
      display:inline ;
     }
     .titre2 {
      border: 1px solid #A6071B;
      background-color: #A6071B;
      color: white;
      text-align: center;
      font-variant: small-caps;
      width: 250px;
      margin-left:25px;
     }
     .paragraphe {
      color:white;
      font-size:12px;
      text-align: justify;
      border-left: 1px dashed white;
      border-right: 1px dashed white;
      margin-left: 15px;
      margin-right: 15px;
     }
     #cadre 3 {
      border: 0px solid black;
      background-color: rgba(255, 255, 255, 0.5);
      height: 150px;
      width: 90%;
     }
     #titre2b {
      border: 1px solid #A6071B;
      background-color: #A6071B;
      color: white;
      text-align: center;
      font-variant: small-caps;
      width: 250px;
      margin-left:40%;
     }
     #footer {
     color: white;
     font-size: 10px;
     }
      </style>
     <link href="http://fonts.googleapis.com/css?family=Exo" rel="stylesheet" type="text/css">
    </head>
    <body id="fond_page">
      <nav id="barre_navigation" class="police">
         <a href="page1.html" class="bouton_page">Page 1</a>
         <a href="page2.html" class="bouton_page">Page 2</a>
         <a href="page3.html" class="bouton_page">Page 3</a>
      </nav>
      <section class="police">
         <h1 class="titre_principal">Bienvenue sur mon <strong>super site</strong> super trop génial</h1>
         <h1 class="titre_principal">Il parle de plein de choses intéressantes comme le chocolat</h1>
         <article id="cadre1">
            <h2 class="titre2">mes connaissances</h2>
            <p class="paragraphe">
            Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
            </p>
         </article>
         <article id="cadre2">
            <h2 class="titre2">life is beautiful</h2>
            <p class="paragraphe">
            Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
            </p>
            <p>Je ne suis qu'un test</p>
         </article>
         <article id="cadre3">
            <h2 id="titre2b">mon pseudo</h2>
            <p>I'm the best</p>
            <p>My website is the best</p>
         </article>
      </section>
      <footer id="footer" class="police">Super création - By Pseudo - </footer>
    </body>
    </html>

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Page 4 sur 5Aller à la page : Précédent  1, 2, 3, 4, 5  Suivant

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: Corbeille :: Corbeille du forum :: Formations-
Sauter vers: