Css - fond - marge

Résolu
ladgalen Messages postés 143 Date d'inscription   Statut Membre Dernière intervention   -  
ladgalen Messages postés 143 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Sur le site que je suis en train de faire, j'ai choisi de mettre en fond un degradé (de haut en bas de blanc à vert). J'avais donc fait une image avec le degradé voulue.

Sur la page j'ai créer plusieurs div en suivant un tutorial. Un conteneur, un header, une barre de navigation un centre et un pied ! J'ai définit la couleur du header blanc comme le début du degrade et le peid vert comme le bas du degrade. J'ai mis le degrade comme image de fond du div central qui contient la barre de navigation (je voulais que le degrade commence dessus).

Pour limiter la taille de l'image de fond je l'ai découpé avec une largeur de 20px et je l'ai définie en repeat. Le problème c'est que le repeat est horizontal ET vertical ce qui m'embete car le degrade est vertical. L'astuce que j'avais étais de définir la couleur de fond du div central comme le bas du degrade ce qui fait que si la page est plus longue (horizontalement) que l'image de fond on le voyait pas, la couleur du bas du degrade continuait comme si de rien n'était.

Autre chose, dans mon div central je met du texte et je voudrais donc définir des marges ... le problème c'est que comme mon degrade est l'image de fond du div central, les marges me rogne le degrade et on voit le fond unicolore derrière ... bref c'est moche.

Si je met le fond dans le conteneur comme le div central est au dessus je n'arrive pas à faire mon astuce pour pas voir que l'image s'arrete avec la couleur verte qui continue car le div central est au dessus et du coup j'ai un fond tout vert.

Voilà mes deux problèmes qui sont un peu liés et qui m'embete ....

Vous avez des solutions ?

Est ce que je suis obligé de faire un div supplémentaire égal au div central mais avec des marges juste pour mettre le
texte ?

merci d'avance !

PS : je suis débutant en CSS

Voilà l'arichtecture de ma page html


<div id="conteneur"> pas de couleur de fond

  <div id="header"> fond blanc
      bla bla
  </div>

  <div id="central">  fond = mon image degrade
                                   c'est ici que je voudrais mettre des marges qui ne s'applique qu'au texte

        <div id="header">

        </div>
  </div>

</div>

3 réponses

chachac Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   2
 
t'embetes pas, pour que l'image se répète juste en vertical: repeat-y, juste en horizontal: repeat-x dans ton css
#central {
    background: url('chemin/image.png') repeat-y;
}
1
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
???

mais si tu le met au <body> le bacground il vas ce trouver sur tout la page !!! ou si tu le veut juste dans le conteneur tu le donne a la div conteneur et il s appliqueras a tout les enfant du conteneur !!!

ou j ai pas compris ??

RAD
1
chachac Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   2
 
tu le mets pas au body, tu le mets pour la div dont l'id est 'central': c'est pour ca que #central

le css est dans un fichier à coté que tu appelles dans le head de ta page par
<link href='chemin/feuille.css' rel='stylesheet' type='text/css' />

(change chemin/feuille.css par le chemin qui mène de ta page html à ta feuille css)
0
ladgalen Messages postés 143 Date d'inscription   Statut Membre Dernière intervention   10
 
Merci à vous

En fait pour moi c'est repeat-x car je veux que ça se répette horizontalement et pas verticalement. Là je viens de tester ça marche.

Pour les marges j'ai changé mes div et j'ai mis la couleur de fond + image de fond dans le conteneur et c'est bon !

Voilà la CSS

#conteneur {
    position: relative;
    width: 800px;
    margin: 0 auto; 
    background: url(img/fond-x.png) top left repeat-x;
    background-color: #A2DD7E;
}

#header {
    height: 40px;
    line-height:40px;
    text-align: center;
    padding: 0px 50px;
    background-color: #FFFFFF;
}

#barremenu {
    height: 142px;
    text-align: left;
}

#centre {
    position: relative; 
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
    min-height: 720px;    
}

#pied {
    height: 25px;
    background-color: #A2DD7E;
}



Et voilà le code de la page

<div id="conteneur">

    <div id="header">

    </div>

    <div id=barremenu>

       <ul class="navbar">

          <li></li>

       </ul>

    </div>

    <div id="centre">

        <!--- on affiche la bonne page -->
        <?php 
            include($page) 
          ?>

    </div>

    <div id="pied">
       
    </div>

</div>


Maintenant il faudra que je regarde si ça marche avec IE !!!
0