[CSS] Header, Container, Footer

Reikon
Les bases HTML/CSS

Bonjour,
Je suis débutant dans le monde de la programmation et développement et donc j'aurais besoin de votre aide !

Mon problème est le suivant ...

je n'arrive pas a placer mon "séparateur" au dessous du header comme ceci

CODE HTML

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="utf-8"/>
</head>
<body>
    <header class="header">
        <nav class="menu">
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
        </nav>
    </header>

    <div class="flat">

    </div>

    <div class="container">
        du contenu ...
    </div>

    <div class="separator"></div>
    <footer class="footer">
        <h1>Copyright</h1>
    </footer>
</body>
</html>

CODE CSS 

html, body{
    background-color: #F6F6F6;
    font-family: Verdana, sans-serif;
    font-size: 16px;
    height: 100%;
    margin: 0;
    padding: 0;
}
/* HEADER */
.header{
    position: fixed;
    left: 0;
    right: 0;
    height: 80px;
    line-height: 80px;
    background-color: #222222;
}
.menu{
    padding: 0 10px;
    padding-left: 600px;
}
.menu a{
    font-weight: bold;
    text-decoration: ;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 10px;
    color: #FFF;
    transition: all 0.1s ease 0.2s;
}
.menu a:hover{
    color: #62bcda;
    transition: all 0.3s ease 0.2s;
}
.separator{
    margin-top: 80px;
    height: 10px;
    background-color: red;
}
.flat{
    height: 400px;
    background-color: #62bcda;
}
/* CONTAINER */
.container{
    margin: 50px;
    height: 950px;
    clear: both;
}
/* FOOTER */
.footer{
    float: left;
    width: 100%;
    line-height: 60px;
    bottom: 0;
    color: #FFF;
    height: 120px;
    text-align: center;
    background-color: #222222;
}

lien vers le site

je sais pas si mon code est correcte et si il respecte le HTML5 CSS3 ..

j'aurais une question : comment faire pour développer un site compatible sur avec toutes les résolutions ? ( je parles pas de smartphone etc que les écrans PC )

car je suis avec un écran 22 pouces et je pense que tous les petit trucs que je crée sont compatible qu'avec ma résolution

Merci d'avance pour votre aide :)

9 réponses

Reikon
Auteur
Réponse acceptée

Bonjour,

Merci pour ces précieux détails :)

J'ai refait le code de zéro :

CODE HTML

<!DOCTYPE html>
<html>
<head>
    <title>Titre</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="utf-8">
</head>
<body>
    <!-- HEADER -->
    <header class="header">
        <a class="logo"><img src="http://www.grafikart.fr/img/logo.png"></a>
        <nav class="menu">
            <a href="#">Menu</a>
            <a href="#">Menu</a>
            <a href="#">Menu</a>
            <a href="#">Menu</a>
        </nav>
    </header>
    <div class="separator"></div>
    <div class="flat"></div>
    <!-- CONTAINER -->
    <div class="container">

    </div>
    <!-- FOOTER -->
    <div class="separator"></div>
    <footer class="footer">
        <div class="copyright">
            <h1>Copyright © 2014 .... - Tous droits réservés.</h1>
        </div>
    </footer>
</body>
</html>

CODE CSS 

html, body{
    background-color: #F6F6F6;
    font-family: Verdana, sans-serif;
    font-size: 16px;
    height: 100%;
    margin: 0;
    padding: 0;
}
/* HEADER */
.header{
    position: fixed;
    left: 0;
    right: 0;
    height: 80px;
    line-height: 80px;
    background-color: #222222;
}
.menu{
    padding: 0 10px;
    padding-left: 800px;
}

.menu a{
    font-weight: bold;
    text-decoration: ;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 10px;
    color: #FFF;
    transition: all 0.1s ease 0.2s;
}

.menu a:hover{
    color: #62bcda;
    transition: all 0.3s ease 0.2s;
}
img{
    float: left;
    position: absolute;
    top: 20px;
    left: 20px;
}
/* CONTAINER */
.container{
    height: 950px;
}
/* FOOTER */
.footer{
    float:left;
    width:100%;
    line-height: 60px;
    bottom:0;
    height:120px;
    background-color:#222222;
}
.copyright{
    text-align:center;
    color:#FFF;
}

