Positionnement DIV

Bonjour à tous,

Alors tout d'abord pour présenter ma situation voilà ce que j'essaye de réaliser :

http://kinay71.free.fr/free/test.jpg

Vous pouvez voir donc ma banière en haut, à gauche et à droite un fond, et le contenu (du texte) par dessus les fonds. L'objectif étant que
mon fond droite et fond gauche soit, quelque soit la résolution à droite et à gauche. Ensuite que mon contenu soit également, quelque soit la résolution, centrer.

Comme vous pouvez le voir ci-dessous, pour la superposition j'ai utiliser z-index pour la superposition de <div>. mais je pense que entre mes :
-position
-float
-z-index
- et margin et padding auto

--> et bien ca doit faire des "conflits" bref je voudrais pouvoir régler:
mes "height" de mes fond droite et gauche à 100% et je ne peu pas, lorsque je rentre height:100%, l'image n'apparait pas alors que si je fixe un height:100px; par exemple c'est ok. Pour résumer je n'arrive pas à caler mon fond droit à droite en mettant son height à 100% et en lui définissant son z-index....

si je n'est pas été assez précis excusez moi et poser moi vos questions, je suis vraiment bloquer et j'ai besoin d'un coup d'main !!

merci d'avance

Yannick


CODE

css

#fond_g{
	position:absolute;
	z-index:30;
	width:405px;
	height:100%;
	background-image:url("img/fond_g.png");
}
	
#fond_d{
	position:relative;
		z-index:20;
	float:right;
	width:440px;
	height:100%;
	background-image:url("img/fond_d.png");
}

.text{
	position:relative;
		z-index:10;
	width:550px;
	margin:auto;
	margin-top:10px;
	padding:auto;
	padding-top:10px;
	padding-left:10px;
	padding-bottom:10px;
	color:#000;
	font-size:14px;
	background:url("img/fond_texte.png");
	border:2px solid #646262;
}

html

<div id="fond_g"></div>
<div id="fond_d"></div>
<div class="text">Bienvenue à toutes et à tous !</div>

Modifié par kinay (24 Jan 2008 - 17:10)

bonjour
avec les z-index que tu as mis tes fonds droite et gauche sont situés au-dessus de div.text

si tu peux met plutôt un lien, c'est plus facile pour tester avec les images

a écrit :
avec les z-index que tu as mis tes fonds droite et gauche sont situés au-dessus de div.text

Oui c'est normal c'est mon objectif !!

a écrit :
si tu peux met plutôt un lien, c'est plus facile pour tester avec les images

tu veut voir mon problème c ca ? --> http://kinay71.free.fr/webkinay

j'ai mis des border rouge pour que vous voyez le problème !! le fond droite n'apparait pas ??? alors que qi je fixe son height il apparait ...
Modifié par kinay (24 Jan 2008 - 17:44)

ce n'est pas ce que tu as dit :
....le contenu (du texte) par dessus les fonds

c'est d'ailleurs plus logique

je regarde...

oups désoled ... erreur de ma part, je modifi ca de suite ....
Modifié par kinay (24 Jan 2008 - 17:47)

J'ai oublié de préciser que il n'est je pense présentable que sous Firefox ... désolé mais entre png et autre détail que je n'est pas encore pris le temps de voir, et bien il doit passer correctement que sous Firefox .. dsl

voir ici: http://www.selenwebcreation.be/kinay/index.html

ne copie pas que le css car j'ai dû corriger l'html aussi.

Merci mais ca ne résoud pas vraiment mon problème !! car les images sont insérées directement dans la div, et non dans la css. et d'autre part la valeur, le height des fond est fixé alors que mon but est que la hauteur s'adapte en fonction du contenu, qu'elle ne soit pas fixe.

Désolé mais merci beaucoup tout de même pour le dérangement !
Modifié par kinay (25 Jan 2008 - 09:01)

-vu que ton image est à dimensions déterminées, tu ne peux pas la rendre extensible : la limite est la hauteur de l'image, en l'occurence 1332 px; ou alors trouve une image qui peut se répéter

-ce n'est pas gênant que l'image soit dans une div au lieu de background sauf si tu dois y mettre du texte, mais cela tu n'as pas précisé

-les pages trop hautes sont à proscrire: les gens n'aiment pas trop devoir scroller indéfiniment, donc 1332px ça me semble déjà pas mal

a écrit :
-vu que ton image est à dimensions déterminées, tu ne peux pas la rendre extensible : la limite est la hauteur de l'image, en l'occurence 1332 px; ou alors trouve une image qui peut se répéter

--> ben c'est une image qui se répète, fin c'est l'objectif .. mais il faudrait que je réduise sa taille oui ca serai mieu !

a écrit :
-ce n'est pas gênant que l'image soit dans une div au lieu de background sauf si tu dois y mettre du texte, mais cela tu n'as pas précisé

--> effectivement je l'avai pas précisé mais oui elle doit pouvoit me permettre de rajouter des élément par dessus .. mais à la limitte j'utilise d'autre div identique à celle de mon contenu !

Bref j'aimerai bien pouvoir avoir la même chose que tu m'a mis en place (merci encore) mais avec une image que je répéte .. donc un 100% ... ce qui me pose problème !!!

