28173 sujets

CSS et mise en forme, CSS3

[Résolu] "background-repeat: repeat-x" qui se répete trop :(

Bonjour,

je suis en train de programmer un site et je voulais savoir si vous pouviez m'aider car je tourne vraiment en boucle Smiley decu

J'essaie de mettre en place une baniere qui se décompose en plusieurs morceau. Le probleme c est que pour la finir et qu'elle s'adapte automatiquement a la résolution du visiteur je veux faire un reapeat-x

Le probleme est que celui ci se répète de trop puisqu'il démarre directement du début de la page. J'arrive bien a le décaller grace a un margin-left mais il dépasse alors sur le coté droit.

<html>

<head>
  <title></title>

  <link rel="STYLESHEET" type="text/css" href="css.css">
</head>

<body>

   <div class="Conteneur">
   <div class="Logo1"></div>
   <div class="Logo2"></div>
   <div class="Bande_grise"></div>
   <div class="Courbe_rouge"></div>
   <div class="Bande_rouge"></div>
   </div>


</body>

</html>


body {
 background-color:#ffffff;
 padding:8px 25px 15px 25px;
 margin:0px;
 border:0px;
}

.Conteneur {
     height: 100%;
     width: 100%;
     background-color: yellow;
     }


.Logo1 {
        position : absolute;
        height: 100%;
        width: 100%;
        background-image: url(http://127.0.0.1/Boulot/Images/logo.gif);
        background-repeat: no-repeat;
        background-position: 8 10px;
        }

.Logo2 {
        position : absolute;
        height: 100%;
        width: 100%;
        background-image: url(http://127.0.0.1/Boulot/Images/compusys.gif);
        background-repeat: no-repeat;
        background-position: 182 13px;
        }

.Bande_grise {
        position : absolute;
        height: 100%;
        width: 100%;
        background-image: url(http://127.0.0.1/Boulot/Images/header_greybar_trans.gif);
        background-repeat: no-repeat;
        background-position: 0 48px;
        }

.Courbe_rouge {
        position : absolute;
        height: 100%;
        width: 100%;
        background-image: url(http://127.0.0.1/Boulot/Images/header_redbar.gif);
        background-repeat: no-repeat;
        background-position: 142 36px;
        }

.Bande_rouge {
        position: absolute;
        margin-left: 36px;
        margin-top: 142px;
        background-image: url(Images/header_redbar_bg.gif);
        background-repeat: repeat-x;
        background-position: 142 36px;
        }


Merci de vos solutions
Modifié par Syberi@ (11 Jun 2006 - 10:50)
Bonjour Syberi@ et bienvenue parmi nous !

Le problème vient peut-être de ta démarche.

En effet, la méthode la plus simple pour mettre en place ta bannière serait de la faire en une seule image à placer en background d'un conteneur "entete" (par exemple) et non de la découper en plusieurs morceaux pour la mettre en place en background dans plusieurs div, lesquels sont vides de contenus dans ton code html ...

L'intérêt du css est justement de séparer le contenu utile des illustrations.
La démarche d'une mise en page n'est plus de découper les illustrations en plusieurs petits morceaux et de les intégrer, morceau par morceau en html, comme nous avions l'habitude de le faire avec les tables.

De plus, il sera plus facile de gérer un conteneur, lequel n'aura peut-être même pas besoin d'être positionné, que plusieurs conteneurs côte à côte en position absolue ...

Concrètement, un exemple de démarche dans ton cas :

1/ Créer une image unique (banniere.jpg, par exemple) intégrant le fond, les bandes et les deux logos, de la largeur des logos.

2/Créer une bande du fond à répéter (fond.gig, par exemple), de la hauteur de la bannière.




<body>

   <div id="conteneur">

   <div id="entete"><h1>Titre du site</h1></div>

   </div>

</body>





body {

 background-color:#ffffff;
 margin:0px;
 border:0px;
}



#conteneur {

     height: 100%;
     width: 100%;
     background: yellow url(fond.gif) repeat-x;

     }

#entete {
        height : hauteur de l'image
        background: transparent url(banniere.jpg) no-repeat left top;
}


ou bien 




<body>

   <div id="conteneur">

   <div id="entete"><img src="banniere.jpg" width="largeur" height="hauteur" alt="Titre du site"></div>

   </div>

</body>





body {

 background-color:#ffffff;
 margin:0px;
 border:0px;
}

#conteneur {

     height: 100%;
     width: 100%;
     background: yellow url(fond.gif) repeat-x;

     }

#entete {
       height : hauteur de l'image
}


Dans ce cas, le titre du site, que je suppose renseigné par la partie logo, reste accessible à un lecteur vocal (grace à l'attribut alt de la balise img) ou en cas de désactivation des images par l'utilisateur (possibilité en cas de connexion bas débit)

Voilà, en gros, les deux démarches généralement usitées pour une mise en place de bannière et de logo en css.

Nota : j'ai utilisé des id, et non des classes, pour identifier les blocs.
Pour plus d'info sur les id et les classes
Modifié par Vero (10 Jun 2006 - 17:12)
Salut Vero,

Le titre à disparu entre ton premier et deuxieme exemple.

Ce qui peux amener un troisieme exemple en fonction de ce que l'on veux.

<body>

   <div id="conteneur">

   <div id="entete"><h1><img src="banniere.jpg" width="largeur" height="hauteur" alt="Titre du site"><h1></div>

   </div>  
</body>


Voire un quatrième Smiley cligne 

<body>

   <div id="conteneur">

   <div id="entete"><h1><a href="index.php" title="retour à l'acceuil du site"><img src="banniere.jpg" width="largeur" height="hauteur" alt="Titre du site"></a><h1></div>

   </div>  
</body>

Modifié par knarf (10 Jun 2006 - 17:26)
knarf a écrit :

Le titre à disparu entre ton premier et deuxieme exemple.

Ce qui peux amener un troisieme exemple en fonction de ce que l'on veux.


Hello Frank !

Oui, merci de le préciser !

L'idée est d'amener Syberi@ à la bonne démarche d'intégration et, au passage, lui suggérer l'implémentation d'un bon titrage et de l'accessibilité correspondante ...

Smiley biggrin
Sujet clos
Aller à