/* ADDITIONAL CLASSES */
.separator{
    height: 10px;
    background-color: red;
}
.flat{
    height: 400px;
    background-color: #62bcda;
}

Et j'ai uploader de nouveau le tout ici http://fragonline.tk/htmlcss/

header 80 px ( hauteur )qui reste fixe
séparateur
container 950px ( hauteur )
séparateur
footer

je comprends rien le séparateur ne s'affiche pas mais il se met au dessous du header

et quand je met un truc dans le container aussi il se met au dessous du header ...

help s'il vous plaît


( afficher l'image car elle est pas bien affiché la )

Arrows78
Réponse acceptée

Tout d'abord, il faut mettre plutôt :

.menu{
    padding-right: 10px; 
    padding-left: 800px;
}

A la place de 

.menu{
    padding: 0 10px;
    padding-left: 800px;
}

Car dans ta 1ere ligne, tu mets deja le padding-left à 10px, puis tu le change ensuite.

Ensuite maintenant pour corriger ton problème, tu n'as même pas besoin de toucher au code de la classe séparateur, ni même à ton CSS. Pour corriger, suffit juste de placer ta div separateur juste avant la fermeture du header. Car dans l'état actuel, si tu ne l'as vois pas, c'est parce qu'elle est coller tout en haut, donc en dessous de ton header. Pour le voir, suffit de mettre une opacity par exemple de 0.5 dans la classe header, ou une autre manière est de mettre un z-index: 2 à la classe séparateur.

De plus, si tu mets le separateur dans le header, et faut le mettre également dans le footer.

Si par contre tu ne veux pas faire comme cela, tu dois différencier les deux footer, et mettre un margin-top pour le separateur du header qui s'adapte en fonction de la hauteur de ton header (autant dire, je te déconseille cette méthode).

J'espère avoir répondu à tes attentes, sinon n'hésite pas.

Wa3aR

Salut Raikon,

Pour ta première question, je ne comprends pas trop ce que tu souhaites faire ? Si c'est juste placer un séparateur en dessous de ton header, il te suffit d'ajouter une div avec la class separator juste après la balise de fermeture de ton header (juste après le </header>). Si ça ne règle pas ton problème essaye de mieux définir ce que tu souhaites (du mois personnellement, je l'ai compris comme ça !).

Ensuite concernant ta deuxième question, tu as plusieurs solutions :

  • Soit tu fais un site avec des largeurs en pourcentage (ex: weight: 100%;) etc. Ton site s'ajustera automatiquement en fonction de la résolution de l'utilisateur ;
  • Soit tu fais un site statique et dans ce cas, tu limites la taille maximale du container à soit 960px si ta cible dispose d'écrans d'une résolution de 1024 soit 1140px pour des résolutions plus haute(1280 par exemple) ;
  • Enfin, dernière solution : tu fais un site responsive qui s'adaptera à chaque type de media (smartphone, tablette etc.) mais ce n'est pas ce que tu demandes si j'ai tout compris.

Voila, j'espère t'avoir aidé :)

Arrows78

Tout d'abord, pour savoir si ton site est valide, suffit d'aller sur le site du W3C (que tu dois sûrement connaitre, sinon il faut absolument le savoir :p).
Ensuite, voici donc le résultat de ton site : http://validator.w3.org/check?uri=http%3A%2F%2Ffr1-btv.tk%2Fhtmlcss%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Il est donc valide. Le seul Warning présent est normal, c'est parce que la version 5 n'est pas encore tout a fait à jour.

Pour ton séparateur, comme le suggère Wa3aR, tu peux ajouter une div en dessous de ton menu, ou tout simplement en CSS, tu ajoutes un border en bas du menu (mais c'est moins propre car tu ne pourra pas modifier ce style ailleurs, surtout si tu le réutilise dans le footer).

Concernant maintenant l'adaptation de ton site, il n'y a pas 36 solutions. Tu peux utiliser des frameworks comme Bootstrap ou Foundation qui te simplifie beaucoup la vie concernant le responsive. Après, tu as également la possibilité d'utiliser les "Media Queries" (mais tu peux coupler les deux possibilités). Et pour finir, tu peux mettre en pourcentage, qui s'adaptera sur n'importe quel écran, mais le problème, c'est que sur ton 22 pouces, tu n'auras pas l'aperçu sur plus grands (même si la plupart des utilisateurs n'utilisement pas plus de 17 pouces, ce qui fait déjà un bon écran).

Reikon
Auteur

Bonjour,

Merci pour vos réponses rapides et bien détaillé mais je craint que vous n'ayez pas compris mon problème ^^

Enfaite ce que je souhaite faire c'est comme dans le screen, j'ai essayer mais il est toujours sous le header

j'ai essayé avec ce que je connais ( le minimum quoi ) mais j'arrive pas.

bien sur que j'ai mis une div comme au dessus du footer mais celle-ci ne s'affiche pas car elle se met sous le header ! que faire ?

Ce que je veux faire c'est
header 80px
container 950px
footer 80px

et que ça dépasse pas j'ai cru y arriver avec les séparateur mais non :(

tout ce qui est dans le header reste dans le header et ainsi de suite ... mais je n'arrive pas à faire ça je sais que vous n'avez pas le droit de donner du code mais mon problème c'est pas le code juste expliquez moi comment faire

questions :

C'est quoi la différence entre background et background-color ?

je vous en remercie d'avance :)

Arrows78

Je ne comprends pas vraiment à quoi correspond ton séparateur sur ton screen alors.
Tu peux toujours donner ton code pour voir...

Sinon pour ta question :
"background-color" est la propriété qui permet de donner une couleur à l'arrière plan. Tu peux donc avoir aussi bien une couleur écrite en anglais, une couleur écrite en RVB, ou le mieux, une couleur avec un code hexadécimal (exemple: #FF0000 pour du rouge, #FFFFFF ou #FFF pour du blanc, etc).

Quant à "background", cela permet de gérer toutes les propriétés concernant l'arrière plan en même temps. Tu peux donc aussi ceci d'un coup :

  • background-color (pour la couleur)
  • background-image (pour mettre une image en fond)
  • background-repeat (si tu souhaite répéter ou non l'arrière plan, notamment selon la taille de ton bloc)
  • background-attachment (si tu souhaite fixer ou non le fond)
  • background-position (et la position).
    Et est bien entendu possible d'enlever une ou plusieurs de ces propriétés avec background.

Tu peux par exemple mettre: background: url('monfond.png') no-repeat fixed
=> Ce qui te permet de mettre l'image nommer "monfond.png" en arrière plan, qui n'est pas répété (donc attention à la taille de l'image par rapport au bloc), et fixed pour fixer l'image.

Reikon
Auteur

Bonjour,

Merci ça marche !

pouvez-vous s'il vous plaît laisser le topic ouvert ? au cas ou je rencontre un autre problème

[EDIT]
" quand je met un truc dans le container aussi il se met au dessous du header "

Je rencontre ce problème :(

J'aimerais aussi mettre du contenu dans la div flat mais le contenu que je met dans ce dernier se met sous le header

Arrows78

Oui cela est normal, parce que ton header est en position fixe. Pour résoudre le problème, tu as qu'à mettre une valeur pour la hauteur de header fixe, c'est à dire toujours la même quoi qu'il arrive, et peu importe l'écran de l'utilisateur, et ensuite, pour ta classe flat, tu mets un margin-top de la même taille que la hauteur de ton header, ensuite ton problème sera normalement résolu.

Richard300

Warranty the industry-standard coverage http://bestwashersanddryersrate.strikingly.com/ for parts as well as labor is one year some https://www.mixcloud.com/BestWashersandDryersBuyer/ brand names use longer-term, parts-only http://bestwashersanddryersprice.soup.io/post/656791867/How-to-make-your-laundry-more-energy coverage for the drum or tub as well as the http://bestwashersanddryersuserguide.greatwebsitebuilder.com/ direct-drive motor yet the labor costs for https://portablebestwashersanddryers.page.tl/ those repair work are so high that if they break