28220 sujets

CSS et mise en forme, CSS3

Width: 100% et scrolling horizontal

Bonjour!
Premier post ici pour moi, parce que je trime trop et depuis presque une semaine:
dans un div de largeur 100% j'ai un autre div de largeur 100% et décalé de x pixels sur la gauche.

Comment faire pour que ce deuxième div ne me "pousse" pas la largeur de la fenêtre à 100% + x pixels?

Oui je sais, c'est très mal dit, mais je n'ai malheureusement pas encore de préprod à vous montrer, tout est en local... Smiley decu
Administrateur
Salut Doic et bienvenue.

Ça commence mal : je ne comprend pas comment un élément peut occuper 100% de la largeur et être décalé dans cette largeur Smiley ohwell
Il ne peut que dépasser.

Peux-tu être plus clair (un exemple visuel ou du code) ? Et surtout : expliquer ce que tu veux obtenir au final ?
Il y'a sans doute plusieurs techniques et solutions.
Voici le bout html:
<div id="header"> 
  <div id="logo"></div>
  <div id="large"><img src="images/Charte3_02.jpg" class="large" alt="" /></div>
  <div id="tete"></div>
</div>

Et le bout CSS:
div {	position: absolute; background-repeat: no-repeat; }

#header {	min-width: 768px; width: 100%; height: 96px; top: 0px; }
#large { width: auto; left: 436px; height: 96px; top: 0px; }
#logo {	background-image: url(../images/Charte3_01.jpg);  width: 436px; height: 96px; top: 0px; }
#tete { background-image: url(../images/Charte3_03.jpg); right: 0px; width: 320px; height: 96px; top: 0px; }

.large { width: 100%; height: 100%; }


J'ai remplacé un "100%" par "auto", comme suggéré par Felipe, et cela fonctionne pour IE. Pas sur FF.
Autre problème: le min-width est pris en compte par FF, pas par IE...
Bonjour,

Simplifier.

Si j'ai bien saisi ce que tu cherches à obtenir :

- supprimer #logo
- donner un padding de 436px à #large, sans mention de largeur.
- mettre l'image Charte3_01.jpg en arrière-plan de #large, dans ce padding.

Et vérifier s'il est bien justifié que tout cela n'ait aucun équivalent textuel. Au cas où.
Ce que je veux:
#logo dans le coin en haut à gauche
#tete dans le coin en haut à droite
#large en haut entre les deux div précédents, sur tout "l'intervalle"

le #large doit s'étendre ENTRE les deux div et pas DERRIERE.
une image de largeur 100% dans le #large s'étale donc dans l'intervalle.
la solution ci-dessus correspond exactement à ce que tu viens de décrire :

- Ne conserver que 2 div.
- le premier contient l'image de gauche en arrière-plan CSS dans un padding-left et l'image centrale en <img> HTML.
- le second contient l'image de droite en arrière-plan CSS (ou en <img>, peu importe).

Le tout en XXX pixels figés, et en oubliant le min-width, puisqu'aucune des images d'arrière-plan n'est manifestement prévue pour se répéter et couvrir un espace variable.

Mais ce serait plus simple à te montrer si tu donnais l'url d'une page test à te modifier Smiley cligne
Modifié par Laurent Denis (01 Oct 2005 - 13:04)
Je crois comprendre le début. Par contre, tu me dis que le min-width ne sert plus à rien puisque la largeur n'est pas variable... or elle l'est, je voudrais un même header quelle que soit la résolution de l'internaute (même les 640 !) Donc je souhaite que mon header ne soit pas trop compressé....

Je vais essayer ta manip, et mettre aussi ma page en ligne, ça sera plus simple...

<>
désolé pour la modif temporaire de ton message que je restaure auatnt que possible : une erreur de manipulation m'a fait cliquer sur un bouton de modération par accident.</>
Modifié par Laurent Denis (01 Oct 2005 - 13:23)
Ah, je ne voyais pas quelle image tu voulais voir s'étendre. C'est elle qu'il faut placer en arrière-plan CSS qui se répète sur tout le conteneur global. Les images des deux bords du bandeau sont empilées par dessus.

Tu peux utiliser ceci :

<style type="text/css">
<!-- 
#header,#logo {
position: absolute;
height: 96px;
width: 100%;
}
#header {
background: #F5F5F5 url(Charte31.jpg) top left repeat;
}
#logo {
background: transparent url(Charte30.jpg) top right no-repeat;
}
-->
</style>
</head>
<body>

<div id="header"> 
  <div id="logo"><img src="Charte3_.jpg" alt="musiciens" /></div>
</div>


Pour le min-width, étant donné le non support dans IE5x-6.0 et les scrolls qu'il entraîne ailleurs, autant s'en passer et rester en fluide.
Modifié par Laurent Denis (01 Oct 2005 - 14:44)
J'ai mis le résultat en ligne: je préférais encore l'ancienne...

Commentaire: si le min-width ne fonctionne que sur FF, je préfère le mettre, cela fonctionnera au moins pour 10% des internautes...
doic a écrit :
J'ai mis le résultat en ligne: je préférais encore l'ancienne...


lol. En effet : apparement, tu as un peu interverti les images par rapport au code que je t'ai indiqué Smiley cligne

(J'avais oublié que mon navigateur renommait les images à l'enregistrement, et que les noms de fichiers images ne correspondait plus à ceux que tu avais).

Pour corriger :
- l'image de background de #header est l'image centrale, bleue dégradé
- l'image de background de #logo est la partie droite du bandeau, avec ton personnage qui se bouche les oreilles
- l'image <img> est la partie gauche du bandeau, avec les instruments.
Modifié par Laurent Denis (01 Oct 2005 - 15:16)
Voilà, en mettant les images dans les bons div, ça donne à peu près la même chose... Smiley ohwell
Merci!

(c'était désespéré)

Bon, c'est un début, j'ai encore tout le reste à intégrer maintenant...
Bonjour!

Toujours sur la même page (http://www.freetic.com/charte/Charte5-div.html):
Je me retrouve avec
<div id="test" style="left: 148px; top: 130px; width: 410px; height: 120px;">
  <div class="centre">
    <h1>Musiciens, soyez les bienvenus</h1>
    <h2>Tous les musiciens trouvent sur Freetic...</h2>
    <p>Freetic est certainement le site d'annonces pour musiciens le plus complet.
      Toutes les annonces sont classées selon plusieurs critères
      afin d'optimiser vos recherches.</p>
  </div>
  <div class="side1"></div>
  <div class="side2"></div>
  <div class="side3"></div>
  <div class="side4"></div>
  <div class="corner1"></div>
  <div class="corner2"></div>
  <div class="corner3"></div>
  <div class="corner4"></div>
</div>


Comment éviter le bloc de div qui traine en bas de chaque zone de contenu? Dans ces div se trouvent les éléments graphiques de mes zones de contenu...

Si en plus vous pouviez prendre le temps de critiquer ma méthode ce serait génial...

Je suis bien conscient de faire du travail de bourrin, mais je pense aussi que c'est le meilleur moyen d'apprendre!!
J'espere bien un jour pouvoir prodiguer mes conseils (dans un an ou deux) sur ce forum Smiley cligne

Merci!
Sujet clos
Aller à