html css sloupce

23. 6. 2011 17:19:00

Ted se pro zmenu necham nakopat do zadku ja :)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		
		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/cupertino/jquery-ui.css" />
		<style>
			*{padding: 0; margin: 0}
			body{font: 0.8em/1.5 sans-serif; text-align: center}
			body *{padding: 0; margin: 0; display: inline-block; box-sizing: border-box; -moz-box-sizing: border-box; vertical-align: top; text-align: left; word-spacing: 0.05em; overflow: hidden}

/* "block elements" */
			p, img, h1, h2, h3, h4, h5, h6{width: 100%; height: auto; margin-top: 1.25em}
			
			.columns{width: 100%; white-space-collapse: discard; word-spacing: -1em}
			.columns > *{width: 33.33%; margin: 0}
			
			.columns p{padding: 0 0.5em 0.5em 0}
		
			body{padding: 5% 15%}
		</style>

<h2>Text</h2>
		<div class="columns">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo dui in magna fringilla feugiat. Mauris pellentesque est eu quam convallis rutrum. Proin diam tellus, bibendum sed facilisis et, elementum non sapien. Sed tempor sagittis lorem ut lobortis. Pellentesque vitae massa sit amet leo aliquam imperdiet. Curabitur in justo sit amet justo lobortis pellentesque nec at turpis. Donec leo est, vehicula eget bibendum non, aliquet nec lacus. Nullam placerat pellentesque ligula vitae ornare. Aenean mattis, nibh molestie hendrerit adipiscing, nibh sapien lobortis eros, vel adipiscing dolor lorem sed orci. Ut non leo lectus. Donec et diam nunc. Morbi sed mauris sed ante dignissim posuere.
			</p>
			<p>
				Integer neque quam, blandit at tempor vitae, porttitor nec nunc. Mauris id ipsum at orci vulputate aliquet. Duis a diam et quam semper rutrum. Nulla sit amet risus lorem. Curabitur sed quam libero, eget congue quam. Sed adipiscing, risus posuere scelerisque viverra, ante enim tincidunt sapien, id rhoncus dui odio vel mauris. Vivamus id lacus metus. Donec tempor justo et odio lacinia sit amet auctor lectus auctor. Suspendisse aliquet bibendum tristique. Sed quis sapien ut massa tristique tristique non ac risus. Donec pharetra diam eu nunc ullamcorper adipiscing. Vivamus iaculis commodo diam eu auctor. Duis a velit a quam mollis imperdiet ac non enim. Nunc vitae purus a mauris hendrerit tincidunt ac nec tellus.
			</p>

<p>
				Donec eu lorem erat, quis facilisis mauris. Phasellus lacus risus, cursus ac ultricies ut, laoreet at nisi. Nunc hendrerit felis in magna porta rutrum. Nam luctus tempus eros ut cursus. Curabitur quam nulla, ultrices a faucibus nec, dignissim sit amet magna. Praesent pellentesque urna eu odio congue feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris a laoreet nisi. Integer neque sem, posuere vel consectetur sed, blandit et massa. Vestibulum consequat ornare imperdiet. Vestibulum quis purus nec quam tempus lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus enim tortor, egestas nec feugiat ac, mattis ac sem. Fusce vitae libero nunc.
			</p>

<p>
				Vivamus non eros quis turpis bibendum dictum. Sed mollis turpis quis orci porta id imperdiet dui viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sed mi vel ante hendrerit condimentum a et augue. Duis quis malesuada felis. Aenean sit amet ipsum quis tellus mollis consectetur sit amet quis libero. In ornare posuere vehicula. Fusce nec ipsum tellus, eu malesuada est. Maecenas lacinia rhoncus erat, at blandit felis molestie a. Ut accumsan elementum iaculis. Fusce erat libero, pretium et volutpat ac, ornare ut nisl.
			</p>

<p>
				Aliquam at leo enim, quis pharetra nunc. Curabitur non ante diam, nec blandit mauris. Nulla semper ullamcorper lectus vitae pretium. Nullam congue ultrices luctus. Curabitur blandit neque vel tortor dapibus ultrices. Mauris ultricies fermentum arcu, a viverra mi commodo vel. Integer lobortis, nisi id ultrices hendrerit, mi nunc consequat nulla, eget convallis diam velit et felis. Praesent lacinia, orci a facilisis varius, leo arcu posuere purus, in placerat lectus erat nec risus. Sed vestibulum nunc sed arcu varius sed sollicitudin sem lobortis.
			</p>
		</div>
	</body>
</html>

je tam par zbytecnosti (jquery, jqueryui), ktere mam v kazdem svem "prototypu", tak to proste ignorujte :)

zajimal by me nazor na vyuziti box-sizing: border-box a display: inline-block - v kombinaci s vymazem "white-space"

prijde mi to jako lepsi reseni - minimalne pro "constraint" vzhled - jako napriklad 3 obrazky/sloupce na radek, zarovnane nahoru, a dejmetomu treba i s 5px rameckem - jde toho vubec dosahnout pomoci floatu? :)

k nahlednuti zde: http://jsbin.com/ehoyi5/2

(zkuste zmensovat a zvetsovat okno)

melo by to slapat v mozille, opere a ie8, jinde jsem to netestoval...

EDIT: jeste je tady jedna verze, kde je krasne videt, co vsechno se s tim da delat (klikejte na obrazky a na sloupce) - http://jsbin.com/anexa4

