28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

En ces chaleurs estivales, je ne pensais pas me prendre le chou avec une chose qui de loin me paraissait si simple ... Smiley sweatdrop

Je m'explique : je suis en train de réaliser un site dans lequel je dois placer une image de fond fixe de 700 px de hauteur qui ne doit pas s'occuper du contenu. Ce qui s'avère être une véritable galère. Le bloc contenu doit aussi être précisement positionné car il se marie avec le fond.

upload/2976-maquette.jpg

J'ai réussi à positionner mes éléments d'une manière peu élégante à base de relatif :


#fond {
	width: 1000px;
	margin: 0 auto;
	background: transparent url(images/fond.jpg) top left no-repeat;
	min-height: 600px;
} 

#titre {
	position: relative;
	display: block;
	left: 726px;
	text-indent: -9999px;
}


#navigation {

	position: relative;
}

#contenu {
	
	background: #fff url(images/fond_contenu.jpg) top no-repeat;
	border: 1px solid #c1c1c1;
	width: 664px;
	margin-top: 108px;
	margin-left: 334px;
	margin-bottom: 50px;
}

etc...


J'avais aussi pensé à mettre le fond dans une div en position: absolute mais ca posera toujours problème vu qu'il devra se réferencer au body.

Est-ce que quelqu'un voit une solution plus élégante et peut être plus simple que la mienne ?

Merci d'avance pour votre aide
Modifié par SugataSan (31 Jul 2008 - 15:51)
Coucou

Tu n'aurais pas un peu de HTML pour aller avec, voire même une page en ligne ?

J'ai un peu de mal à cerner ton problème, mais pourquoi ne pas mettre ton image de fond directement dans les propriétés du body ?
Bonjour,

Merci tout d'abord de ton aide. Tu as raison je vais mettre ma maquette en ligne ce qui sera plus simple pour cerner le problème.

Si je ne mets pas l'image de fond dans le body, c'est parce que celle-ci se décalera avec le contenu si celui-ci n'est pas sorti du flux. Par exemple si je décale le titre de 20px (ma premiere balise dans le body), l'image de fond se décalera aussi de 20px.

J'espère que c'est plus clair Smiley lol
Modifié par SugataSan (28 Jul 2008 - 20:07)