j'suis désolé d'insister


merci

je ne vois pas... quelqu'un d'autre peut-être ?

bonsoir

en imbriquant les div :

<div id="fond_g">
    <div class=" text   fond_d ">div qui etire l'autre.</div>
</div>

dans fong_g et fond_d , l'image de fond répétée en hauteur respectivement a droite et a gauche .

ne reste plus éventuellement a déterminer une hauteur minimale si besoin



GC
Modifié par gcyrillus (25 Jan 2008 - 22:38)

Le problème avec les % c'est que c'est des % de quelque chose, or le float, de même que la position absolue sort l'élément du flux pour le calcul de la hauteur, donc tu ne peux pas te référer à la hauteur de l'élément en absolu pour le calcul d'une autre hauteur (celle des fonds gauche et droit)

Comme tu es obligé d'avoir une position absolue pour .text, tu es obligé de donner une valeur à la hauteur des fonds (ou c'est le contenu qui détermine sa hauteur.

Ici j'ai fixé la hauteur à 200em, pour dire quelque chose, ce n'est pas un monde de la fixer en fonction de la hauteur de ton texte central. S'il y a plus de contenu dans les fonds que dans la partie centrale, la page prend alors la hauteur des fonds (et l'image se répète)

http://www.selenwebcreation.be/kinay/index.html

Ok merci beaucoup, je prend note. Merci pour la réponse et les exemples !

Bonne continuation !

@+

bonjour kinay

me revoici avec une nouvelle solution qui m'est venue après avoir travaillé sur un autre cas... plus élégante à mon goût.
ici pas besoin de fixer la hauteur des fonds et plus de position absolute : la hauteur totale dépend de la hauteur du texte central.

à toi de choisir !

http://www.selenwebcreation.be/kinay/index1.html
(rem: attention j'ai modifié le nom du css pour pouvoir garder les deux versions)

Ok merci beacoup je regarde ce que je peut en faire et je tient au courant !

J'ai juste une question, comment faire pour que mon menu prenne toute la largeur de la page comme défini au départ ?

Merci en tous les cas encore une fois du temps passé dessus !!

@bientot
Modifié par kinay (29 Jan 2008 - 11:05)

kinay a écrit :

J'ai juste une question, comment faire pour que mon menu prenne toute la largeur de la page comme défini au départ ?

tu veux dire le fond du menu ?
c'est ici: dans menu.css

#menu{
	background:#fff url(img/button1.gif);
	height:36px;
	border-bottom:1px solid #444;
}
ul.menu1 {
	width:418px;
	margin:auto;
	list-style:none; 
	/*border:1px solid #000; 
	border-width:0 1px; */
}
.menu1 li {float:left;}

et dans le code html, tu encadres ta liste ul par <div id="menu"> juste avant <ul class="menu1"> et </div> juste après </ul>

j'ai trouvé mieux d'enlever la bordure verticale à gauche et à droite, j'ai laissé entre /* */ pour que tu puisses garder si tu préfères.

ok merci beaucoup encore une fois, je test tout ca et je tient au courant !

bonne continuation

@+

bonsoir,

Il n'est peut-etre pas necessaire d'ajouter un conteneur,

Dans opera , on pourrait faire :

<ul>
<li><a href="#" title="#">lien fixe ou fluide </a></li>
<li><a href="#" title="#">lien fixe ou fluide </a></li>
<li><a href="#" title="#">lien fixe ou fluide </a></li>
<li><a href="#" title="#">lien fixe ou fluide </a></li>
</ul>

et en css (legerement stylé):

ul {width:100%;text-align:center;margin:0;padding:0;}
li {display:inline;}
a {display:inline-block;width:100px;height:30px;border:2px outset}
a:hover {background:lightgray;border:2px inset;}

sauf que ça ne fonctionne pas sur Firefox !

Une alternative , le display:table-cell ; detournée pour simulé inline-block dans Firefox .

Il suffit d'inserer devant le display:inline-block; (inconnue de firefox) un display:table-cell; et le résultat devient a peu prés identique dans la majorité des navigateur actuels.
Firefox ne comprenant pas la deuxieme regle display , il utilise donc la premiere .
le code devient:

ul {width:100%;text-align:center;}
li {display:inline;}
a {
display:table-cell;/* a l'attention de firefox */
display:inline-block;
width:100px;
height:30px;
border:2px outset
}
a:hover {background:lightgray;border:2px inset;}

@ verdan , je vois que tu as opté pour l'imbrication des divs comme je le proposait , c'est le plus simple a mon avis .

j'ai repris ton code (copie de ta demo avec le menu centré , façon inline-block)

http://gcyrillus.free.fr/essai/kinayindex1.html

... reste le probleme des png opaque que IE6 ne gere pas tel quel

bonne continuation
Modifié par gcyrillus (30 Jan 2008 - 00:41)

Hé bien encore un merci ...

Normalement tout est bon pour moi côté code. J'ai juste encore une petite question, pour le problème du png avec IE, y-a-il une alternative ? Le gif ferait-il l'affaire ? Ou suis-je obligé d'utiliser le jpg pour assurer une compatibilité avec les navigateurs ?

Merci encore

@+