je tam taky jeden quick-fix, protoze se jqueryui nechova presne jak bych si pral, kdo na to prijde, dostane bludistaka ;)

23. 6. 2011 17:19:00

https://webtrh.cz/diskuse/html-css-sloupce#reply648441

Kamil Tomšík

(3 hodnocení)

24. 6. 2011 23:24:12

140 shlednuti a nikdo nema nazor? ja vas nekousnu... :)

24. 6. 2011 23:24:12

https://webtrh.cz/diskuse/html-css-sloupce#reply648440

(20 hodnocení)

24. 6. 2011 23:33:52

Například já nemůžu mít názor, protože nejsem primárně kodér a prostě si to netroufnu hodnotit :)

24. 6. 2011 23:33:52

https://webtrh.cz/diskuse/html-css-sloupce#reply648439

Kamil Tomšík

(3 hodnocení)

24. 6. 2011 23:55:09

Ale muzes - a mas, tak se nestyd ;)

float a nebo inline-block? http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

box-sizing: box-border a nebo content-box? http://www.quirksmode.org/css/box.html

jedinej problem je momentalne kompatibilita - musi se psat navic jeste -moz-box-sizing pro firefox a white-space-collapse taky neni vsude - musi se to obchazet pomoci word-spacing: -1em + globalnim word-spacing, porad to ale ve vysledku IMHO vychazi lip nez "prazdna" linka za vsemi plovoucimi prvky - a navic mam pocit, ze floaty nikdy nebyly navrzene na to, na co se pouzivaji...

v podstate jsem uz rozhodly a na pristim projektu pujdu touhle cestou, ale zajima me i nazor ostatnich...

24. 6. 2011 23:55:09

https://webtrh.cz/diskuse/html-css-sloupce#reply648438

Lukenzi

30. 6. 2011 22:35:45

Tohle řešení se mi moc nelíbí, třeba právě z toho důvodu že v prohlížečích které nejsou zrovna moc rozšířené to může ve výsledku vypadat jakkoliv. Například když se na ukázku podívám z mobilu je to děs - sloupečky jen o jednom slově které se zalamují do šíleně dlouhé nudle...

Takhle v rychlosti mě napadá nebylo by lepší nastavit nějakou minimální šířku celé stránky a pak sloupečkům nastavit 33% šířky a zarovnat doleva? Bude to vypadat stejně snad v každém prohlížeči a i staré mobily "pochopí" a sloupečky zobrazí pod sebou v uspokojivé šířce...anebo moc přemýšlím :)

30. 6. 2011 22:35:45

https://webtrh.cz/diskuse/html-css-sloupce#reply648437

Kamil Tomšík

(3 hodnocení)

30. 6. 2011 22:56:54

diky za odezvu, mobily jsou otazka - nejlepsi je asi nabidnout uplne jiny layout. pokud jsem to spravne pochopil, tak to nefunguje hlavne kvuli male sirce displeje, je to tak?

nejsem si jisty, jak moc si vubec muzeme u mobilu vyskakovat - jak vlastne mobily zvladaji floaty a relativne-absolutni pozicovani?

30. 6. 2011 22:56:54

https://webtrh.cz/diskuse/html-css-sloupce#reply648436

Lukenzi

1. 7. 2011 11:11:47

Napsal vedouci;671968
diky za odezvu, mobily jsou otazka - nejlepsi je asi nabidnout uplne jiny layout. pokud jsem to spravne pochopil, tak to nefunguje hlavne kvuli male sirce displeje, je to tak?
nejsem si jisty, jak moc si vubec muzeme u mobilu vyskakovat - jak vlastne mobily zvladaji floaty a relativne-absolutni pozicovani?

Ano problém je v právě v malé šířce displeje, co jsem zkoušel tak layout si zachovává stejný tedy tři sloupečky, ale o minimální šířce. Pak to tedy vypadá tak že tři sloupečky jsou sice dodrženy, ale v každém je vždy na jednom řádku třeba pouze jedno slovo. Dobrá zpráva je ale ta, že uvedený kód striktně dodržují :)

Co se týče toho zvládání pozicování...to je těžký, třeba když se na některé stránky podívám z moc moc starého mobilu předtím co jsem je našel přes google tak je dostanu v nějaké osekané verzi pro mobil (dělá jen google co jsem si všiml) takže tam to asi nijak ovlivnit nejde, ale novější a zvlášť "chytré" mobily zobrazují stránky řekl bych skoro stejně jako kterýkoliv jiný prohlížeč (samozřejmě až na některé detaily). Takže pokud se použije nějaké validní a hlavně jednoduché řešení mobily by neměli mít žádný problém, ten nastává až když se začnou používat nejrůznější hacky a "složitosti".

Moc zkušeností s tím ale nemám, jen nedávno jsem právě zkoušel pár svých webíků i v mobilech tak mě to trochu zaujalo...

1. 7. 2011 11:11:47

https://webtrh.cz/diskuse/html-css-sloupce#reply648435

Kamil Tomšík

(3 hodnocení)

1. 7. 2011 11:31:27

nej reseni by mi timpadem asi prislo ty sloupecky javascriptem zrusit, pokud je moc mala sirka displeje. je to sice nad ramec prikladu, ale diky za zajimavou pripominku

1. 7. 2011 11:31:27

https://webtrh.cz/diskuse/html-css-sloupce#reply648434

Pro odpověď se přihlašte.

Přihlásit