[Résolu] étendre une image de background

Re-bonjour,

je sollicite à nouveau votre aide, afin d'étendre une image sur 100%. Je suis passé par la faq, par l'article proposé sur pompage.net, sans y parvenir (probable que je ne comprenne pas quelque chose ...)

Dans la partie "dernières news", j'aurais besoin d'étendre la bordure de droite jusqu'en bas (voir avec IE, pour l'instant).

http://t2m-interim.nuxit.net/index.php5?page=140

Une idée de la manière dont je dois m'y prendre ?

Voici mon code css :

#container #left {
        background: transparent url(../images/back_08.png) repeat-y top right;
        background-color: #e0e0e0;
        float: left;
        position: relative;
        height: 100%;
        width: 240px;
    }

et voici mon code html :

            <div id="left">
                <img src="skins/{MYPLUGIN}/images/back_05.gif" alt="Derni&egrave;res news" />
                <p><span>10/07/2007</span> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p><span>14/07/2007</span> - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
                <p><span>01/08/2007</span> - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
                <p><span>15/08/2007</span> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                <p></p>
            </div>

Modifié par mcorgnet (07 Sep 2007 - 15:23)

mcorgnet a écrit :
Dans la partie "dernières news", j'aurais besoin d'étendre la bordure de droite jusqu'en bas (voir avec IE, pour l'instant).

L'image de fond, en repeat-y, va bien jusqu'en bas du bloc. Le problème serait plutôt que le bloc lui-même ne descend pas suffisamment loin.

Donc: direction Pompage.net (oui, encore ), et lire l'article sur les «colonnes factices».

J'ai déjà lu cet article ... Je ne le comprends pas, surtout qu'il traite avec des colonnes en position absolue, et que les miennes sont en position relative.

Voici les articles que j'ai lus :

http://forum.alsacreations.com/faq/faq-57-Appliquer-une-hauteur-de-100-a-un-element.html
http://www.pompage.net/pompe/colonnesfactices/
http://pompage.net/pompe/pieds/
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html

En fait, les deux derniers liens sont dans la FAQ, je me suis demandé si je pourrais y trouver quelque chose, mais ça ne semble pas correspondre à mon problème (et je ne vois pas vraiment le lien entre la faq et ces deux sites, en fait ...)

Je suis un peu lent à la comprenette, je sais :d

merci de ton aide.

mcorgnet a écrit :
Je suis un peu lent à la comprenette, je sais :d

C'est effectivement l'impression que j'ai. Peut-être quelques lacunes en CSS qu'il faudrait combler avant de s'attaquer à ces tutoriels? Notamment en ce qui concerne le positionnement CSS? (Voir article à ce sujet dans les tutoriels d'Alsacréations, et les trois articles sur le positionnement CSS sur OpenWeb.)

Je t'invite également à relire l'article sur les colonnes factices (oui je sais, je suis lourd, mais l'info est dedans!).
Prenons les choses telles qu'elles sont:
- tu as un bloc qui contient deux «colonnes» flottantes;
- tu n'as pas de moyen simple autre que l'utilisation d'un tableau de mise en forme pour que ces deux colonnes prennent 100% de la hauteur de ce conteneur;
- mais tu as un bloc qui fait déjà 100% de cette hauteur... le conteneur lui-même!
- au final, tu veux juste appliquer une décoration visible sur toute cette hauteur, pas forcément avoir des colonnes qui font la hauteur en question.

Bref, le principe des colonnes factices, c'est que l'on va faire du trompe-l'oeil, en appliquant une image de fond répétée en hauteur à un conteneur qui contient les deux colonnes plutôt qu'aux colonnes elles-mêmes (qui ne sont pas des colonnes, mais des blocs, ayant chacun sa hauteur propre, mis côte-à-côte... d'où le problème de départ).

Bref, il te faut un conteneur dans ce style:

#container {
	[b]overflow: hidden;[/b]
	position:relative;
	z-index:100;
	width:766px;
	margin:-30px auto 0pt;
	[b]background: url(../images/back_08.png) repeat-y 230px top;[/b]
}

Rien qu'en rajoutant l'image de fond (qui sera à modifier), ça devrait faire tilt.

On remarquera aussi l'utilisation de overflow: hidden pour éviter le dépassement des flottants dans les navigateurs conformes (cf. recherche sur le dépassement des flottants, si besoin).

Ensuite, et c'est un autre sujet, tu aurais intérêt à modifier le positionnement de tes colonnes. Pour commencer, le positionnement relatif est ici inutile, et s'il n'est pas utile mieux vaut éviter de l'utiliser. Ensuite, mieux vaut ne pas utiliser deux flottants: pour mettre deux blocs côte-à-côte, un seul flottant suffit (et on s'évite des prises de tête...)!

Hop, correction:

#container #left {
	float:left;
	width:235px;
	/* Et c'est tout. */
}
#container #right {
	margin-left:260px;
	padding:1em 0pt;
	/* Et c'est tout aussi. */
}

C'est tout de même plus simple comme ça.

Effectivement, j'aurais du réfléchir un peu mieux.

J'avais essayé de l'appliquer au body, en fait, et c'est pour ça que ça ne fonctionnait pas. Je n'avais pas tenté de le faire sur mon bloc container.

Merci beaucoup de ton aide, j'ai réutilisé ton code pour corriger, et c'est parfait.

J'essaierai d'être plus attentif à l'avenir.

Merci encore.