Css - fond - marge

Résolu/Fermé
ladgalen Messages postés 143 Date d'inscription jeudi 3 janvier 2008 Statut Membre Dernière intervention 6 septembre 2013 - 26 mai 2008 à 15:10
ladgalen Messages postés 143 Date d'inscription jeudi 3 janvier 2008 Statut Membre Dernière intervention 6 septembre 2013 - 26 mai 2008 à 16:23
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 mercredi 21 mai 2008 Statut Membre Dernière intervention 4 juin 2008 2
26 mai 2008 à 15:15
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
26 mai 2008 à 15:17
???

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 mercredi 21 mai 2008 Statut Membre Dernière intervention 4 juin 2008 2
26 mai 2008 à 15:22
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 jeudi 3 janvier 2008 Statut Membre Dernière intervention 6 septembre 2013 10
26 mai 2008 à 16:23
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