28173 sujets

CSS et mise en forme, CSS3

Probleme de fond (100% ??)

Bonjour,

Je viens vers vous car je perd totalement pieds, j'ai un probleme de fond qui ne se repete pas totalement.
Je m'explique, je voudrais que quelque soit le contenu, mon fond de page arrive en bas de page (et non en bas d'ecran) sur IE cela passe (plus permissif ??) et sur FF mon fond s'arrete au bout d'un écran (et non au bout de la page)

http://www.zerosept.com/blog/index.php/2006/03/15/2-chinese-boyz

je ne sais pas si je me fait comprendre, n'hesitez pas à me le dire le cas contraire ^^.

J'ai déjà eu ce problème par le passé (récent le passé quand même car je demarre juste en CSS, je ne comprend pas encore toutes les subtilités) et pas moyen d'y remedier.

Merci d'avance à ceux qui prendrons le temps de répondre.
Modifié par narno07 (16 Mar 2006 - 14:28)
Bonjour,

Tente ceci :


#global{
	background: url(../images/fond_conteneur.jpg) repeat-y;
	height:100%;
        min-height : 100%;
        height : auto !important;
	clear:both;	
}

Smiley cligne
(je viens de tester en local), le fond s'etire sur la hauteur de l'ecran, mais si le contenu depasse la hauteur d'un ecran il ne se prolonge pas, par contre tu m'as régler un bug au niveau du menu (colonne de gauche).

En fait maintenant mon font s'etire au 100% d'un écran quoi qu'il arrive (que ce soit le menu ou le contenu qui soit le plus long) mais au dela il ne se prolonge pas (sous FF du moins)
Sopo a écrit :
Salut !

Essaie d'utiliser les commentaires conditionnels en indiquant, dans la feuille de style "normale" :
html {
height: 100%;
}
body {
min-height: 100%;
}
et dans la feuille de style pour IE :
html, body {
height: 100%;
}


Merci beaucoup ca fonctionne au poil, toi jte kiffe ^^

Merci mille fois Smiley smile
Pas de quoi, cha fait plaisir

Faut remercier Raphaël & Laurent Broccoli, surtout Smiley cligne

[Remarque]
Ca fonctionne effectivement très bien pour un site en largeur fixe, où on joue seulement sur les balises body & html. Par contre, je n'arrive pas à avoir une hauteur de 100% pour un site en largeur fluide Smiley confus --> un exemple ici

J'ai ajouté un conteneur global, #page je crois, pour placer l'image de fond sur le bord droit, l'image de fond sur le bord drot étant placée dans <body>. Et là, je n'arrive pas à forcer tous les éléments à se prolonger jusqu'en bas de page ! Si quelqu'un sait comment faire ...
Modifié par Sopo (16 Mar 2006 - 11:14)
Merci a vous alors Raphael et Laurent

(désolé pour les autres mais je pense que vous allez souvent me voir ici j'ai l'impression qu'on peut y apprendre vite Smiley smile )
Ahah, tu as le même problème que moi, en fait ! Un conteneur de trop ...

Mais je pense que tu peux résoudre ton problème assez simplement : déplace l'arrière-plan utilisé sur <body> vers <html>, et celui utilisé sur #global vers body ... et ré-essaie les commentaires conditionnels.
Modifié par Sopo (16 Mar 2006 - 11:39)
Sopo a écrit :
Ahah, tu as le même problème que moi, en fait ! Un conteneur de trop ...

Mais je pense que tu peux résoudre ton problème assez simplement : déplace l'arrière-plan utilisé sur <body> vers <html>, et celui utilisé sur #global vers body ...

Toi t'es presque mon sauveur ^^

C'est good sur FF mais sur IE ca pine pareil :s
Je vois ça, mais ou c'est qu'elle est ma feuille de style alternative pour IE, hein ? Smiley murf

Si tu ne lui dis pas d'afficher sur 100% de hauteur, à IE, il va pas le sucer de son pouce ! et comme il ne comprend pas 
min-height: 100%;
il l'ignore royalement.

Donc, ajouter dans le <head>, juste après la déclaration de la feuille de style normale :
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/blog/themes/blog07/style-IE.css" /><![endif]-->

et créer une feuille de style "style-IE.css" à côté de l'autre, avec :
body { height: 100%; }
dedans.

Mais je te mâche le travail, là, ma parole !! Smiley biggol
Modifié par Sopo (16 Mar 2006 - 11:51)
Attention, apparemment, la syntaxe du commentaire conditionnel a été un peu passée à la moulinette par le forum, il manque des crochets autour de endif, à la fin. (Voir le lien que je t'ai donné plus haut pour plus d'infos sur les commentaires conditionnels)
Merci

Désolé j'avais zappé la feuille alternative car quand je testé a un endroit avec contenu ca passé bien Smiley smile

Merci beau coup en tous cas, bon je le passe en resolu et je met le sujet dans mes favoris...

Merci beaucoup en tous cas, jte dois une fiere bretelle Smiley lol
Hep ! N'oublie pas de corriger le commentaire conditionnel ! t'as oublié, ou alors c'est mon écran qui n'affiche plus les crochets Smiley eek

attends, je teste ... [[[[[

Ben non, c'est toi qui as oublié

<argh tu m'as grillé Smiley lol >

Sinon, j'aime beaucoup le design, mais ça foire un peu quand on redimensionne la fenêtre, en 800x600 notamment !
upload/2835-oups.JPG
Modifié par Sopo (16 Mar 2006 - 12:02)
Sopo a écrit :
Hep ! N'oublie pas de corriger le commentaire conditionnel ! t'as oublié, ou alors c'est mon écran qui n'affiche plus les crochets Smiley eek

attends, je teste ... [[[[[

Ben non, c'est toi qui as oublié

<argh tu m'as grillé Smiley lol >

Sinon, j'aime beaucoup le design, mais ça foire un peu quand on redimensionne la fenêtre, en 800x600 notamment !
upload/2835-oups.JPG


Ya meme un gros probleme en redimensioonnant en 800*600 en ce qui concerne le fond, tu l'a de ton côté ?

Que ce soit avec IE ou FF de mon coté y a le meme soucis :s j'y pige riiiiiiiiiiiien

Exemple
http://www.zerosept.com/blog/index.php/Sur-le-web

a priori ca prend la taille du bloc de contenu (et pas celui de la side bar)
Modifié par narno07 (16 Mar 2006 - 15:09)
Sujet clos
Aller à