28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai réussi à obtenir un mise en page qui me convient dans IE7 avec le fichier source suivant :

Solution visible ici

Malgré mes recherches, je n'arrive pas à avoir le même fonctionnement sur FF et IE6...

Avez vous une piste ?

Pour information le fond est une image de 1 pixels sur 2000.

Cordialement,
RedRégis
bonjour

j'ai regardé ton problème.
l'image de fond que j'ai trouvée à cette adresse: http://divers.kikankoi.com/css/fond.jpg fait 100x3000px
la référence donnée dans la page index n'est pas exacte ou renvoie vers un autre fichier qui n'y est pas... je ne sais pas ... à voir

quoi qu'il en soit j'ai fait l'essai avec l'image trouvée et ceci fonctionne pour IE6, IE7, firefox, opera (= même apparence que pour ta page sous IE7 ) avec ce code:


html, body {
				height:100%;
			}
			body{
				margin:0;
				background-image:url('fond.jpg');
				background-repeat:repeat-x;
				background-position:left bottom;
			}
			#feuille {
				width:800px;
				margin:0 auto;
				height:100%;
				position:relative;
			}
			#contenu {
				width:100%;
				position:absolute;
				bottom:0px;
				border:1px solid;
				height:450px;
			}

pour la hauteur de ton image de fond, 2000px est bien suffisant, car avec mon écran 17 pouces, je ne vois qu'un cm de blanc au-dessus du jaune. Beaucoup de gens ne verront pas la partie en bleu-violet.

rem: je n'ai pas pu garder la position fixed car alors le contenu n'est plus centré.
en l'absence de contenu, je ne sais pas dire si cela va te poser problème ?
Nickel !

C'est exactement ce que je voulais.

NB : L'image faisait bien 3000 pixels. C'était un test, je voulais justement faire apparaître des erreurs si tel était le cas.

Etant totalement css-newbie, pourrais tu m'expliquer où je me suis trompé ?

Encore merci !

Cordialement,
RedRégis
non, je ne pourrais pas vraiment t'expliquer... avec des positions absolues c'est parfois un peu bizarre les réactions des navigateurs : il y a des gens plus savants que moi sur ce forum qui pourraient sans doute t'expliquer (je crois que ça a à voir avec la notion de layout) mais pour ma part je fonctionne expériementalement Smiley smile

bonne continuation redregis !
Bonjour,

1. Positionner en absolu un bloc conteneur en hauteur fixe ça peut être dangereux. En particulier, si la hauteur de la zone de visualisation du navigateur fait moins de 450px le haut du contenu peut être tronqué.

2. Attention aux designs avec un bloc conteneur à la hauteur figée. Ce sont souvent des ratages ergonomiques. Smiley cligne

3. Apparemment, la syntaxe url('./fond.jpg') gêne Firefox. Un simple url(fond.jpg) ira tout aussi bien.

4. Le Doctype est faux. Il indique un fichier de référence qui serait ici:
http://divers.kikankoi.com/css/DTD/xhtml1-transitional.dtd
Scoop: il n'y est pas. Smiley smile