28173 sujets

CSS et mise en forme, CSS3

[Resolu] Dégradé présent sur toute la hauteur de ma page

Bonjour à tous,
je post ce message car mes recherches n'ont pas été fructueuses sur le forum.. j'ai pas du rentrer les bons mot-clés car je pense que le sujet a été traité plus d'une fois
je vous explique mon souci :
j'ai un bloc conteneur pour ma page
le contenu est plus ou moins important
Or lorsque mon contenu n'est pas assez important mon dégradé s'arrete (car il est en image de fond de ce bloc)
la solution me semblerait de donner a mon bloc une taille de 100% mais je sais que cela ne suffit pas ( car testé ^^)
Merci d'avance pour les directions données
Modifié par otterman (25 Sep 2007 - 11:50)
Salut,

Avec une page en ligne ou au moins l'intégralité du code html et css, il serait certainement plus simple de juger de ce que tu cherches à faire, et t'aider en conséquence. Smiley cligne
Pardon je vais essayer d'etre un peu plus clair
par souci de confidentialité je n'ai pas d'exemple de la page en ligne
ci joint 2 images :
- la première est ma version actuelle, lorsque le contenu de ma page n'est pas assez grand mon dégradé ne va pas jusqu'au bout
- la deuxième est ce à quoi je voudrait arriver

précision au niveau de mon découpage, le dégradé de fond est une image de 1px de large en fond dans le body, le dégradé de mon contenu (droite et gauche) est une seule image en fond dans mon bloc contenu

c'est peut etre tout simplement ma méthode qui n'est pas la bonne..

CSS :

#total{
	width: 980px;
	margin: 0 0 0 -490px;
	padding: 0 14px 0 13px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/fond-degrade.jpg);
	background-repeat: no-repeat;
}

body{
	background-image: url(../images/fond-body.jpg);
	background-repeat: repeat-x;
}


HTML :

<body>
<div id="total">
/* mon contenu */
</div>
</body


upload/2439-img-1.jpg upload/2439-img-2.jpg
Bonjour,

En gros, tu as besoin de définir une hauteur minimale pour div#total, hauteur minimale dont tu connais la valeur exacte en pixels (elle correspond à la hauteur de ton image de fond que tu veux afficher en entier).

Et quelle est la propriété CSS pour définir une hauteur minimale?

Et voilà, problème [Résolu].
Une nuance tout de même: cette propriété n'est pas comprise par Internet Explorer 6. Soit on se passe de hauteur minimale pour cette version de ce navigateur (note: ça marche très bien dans IE7), soit on va chercher dans la FAQ du forum une solution pour obtenir une hauteur minimale dans IE6. Smiley cligne
okok merci pour ces précisions !
j'avais noté que ie utilisais mal la propriété min-height, donc du coup je l'utilisais jamais
du coup je vais pouvoir la réutiliser étant donné que ie 7 l'accepte enfin ^^
juste une dernière précision pour ie 6 je dois mettre ça si j'ai bien compris ?

<!--[if lt IE 7]>
#total {
height: 500px;
}
<![endif]-->
merci a tous pour toutes ces précisions
juste une remarque :
perso étant développeur également je trouve ca bizarre des conditions dans du code css ^^, même si c'est bien pratique Smiley smile
otterman a écrit :
perso étant développeur également je trouve ca bizarre des conditions dans du code css ^^

Heu... les commentaires conditionnels sont des commentaires HTML, et donc ils ne s'utilisent que dans le code HTML.
À l'intérieur du commentaire conditionnel, on placera donc soit un élément style, soit un élément link. Et, bien entendu, tout cela se passe dans le head de la page. Smiley smile
Modifié par Florent V. (26 Sep 2007 - 01:18)
Sujet clos
Aller à