28172 sujets

CSS et mise en forme, CSS3

Masquer une partie d'une div trop longue

Bonjour,

Je viens vers vous pour resoudre un problème de taille Smiley biggrin ou plutôt de hauteur.

J'ai 3 div (colonne_gauche_article, colonne_droite_article, colonne_biens) dans une div (contenu). Je souhaiterais que la hauteur de la div colonne_biens dépende de la div colonne_gauche_article et colonne_biens, qu'elle ne puisse pas être plus grande. 


<div id="contenu">
	<div id="colonne_gauche_article">
		<p id="rub_lien_gauche">Titre rubrique</p>
			<div id="art_lien_gauche"> 
				<ul>
					<li><a href="#">Titre article 1</a></li>
					<li><a href="#">Titre article 2</a></li>
					<li><a href="#">Titre article 3</a></li>
					<li><span class="on">Titre article 4</span></li>
					<li><a href="#">Titre article 5</a></li>
					<li><a href="#">Titre article 6</a></li>
					<li><a href="#">Titre article 7</a></li>
					<li><a href="#">Titre article 8</a></li>
				</ul>
			</div>
		</div>
		<div id="colonne_droite_article">
			<h2 class="italic right">Titre article 4</h2>
			<br />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod lectus in odio porttitor sit amet accumsan est varius. Suspendisse sollicitudin auctor diam eget vehicula. Maecenas eget sodales ligula. Nam laoreet interdum risus, ut iaculis urna porta ut. Mauris egestas pellentesque neque ac accumsan. Quisque rutrum pellentesque orci eget imperdiet. Cras euismod risus ac metus posuere at tempus nibh elementum. Nunc neque diam, euismod id dignissim vitae, porttitor quis erat. Donec tincidunt, urna quis malesuada sagittis, turpis odio rutrum massa, non hendrerit nisi eros malesuada nisl. Vestibulum egestas est et sapien rhoncus vehicula. Proin eget ligula vel urna egestas faucibus non a velit. Etiam at erat nec neque rhoncus porttitor. Praesent vel vulputate enim. Aenean vitae nunc eu enim sagittis aliquet. Duis a augue nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris sit amet elit quis neque convallis fermentum. Integer quis urna ante.
			</p>
			<p>
				Aenean ullamcorper luctus lorem, id luctus nisi iaculis vel. Nunc vulputate, erat vitae ultrices facilisis, libero eros scelerisque velit, sit amet tempor sapien justo varius arcu. Donec metus tellus, mattis nec tempor nec, sodales id leo. Curabitur fringilla, dui eget vestibulum suscipit, tortor dui rutrum enim, at elementum urna ante placerat metus. Curabitur commodo eleifend ante sed dapibus. Quisque euismod consectetur neque et commodo. Etiam aliquet cursus neque quis fringilla. Maecenas mollis magna porta elit elementum egestas. Nunc non massa dolor, in commodo erat. Vivamus hendrerit tincidunt dapibus.
			</p>
			<p>
				Vestibulum tincidunt malesuada tellus, quis porta massa posuere eget. Aenean pretium fermentum leo, non lacinia odio porta id. Morbi feugiat arcu id tortor vulputate ac elementum nunc auctor. Sed eleifend lacinia risus, at pretium sem vulputate in. Aliquam tincidunt ornare lacinia. Mauris sagittis purus non augue porttitor accumsan. Curabitur pellentesque metus in quam gravida ac dapibus sapien facilisis. Duis dignissim, ligula vel semper rutrum, nisl dolor pharetra sem, id volutpat nunc magna et diam. Cras sollicitudin magna in lacus consequat vitae tristique metus fermentum. Quisque egestas facilisis augue ac vehicula. Pellentesque nec sem sapien, eu interdum odio. Nullam fringilla scelerisque dignissim. Morbi faucibus eros vel turpis commodo dictum. Sed porttitor leo vitae massa porta tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ullamcorper ullamcorper scelerisque. Mauris eu leo vel enim hendrerit vestibulum vitae at justo. Quisque vestibulum facilisis faucibus.
			</p>
			<p>
				Phasellus tempor magna in nisl ultricies pellentesque. Suspendisse potenti. Praesent egestas ullamcorper ligula, blandit cursus dolor gravida id. Phasellus faucibus fermentum mi, at elementum diam aliquet eget. Quisque et lacus at lacus ultrices volutpat a egestas ante. Morbi non leo velit, at gravida diam. Curabitur adipiscing purus nec erat faucibus facilisis. Nullam quis turpis sit amet orci interdum vehicula eu id quam. Integer et dui at sapien laoreet blandit nec tincidunt urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique dapibus nisi, sed aliquam ante pharetra id. Praesent semper volutpat tincidunt. Ut sed enim ac ipsum imperdiet condimentum sed sed sem. Nulla in arcu ac massa sagittis mollis. Morbi dolor sem, imperdiet id rutrum ut, egestas eu elit. Duis enim nisi, gravida nec eleifend tincidunt, iaculis dapibus nunc.
			</p>
			<p>
				Proin elit ligula, eleifend vitae cursus ac, varius consequat arcu. Phasellus ut neque id sapien posuere tristique sit amet ac eros. Morbi id vulputate elit. Sed vitae hendrerit risus. Vestibulum imperdiet odio et lacus posuere sed vestibulum justo interdum. Phasellus eu libero non dolor interdum venenatis. Vestibulum aliquet lorem quis leo posuere dictum. Aliquam in metus non ante auctor sagittis in id dolor. Donec facilisis, massa quis porttitor bibendum, augue ipsum adipiscing justo, vel porta metus massa sit amet magna. Nunc pellentesque ligula sit amet nisl elementum ut ultricies urna lobortis. Maecenas nec ipsum sapien. Praesent ultricies viverra nunc sed egestas.
			</p>			
		</div>
		<div id="colonne_biens">
			<ul>
				<li class="even">
					<img src='local/cache-vignettes/L100xH75/immo11-1-0541e.jpg' width='100' height='75' style='height:75px;width:100px;' />
					Restaurant  <br />
					26<br />
					850000 &#8364;<br />
				</li>			
				<li class="odd">
					<img src='local/cache-vignettes/L100xH72/immo5-2-48a61.jpg' width='100' height='72' style='height:72px;width:100px;' />
					Hotel <br />
					Corse<br />
					35000000 &#8364;<br />
				</li>			
				<li class="even">
					<img src='local/cache-vignettes/L100xH76/immo7-1-ac18f.jpg' width='100' height='76' style='height:76px;width:100px;' />
					Fond de commerce <br />
					34<br />
					300000 &#8364;<br />
				</li>
				<li class="odd">
					<img src='local/cache-vignettes/L100xH67/immo2-1-6de7d.jpg' width='100' height='67' style='height:67px;width:100px;' />
					Maison 150m² <br />
					Gard<br />
					320000 &#8364;<br />
				</li>			
				<li class="even">
					Maison <br />
					10000000 &#8364;<br />
				</li>
				<li class="odd">
					<img src='local/cache-vignettes/L100xH71/immo13-1-7c96b.jpg' width='100' height='71' style='height:71px;width:100px;' />
					Gîtes <br />
					Gard<br />
					350000 &#8364;<br />
				</li>			
				<li class="even">
					<img src='local/cache-vignettes/L100xH75/immo6-1-90edb.jpg' width='100' height='75' style='height:75px;width:100px;' />
					Mas provençal <br />
					Gard<br />
					800000 &#8364;<br />
				</li>			
				<li class="odd">
					<img src='local/cache-vignettes/L100xH86/immo4-1-2675a.jpg' width='100' height='86' style='height:86px;width:100px;' />
					Hotel particulier <br />
					Var<br />
					25000000 &#8364;<br />
				</li>			
				<li class="even">
					<img src='local/cache-vignettes/L100xH75/immo8-3-ed7d8.jpg' width='100' height='75' style='height:75px;width:100px;' />
					Bureau <br />
					30<br />
					250000 &#8364;<br />
				</li>			
				<li class="odd">
					<img src='local/cache-vignettes/L100xH75/immo12-1-cf81b.jpg' width='100' height='75' style='height:75px;width:100px;' />
					Concession automobile <br />
					07<br />
					25000000 &#8364;<br />
				</li>			
				<li class="even">
					<img src='local/cache-vignettes/L100xH99/immo9-1-3ccbf.png' width='100' height='99' style='height:99px;width:100px;' />
					Appartement F3 <br />
					30<br />
					150000 &#8364;<br />
				</li>
				<li class="odd">
					<img src='local/cache-vignettes/L100xH79/immo10-1-6834c.jpg' width='100' height='79' style='height:79px;width:100px;' />
					Chateau St Brice <br />
					30<br />
					45000000 &#8364;<br />
				</li>
				<li class="even">
					<img src='local/cache-vignettes/L100xH75/immo3-1-869fd.jpg' width='100' height='75' style='height:75px;width:100px;' />
					Immeuble 4 étages <br />
					Vaucluse<br />
					1500000 &#8364;<br />
				</li>			
			</ul>
		</div>
	<div class="clear_both"></div>
