probleme integration des elements graphiques

Par soom, il y a 15 ans

Les bases HTML/CSS

Bonjour,
voila je n'arrive pas à integrer mon graphisme de site web je m'explique: mon header et mon image de fond se superposent malgrés le padding voici mon code merci de votre retour!
CSS

body
        {
    background: #77afdb;
    background-image: url(dossier%20image%20ok/fond.png);
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    background-position: center;
    margin-top: 60px;
    } 

#header
{
    height: 170px;
    background-image: url(dossier%20image%20ok/header.png);
    background-repeat: no-repeat;
    background-position: top center;
    font-size: 24px;

    }

3 réponses

wallerand, il y a 15 ans

Il y a une réponse logique. (je vais essayer d'être clair ;)
le body est le fond principale : c'est-à-dire il recouvre tout la page donc au moment où intervient le header, le body (le fond de toute la page) est recouvert par 170px (la marge [margin-top: 60px;] ne changerai rien).
il y a une solution : mettre dans le body les informations de bases comme font-familly, ... ressemblerai à sa :

body{
background: #77afdb;
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}

Puis y inséré ton header par dessus : 

#header{
height: 170px;
background-image: url(dossier%20image%20ok/header.png);
background-repeat: no-repeat;
background-position: top center;
font-size: 24px;
}

pour finir , créer une autre div où il y aurai ton fond : 

#background{
background:url(dossier%20image%20ok/fond.png) center no-repeat;
}

Et dans cette div tu peut mettre ton container, le contenu !
voilà en espèrent de t'avoir aide et d'être été asser clair

soom, il y a 15 ans

en effet! c'est déjà mieux!! merci beaucoup ;)
je galère pas mal sur mon site..ca fait déjà une semaine que je suis dessus dur dur
je vous posterais le lien une fois terminé!
une fois encore merci! et bonne soirée!

wallerand, il y a 15 ans

Bon chance pour ton site !
heu valide ta réponse ;)