ugrás a tartalomhoz

Lista pozícionálása

superhero · 2011. Jún. 21. (K), 19.45
Sziasztok!
<html>
<head>
<style>
#lista {width: 900px;}
ul li {list-style-type: none; width: 250px; float: left; padding: 10px;}
</style>
<title>Lista</title>
</head>
<body>

	<div id="lista">
		<ul>
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum viverra mauris sit amet consectetur. Praesent placerat luctus sem iaculis ornare. Fusce a velit vitae velit porta malesuada. Mauris a massa ipsum. Aliquam erat volutpat. In hac habitasse platea dictumst. Etiam elementum massa ac nisl aliquam in vulputate eros auctor. Fusce sapien nulla, molestie at fermentum in, consectetur ut velit. Sed bibendum vestibulum luctus. Aliquam molestie posuere tortor, id facilisis urna vulputate interdum. Aliquam ante lacus, suscipit sit amet scelerisque vel, ultricies vel dui. Sed semper velit id dui malesuada consequat. </li>
		<li>Phasellus augue purus, tincidunt in pretium ut, accumsan ac leo. Cras nisi lectus, convallis in auctor vel, commodo eget magna. In viverra leo vitae mi tincidunt commodo. Nulla vestibulum aliquet egestas. Sed non ante et lectus mattis ullamcorper et ac dolor. Nam lectus mauris, ultrices eget rhoncus sed, tempus eu lorem. Integer vitae orci justo, a sollicitudin urna. Etiam sed diam et tellus feugiat pellentesque. Donec egestas quam in nibh pellentesque vitae feugiat odio vulputate. Nullam id sapien quis leo pellentesque fermentum. Donec id dui mi, quis ullamcorper est. Aliquam erat volutpat. Suspendisse potenti. Proin mi eros, facilisis non tincidunt vitae, congue in metus. Donec vulputate leo eu diam condimentum sagittis. Mauris condimentum diam et metus hendrerit eleifend. Nam sagittis augue vitae augue dictum sed mollis tellus mattis. </li>
		<li>Morbi sodales, magna vel tristique blandit, urna nibh vestibulum sapien, sit amet ultricies velit ante et tellus. Aenean ac mauris quam, eu vehicula mauris. Nam eget nisl ligula. Vivamus arcu magna, suscipit in lobortis ac, hendrerit non diam. Quisque mollis tincidunt sapien, eget convallis est dapibus eu. Aliquam mattis tristique odio, vitae sollicitudin libero pharetra quis. In sit amet feugiat nisi. Suspendisse porta ante eu leo congue rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse est arcu, cursus nec consequat at, consectetur in justo. Maecenas in est vel sapien tincidunt fringilla eu ac eros. Vestibulum pellentesque pharetra dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Vestibulum id ipsum sit amet felis bibendum imperdiet. Nam fringilla orci nec dolor aliquam eleifend. Sed eu nunc quam. Sed eu odio mauris, quis dapibus mi. Sed consectetur vestibulum aliquet. Maecenas scelerisque, nisl ut tincidunt feugiat, metus magna tempor massa, in faucibus odio justo vitae risus. </li>
		<li>Cras hendrerit tristique sapien vel vehicula. Integer fermentum, leo vel hendrerit fermentum, nisi dui elementum sapien, eget ornare mauris augue id justo. Donec tincidunt pretium varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non mi risus, pellentesque ultrices elit. Nulla viverra convallis neque. In felis ante, fermentum eget sodales sit amet, tempor at dolor. Nam odio turpis, varius eu tristique non, tristique ac libero. Suspendisse pellentesque nisl quis elit volutpat volutpat. Vivamus quis vulputate augue. Quisque imperdiet elit ac lacus dictum quis ultrices metus fringilla. Cras bibendum posuere ante, vel tristique ligula congue nec. Nulla eleifend mollis ante id volutpat. Praesent sed turpis porttitor turpis suscipit ultrices ut nec metus. </li>
		<li>Aenean accumsan erat dolor. Morbi iaculis eros et ligula dictum quis vehicula lectus hendrerit. Vestibulum tincidunt aliquet venenatis. Nunc tristique faucibus elit quis dapibus. Morbi non lacus sem, congue lobortis purus. Suspendisse potenti. Integer semper metus velit. Praesent eget elit lectus. Donec erat nisi, semper sed hendrerit ac, convallis a dolor. Etiam sollicitudin arcu at ante consequat gravida. Mauris congue auctor tortor, quis tristique justo dignissim id. Nulla rutrum blandit pharetra. Integer iaculis blandit ultricies. </li>
		</ul>
	</div>
	
</body>
</html>
Biztos pofonegyszerű a megoldás, de gondolkodóba ejtett a dolog. Az <ul> <li> adott, viszont nem szeretném, ha lenne egy sortörés a felsorolás alsó és felső tartalma között. Magyarul: a li elemek alatt mondjuk pl. csak 10px padding legyen, és ne csússzon el.
‹ jQuery modalok egymáson textare <br> ›
 ■
1

nem értem

lacy · 2011. Jún. 21. (K), 19.56
Nem értem mit szeretnél, a li elemek alsó paddingja 10px, ezt te állítottad be.
2

de

superhero · 2011. Jún. 21. (K), 20.20
"igazodjon" a tartalomhoz, a felső és alsó oszlopok tartalma, szóval ne a 3. "oszlop" határozza meg az alsó "oszlopok" elhelyezkedését, hanem az első kettő kerüljön fel, pl. 10px-re a lista első két eleme alá
bár elképzelhető, hogy ilyet nem lehet divekkel vagy li elemekkel :)
3

jQuery Masonry

Blintux · 2011. Jún. 21. (K), 20.44
Nem tudom megoldható-e simán CSS-el. Ha igen, akkor sem biztos, hogy minden böngészőben működni fog...
Viszont erre a problémára létezik egy nagyon jó jQuery kiegészítés: jQuery Masonry
4

ezaz

superhero · 2011. Jún. 21. (K), 21.06
Köszi nagyon a helpet! Valahogy én is csak a jQuery megoldásra tippeltem volna.
CSS3 is megoldás, csak nem IE kompatibilis.
5

Igen, ezért ajánlottam a

Blintux · 2011. Jún. 21. (K), 21.09
Igen, ezért ajánlottam a jQueryt. Azzal tuti nem lesz gond IE alatt sem :)