28220 sujets

CSS et mise en forme, CSS3

[Divs] Dépendance

Rebonjour !

http://www.rpgamers-fr.com/rpgamers3/

Me revoilà encore avec ce site... Smiley smile
Ce coup-là je tente de faire en sorte que le cadre central ("news du test") soit l'élément qui "étire" le "div conteneur" de manières à ce que le fond suive.
C'est pour du contenu dynamique, ne connaissant pas la hauteur...

Je ne comprend pas, je ne vois pas ce qui bloque, j'ai fais des tonnes de tests... en passant en position relative pour le div central, il se retrouve à babeloued, avec un "léger" bug de fond.

(attention, mon height du div conteneur a une taille fixée, si on passe à "auto", le fond n'existe plus. Smiley smile )

D'ailleurs, si je décommente le div "droite", qui est tout en bas de code, lui étire le div conteneur, bizarrement... O_o 



#conteneur {
	background-color:#DDDDDD;
	position:relative;
	width:980px;
	/*height:2000px;*/
	margin:auto;
	margin-top:0.8em;
}

#ban {
	width:100%;
	height:237px;
	background-image:url(images/accueil.jpg);
	background-repeat:no-repeat;
	background-position:top;
}

#centre {
	position:absolute;
	top:266px;
	left:209px;
	width:772px;
}

#menu { 
	position:absolute;
	top:266px;
	width:180px;
}

#droite {}


Si vous me trouvez la soluce, je serais obligé de vous remercier 1000 fois !
Modifié par Nigel (13 Oct 2005 - 20:01)
Administrateur
Hmm ça ne te choque peut-être pas, mais moi si : les mots "bonjour", "merci", "au revoir" sont des mots courtois qui donnent envie d'aider.
Ici, nous n'avons pas honte de les utiliser.
Hmm, pardon effectivement, je n'en suis pas à mon premier message/réponse sur ce forum aujourd'hui, alors j'en oublie les formules... Smiley ohwell
Je me rattrape de suite !


Bien, Je trouve ça un peu barbare de filer un lien direct, du coup je me suis occupé dans le train à schématiser la problématique, voici:


<div style="width:800px; background-color:#cccccc; margin-left:auto; margin-right:auto; position:relative; min-height:200px; height:200px;">
	<div style="position:relative; height:100px;"></div>
	<div style="position:absolute; left:0px; top:110px; width:100px; "><ul><li><li></li></li></ul></div>
	<div style="position:relative; width:600px; left:110px; top:8px;">
		<p>lkjbfckjvb</p>
		<p>l,dsn vkjdvb kjdb </p>
		<p>kjbvfkjvbdkjbv</p>eqiugv iuvgs i vgv siuvg dsiuvg viug viu gvivg <br> oefgue iugeziufgfiu
	</div>
	<div style="position:absolute; width:80px; left:720px; height:100px; top:110px; "></div>
</div>


Voyez, l'idée est de faire en sorte que le div central étire le fond, tout en gardant une hauteur minimale à celui-ci.
J'ai beau tordre ce code dans tous les sens, je ne vois que des bugs et des bugs ou de l'incompréhension... Smiley ohwell

C'est une structure assez complexe, et pour un site dynamique.. Smiley smile
Je crois que ce problème est fréquemment rencontré, pourtant je n'ai pas vu de demandes à ce niveau sur Alsa.

On ne peut se rendre compte des divers soucis que je rencontre qu'une fois copié-collé dans un éditeur...
En tout cas, merci de bien vouloir prendre le temps de jouer un peu au puzzle avec moi ! Smiley langue

PS: Mince, il manque un systeme d'indentation... ou bien j'ai pas vu
PS2: Ce serait pas mal un petit tuto sur un prochain livre, sur cette problématique, non ? Smiley smile
Modifié par Nigel (13 Oct 2005 - 20:33)
Sujet clos
Aller à