Bannière qui occupe toute la largeur de la page

Question

autofill

17 Mar 2007 à 00:53

Bonjour,

Suite à de nombreuses recherches sur le net, et n'ayant toujours pas trouvé de solution, je viens vers vous afin d'avoir une explication voir qui sait peut-être d'obtenir l'aide qui me permettra de résoudre le problème que je vais vous énoncer.

Alors voilà, ce que je souhaite obtenir est assez simple à expliquer, copiez le code que j'ai inséré dans ce sujet dans un fichier en local et ouvrez cette page. Ce que j'aurais aimé obtenir, ce sont des nuages qui se répêtent sur toute la largeur de la page, et non pas uniquement sur la largeur de la fenêtre. J'ai essayé pas mal de possibilités, mais jamais je ne suis arrivé au résultat attendu.

Vous verrez dans le code une longue ligne de texte qui provoque une barre de défilement horizontale. C'est bien entendu celle-ci qui me pose problème, mais je dois faire avec.

Si vous pouviez m'aider Smiley sweatdrop

Merci d'avance.

<html>
<head>
  <style type="text/css">
    body {
      margin:0;
      padding:0;
      width:100%;
      border:red solid 1px;
    }

    #global {
      position:relative;
    }

    #header {
      position:relative;
      width:100%;
      height:275px;
      background: url(http://www.msgenerators.com/myspaceimages/backgrounds/miscellaneous_2_343.gif) repeat-x;
      border:blue solid 1px;
    }

    #content {
      position:relative;
      width:100%;
      border:green solid 1px;
    }
  </style>
</head>

<body>
  <div id="global">
    <div id="header"></div>

    <div id="content">
      <p>Début</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>UntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplong</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Fin</p>
    </div>
  </div>
</body>
</html>

ghost

17 Mar 2007 à 01:16

Bonjour,

Essaye

	html{     
	 background: url(http://www.msgenerators.com/myspaceimages/backgrounds/miscellaneous_2_343.gif) repeat-x;
}

heaven

17 Mar 2007 à 03:34

a écrit :
Vous verrez dans le code une longue ligne de texte qui provoque une barre de défilement horizontale. C'est bien entendu celle-ci qui me pose problème, mais je dois faire avec.

Tu veux enlever cette barre de défilement horizontal ?

Tony Monast

Modérateur

17 Mar 2007 à 05:16

Bonjour,

Pour la barre de défilement horizontale, c'est plutôt normal qu'elle apparaisse. Le navigateur ne peut pas découper ton paragraphe en plusieurs lignes puisqu'il n'y a aucun espace entre chaque mot. Normalement, pour tester une interface, on utilise le Lorem Ipsum, par exemple :

a écrit :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam varius lacus nec turpis. Morbi posuere bibendum ipsum. Maecenas vulputate pede tristique erat. Suspendisse sed nisl. Nullam at libero et justo bibendum scelerisque. Nulla quis eros. Fusce ut quam. Maecenas libero. Nam ante ipsum, aliquam ut, feugiat nec, eleifend ac, tellus. Suspendisse nulla est, eleifend id, vehicula quis, porta eu, risus. Sed purus enim, nonummy id, ornare nec, ullamcorper ut, sem. Proin ornare venenatis tortor. Vivamus elementum magna ut odio. Donec in orci sit amet massa commodo vulputate.

C'est beaucoup plus près de la réalité qu'un mot de plus de 100 caractères.
Modifié par Tony Monast (17 Mar 2007 - 05:17)

autofill

17 Mar 2007 à 17:42

Tout d'abord, merci à vous pour vos premières réponses Smiley biggrin

Ensuite, pour vous répondre, je suis bien conscient que mon texte n'est pas très conforme à la réalité. Cependant, le contenu des pages allant par moment être assez important, je préfère laisser la possibilité aux gens qui ont un petit écran de pouvoir "scroller" horizontalement, tout en conservant un design correct. Enfin, on verra pcq à force de chercher, je me demande si je ne vais pas être obligé de laisser ce léger bug d'affichage.

ghost, désolé de ne pas avoir été plus clair dès le départ. Ta solution est tout à fait correcte et fonctionnerait sur la plupart des sites, mais le design que j'ai conçu possède un bas de page statique (c-à-d qu'on peut scroller verticalement tant qu'on veut, celui-ci restera en place).

Et le code que j'ai dû mettre en place pour gérer ce menu fait en sorte que quand je place un background dans le style lié au tag html, le background se place bien sur toute la largeur de la page, mais lorsque je scrolle ma page verticalement, l'image reste tout le temps en haut de page. Alors que j'aurai aimé que l'image monte en même temps que le texte.

Pour que mon explication soit plus claire, voici le code dans lequel j'ai tout implémenté, ainsi que le style lié au tag html. Ouvrez cette page, et constatez le comportement de la page, et plus spécialement l'image background qui reste figée en haut de page lors du scroll vertical...

Pour info, le code que j'ai utilisé pour gérer le menu bas est tiré d'un tutorial trouvé sur le site www.webreference.com.

Merci, à bientôt.

<html>
<head>
  <style type="text/css">
    html{
      background: url(http://www.msgenerators.com/myspaceimages/backgrounds/miscellaneous_2_343.gif) repeat-x;
    }

    body {
      margin:0;
      border:0;
      padding:0;
      height:100%;
      max-height:100%;
      overflow: hidden;
      border:red solid 1px;
    }

    /* hack for internet explorer only */
    * html body {
      padding:0 0 50px 0;
    }

    #global {
      position:fixed;
      top:0;
      left:0;
      bottom:50px;
      right:0;
      overflow:auto;
      border:orange solid 1px;
    }

    /* hack for internet explorer only */
    * html #global {
      height:100%;
      width:100%;
    }

    #top {
      width:100%;
      height:275px;
      position:relative;
      border:blue solid 1px;
    }

    #content {
      position:relative;
      width:100%;
    }

    #footer {
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      height:50px;
      overflow:auto;
      border:green solid 1px;
    }
  </style>
</head>

<body>
  <div id="global">
    <div id="top">Top</div>

    <div id="content">
      <p>Début</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>UntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplongUntextebeaucouptroplong</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Du texte</p>
      <p>Fin</p>
    </div>
  </div>
  <div id="footer">
    Footer
  </div>
</body>
</html>

Modifié par autofill (17 Mar 2007 - 17:47)

Tony Monast

Modérateur

18 Mar 2007 à 20:14

Bonjour autofill,

Je vais peut-être revenir t'aider un peu plus tard, mais pour l'instant, il te manque un doctype. Lire attentivement Le DOCTYPE qu’il vous faut
Modifié par Tony Monast (18 Mar 2007 - 20:15)

ghost

18 Mar 2007 à 20:21

Re,

Oui là c'est "misère", a part donner un width farfelu de 2 ou 3000px je ne vois pas, peut être en JS ? mais je ne suis pas assez calé en la matière

Sujet clos

CSS et mise en forme, CSS3

Bannière qui occupe toute la largeur de la page