</div>


Merci pour votre aide
En gros j'ai 3 div (a, b, c). J'en ai une qui affiche un menu (a) à gauche, une qui affiche un texte (b) au centre et une troisième (c) qui affiche des annonces à droite.

La div c j'aimerai qu'elle fasse la même hauteur que la div b. Si par exemple la div b contient 10 lignes et fait donc 200px de hauteur, je voudrais que la div c fasse 200px. Si la div b contient 1000 lignes et fait donc 2000px de hauteur, je souhaiterai que la div c fasse 2000px.

Ma div c contient des annonces et fait par défaut 800px de hauteur, mais je ne souhaiterai afficher que 200px lorsque la colonne b fait 200px de haut.

C'est plus clair ? Smiley ohwell
Modifié par Elwood (02 Sep 2010 - 16:47)
met la 3eme colone en position absolute pour qu'elle sorte du flux de ne joue pas sur la taille du conteneur et comme dit falafel65, cache le overflow avec l'option hidden.



enfin je ne m'y connais pas suffisamment pour garantir que ma solution marchera.. mais c'est comme ça que j'essayerai moi.
exemple de solution (à rajouter le style dans le header) :

<style type=text/css>
*{margin:0;padding:0;}
#contenu{background-color:green;position:absolute;overflow:hidden;width:100%;min-height:200px;}
#colonne_gauche_article{background-color:black;width:200px;position:absolute;height:100%;left:0px;}
#colonne_droite_article{background-color:yellow;margin:0 200px;}
#colonne_biens{background-color:red;position:absolute;top:0px;right:0px;width:200px;height:100%;}
</style>

resultat en ligne :
http://ulb.comli.com/test.html Smiley cligne
http://ulb.comli.com/test2.html (sans contenu au milieu)

edit: j'ai rajouté un "min-height:200px;" au "contenu" pour que ton menu de gauche soit toujours visible même sans contenu au centre.
edit2: problèmes de margin/padding réglés. (j'avais écrit le code sous chrome.. mais le rendu était différent sous firefox et IE)
Modifié par bogs (10 Sep 2010 - 20:17)
Sujet clos
Aller à