Risorse CSS: layout

  • CSS
  • Gabriele Romanato
Risorse CSS: layout

Concludiamo la nostra rassegna di risorse CSS con delle risorse interamente dedicate alla realizzazione di layout con i CSS. Vengono spiegate in dettaglio le più diffuse tecniche per creare tali layout e vengono forniti numerosissimi esempi in tal senso.

CSS Layouts

  1. Layout Building Blocks
  2. CSS Layout Starting Points
  3. Zeroing page margins
  4. CSS Positioning
  5. Align Elements Left and Right
  6. CSS Positioning Properties At-A-Glance Guide
  7. CSS Mastery: Page Layout
  8. CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns
  9. An Overview of Current CSS Layout Techniques
  10. Water vs. Stone - The reality of Fluid layouts
  11. Fixed vs. Fluid
  12. Death of Flexible Width Designs
  13. Columns & Grids
  14. Flexible Layouts with CSS Positioning
  15. Elastic Design
  16. Elastic Design Demonstration
  17. Elastic Faux Columns
  18. Fixed or fluid width? Elastic!
  19. Creating Elastic Layouts with the em Unit
  20. About fluid and fixed width layouts
  21. The Theory of CSS Column Design: Source Order
  22. The Theory of CSS Column Design: Semantic Construction
  23. The Practice of CSS Column Design: Boxes in Columns
  24. The Practice of CSS Column Design: Custom Corners and Sides
  25. Resolution vs. browser size vs. fixed or adaptive width
  26. Resolution dependent style switching
  27. One clean HTML markup, many layouts...
  28. Creating Liquid Faux Columns
  29. Creating Liquid Faux Columns
  30. Faux Columns for Liquid Layouts
  31. Faux Columns
  32. Exploring Footers
  33. Creating Liquid Layouts with Negative Margins
  34. CSS Negative Margins Algebra
  35. Create Pages that Fill the Browser with CSS
  36. Multiple Column CSS Layouts that Fill the Browser Window
  37. Full Height CSS Layouts with Footers
  38. Big, Stark & Chunky
  39. Zoom layout
  40. Zoom layouts
  41. Zoom the Web: The problem of giant fonts
  42. Zoom Layout Starter Kit
  43. Inverted zoom: designing for low vision
  44. Zoom for Low Vision
  45. Zooming the Web
  46. High accessibility, high design
  47. ZoomLayouts
  48. Percentage Plus Pixel Sizing
  49. Percentage PLUS pixel widths
  50. Bye-bye to boring page footers
  51. Flexible fixed layouts
  52. Liquid layouts the easy way
  53. Liquid layouts using CSS - the joy, the pain, the tears
  54. Resolution dependent layout
  55. Resolution dependent layout update
  56. Dynamic Resolution Dependent Layouts
  57. Nested divs are not evil
  58. 3 Column Layouts – A Different Approach
  59. A simple introduction to 3 column layouts
  60. Elastic fantastic, or...
  61. Faux Borders and Pseudo Table Effect
  62. Switchy McLayout: An Adaptive Layout Technique
  63. One clean HTML markup, many layouts...
  64. 3 columns fluid layout
  65. Changingman
  66. Changingman layout
  67. Designing for: Karova.com
  68. 3 columns fluid layout
  69. Layout Gala
  70. Simple 2 column CSS layout
  71. CSS Layouts A tableless, CSS-based, liquid, three-column layout
  72. Preparing for Widescreen
  73. Column-swapping: an attempt for two columns with equal height
  74. Building a page template in CSS - a step by step tutorial
  75. Stackable CSS Columns
  76. footerStickAlt
  77. footerStickAlt: A more robust method of positioning a footer
  78. Colored boxes - one method of building full CSS layouts
  79. More Than Just a Footer
  80. Two columns with color
  81. 3 columns, header and footer, NN4
  82. 2 columns, header and footer, NN4
  83. Floating thumbnails
  84. CSS-P 3box
  85. CSS-P 2box
  86. 3 columns, the holy grail
  87. 2 columns, ALA style
  88. 4 columns, all fluid
  89. 3 columns, all fluid
  90. Static width and centered
  91. Nested float
  92. Two Columns - Left Menu
  93. Two Columns - Right Menu
  94. Three Columns - Flanking Menus
  95. Skidoo Redux
  96. Skidoo Redux Two Columns
  97. Skidoo Redux Fixed Width
  98. Skidoo Redux Pixel Width Columns
  99. Skidoo Redux Percent Width Cols
  100. Tank!
  101. Skidoo Too
  102. Skidoo Too Border Into Masthead
  103. Skidoo Too Two Columns - Left
  104. Skidoo Too Two Columns - Right
  105. Skidoo Too Split Masthead 1
  106. Skidoo Too Split Masthead 2
  107. Skidoo Too: Gargoyles
  108. Skidoo
  109. Skidoo (Lean)
  110. Skidoo Two Columns Left
  111. Skidoo 2 Columns Right
  112. Skidoo Fixed Width
  113. Skidoo Fluid Fixed Width
  114. Skidoo Detached Masthead
  115. Skidoo Border Into Masthead
  116. Skidoo Border Marginal Notes
  117. Skidoo Gutterless
  118. Plaine
  119. Nausicaä
  120. Bob
  121. Ruthsarian Layouts - 2col.v5
  122. Three Columns With Footer
  123. Ruthsarian Layouts - 2col.colors.beta
  124. EmulatingFixedPositioning
  125. GhostInTheBox
  126. Position:fixed for Internet Explorer
  127. Frames without frames
  128. How to Create a Frames Layout with CSS
  129. CSS frames
  130. CSS Frame - The Holy Grill A method of emulating a 'frame' layout
  131. position:fixed; (fixed)Position fixed for Internet Explorer
  132. Shrink your body Resizing the body tag to create a fixed layout
  133. Fixed layout version 1 Fixed width, header and footer 100% high
  134. Fixed layout version 2 Full width and height. Fixed header, footer and left navigation
  135. Back to BASICS 2 The bare essentials of Layout 2
  136. Fixed layout version 3 Full width and height. Fixed header, footer and left navigation with content only scrollbar
  137. Back to BASICS The bare essentials of Layout 3
  138. Fixed layout version 4 Full height, fixed header and footer, multiple scrolling columns
  139. Cross browser FIXED Fixed header and footer, scrolling content
  140. Quasi-frames with CSS: A layout with a different flavor
  141. CSS Frames v2, full-height
  142. Centered, framed layout
  143. Fixed Position in IE7 - Part One
  144. Fixed Position in IE7 - Part Two
  145. Fixed Position in IE7 - Part Three - Fixed Position and Older IE Versions
  146. Fixed Position in IE7 - Part Four - Fixed Popups!
  147. Fixed Position in IE7 - Part Five: Fixed Popups from Flowed Elements
  148. Fixed Position in IE7 - Part Six - Tricky Popups!
  149. Fixed Position in IE7 - Part Seven: A Hovered Fallback
  150. Fixed Position in IE7 - Part Eight - Making Allowances for IE6
  151. Emulating Position: Fixed;
  152. Emulating Position: Fixed; demo
  153. CSS based 'position: fixed' in IE/win…
  154. position: fixed in IE/win…
  155. fixing large element
  156. element fixed to bottom of viewport…
  157. Fixing Internet Explorer 1
  158. Fixing Internet Explorer 2
  159. Fixing Internet Explorer 3
  160. Fixing Internet Explorer 4
  161. Fake position:fixed for IE6
  162. Fake position:fixed for IE6
  163. "position: fixed" for Internet Explorer...
  164. Fixed positioning
  165. Fixed positioning
  166. Fixed header
  167. Fixed header and left-sidebar
  168. Fixed header and right-sidebar
  169. Fixed header and footer
  170. Fixed left-sidebar
  171. Fixed left-sidebar and header
  172. Fixed left-sidebar and right-sidebar
  173. Fixed left-sidebar and footer
  174. Fixed right-sidebar
  175. Fixed right-sidebar and header
  176. Fixed right-sidebar and footer
  177. Fixed footer
  178. Fixed position test
  179. Fixed position test
  180. Fixed header and sidebar
  181. Making IE 5.5+ use position: fixed;
  182. Fixed sidebars
  183. Fixed Elements
  184. 2 zones (header/content) with fixed part to the top and scrollable zone for content
  185. 2 zones (menu/content) with fixed part to the left and scrollable zone for content
  186. Ordered Borders Layout
  187. 3 Col Stretch
  188. Source Ordered Columns
  189. 8 Columns - header
  190. CSS layout, 3 columns with Header and Footer, Ordered columns, Netscape 4 compatible
  191. CSS layout, 3 columns with Header and Footer, Ordered columns, Netscape 4 compatible
  192. CSS layout, 3 columns with Header and Footer, Ordered columns, Netscape 4 compatible
  193. Netscape 4, CSS layout, 3 columns with Header and Footer
  194. Netscape 4, CSS layout, 3 columns with Header and Footer
  195. Netscape 4, CSS layout, 3 columns with Header and Footer
  196. Netscape 4, CSS layout, 3 columns with Header and Footer
  197. Netscape 4, CSS layout, 3 columns with Header and Footer
  198. Three Columns in detail
  199. 3 col layout with equalising columns and footer
  200. 3 Column fluid layout - 25% side columns
  201. 2 col layout with equalising columns and footer - content first
  202. One column centred
  203. 3 col layout with equalising columns and footer
  204. 4 Columns
  205. 3 col fluid
  206. 3 column Fluid Simple layout with equal columns
  207. 3 column simple
  208. Content first 3 col layout with equalising columns and footer
  209. 3 col centred
  210. Another 3 col
  211. Min width of 800px and max width of 1024px
  212. 3 Equalising Columns no images
  213. 2 Column Example 1
  214. 2 Column Example 2
  215. 2 Column Example 3
  216. 2 Column Example 4
  217. 2 Column Example 5
  218. 2 Column Example 6
  219. 2 Column Example 7
  220. Perched Upon a Lily Pad
  221. Piefecta
  222. Jello: A Different Liquid Layout
  223. Features Of The Jello Mold
  224. Jello CSS Algebra
  225. Jello Molds & Width Control
  226. The Jello Mold Piefecta
  227. The Jello Mold: A New Look at Min- and Max-width For Web Pages - Part One
  228. The Jello Mold: A New Look at Min- and Max-width For Web Pages - Part Two
  229. Percentage PLUS pixel widths
  230. One True Layout
  231. Layout Revolution
  232. Overuse of floats considered harmful
  233. Eric Meyer: ‘The One True Layout’
  234. Multi-Unit Any-Order Columns
  235. Any Order Columns with Mixed Units
  236. PIE's One True Layout - scrolling bug
  237. ‘One True Layout’ not so ‘one’, not so ‘true’
  238. One True Layout problems (was Re: holy grail problems)
  239. Named Anchor and disappearing menu
  240. Named Anchor and disappearing menu
  241. In Search of the Holy Grail
  242. Holy Grail on A List Apart
  243. The Case of the Disappearing Column
  244. Understanding "Any order columns"
  245. Multi-Column Layouts Climb Out of the Box
  246. Dynamic layouts with adaptive columns
  247. 3-col layout via CSS
  248. Multiple fixed width columns using CSS
  249. CSS Drop Column Layout
  250. Redesign Notes 1: Width-based layout
  251. Creating a CSS layout from scratch
  252. Three Column Liquid Layout
  253. Three Column Liquid Layout with 100% Height Divs
  254. Liquid Layout: Two Column Left Navigation Header Footer
  255. CSS Centering 101
  256. Of Site Styles and CSS Columns (Multicols Moz)
  257. Liquid Bleach
  258. Sliding Faux Columns
  259. Variable fixed width layout
  260. CSS3 Multi-Column Thriller
  261. On Fixed vs. Liquid Design
  262. Advanced CSS Layouts: Step by Step
  263. Practical CSS Layout Tips, Tricks, & Techniques
  264. Mollio CSS/HTML 1 column Template
  265. Mollio CSS/HTML 2 columns - Main + Left hand nav Template
  266. Mollio CSS/HTML 3 columns - Main + Left hand nav + Right Sidebar Template
  267. Mollio CSS/HTML 2 columns - Main + Right Sidebar Template
  268. Mollio CSS/HTML 2 columns - Main + Right hand nav Template
  269. Mollio CSS/HTML 3 columns - Main + Right hand nav + Left Sidebar Template
  270. Two Columns with Overlapping Central Image
  271. Two Columns with Overlapping Central Image 2
  272. Spider 1
  273. Threaded Discussion
  274. Threaded Discussion Item Template
  275. Unthreaded Discussion Template
  276. Two column - Left hand sidebar, Netscape 4 friendly
  277. Two column - Right hand sidebar
  278. Two column - Split sidebar top and right
  279. Three column - Split sidebar left and right
  280. Three column - Split sidebar left and right with footer
  281. 2 columns fixed centered
  282. 3 columns fixed centered
  283. 2 columns fixed centered Border Trick TEMPLATES
  284. 3 columns fixed centered Border Trick TEMPLATES
  285. Menu and content dynamic
  286. Menu fixed, Content dynamic
  287. Menu and content dynamic
  288. 3 columns, all dynamic
  289. 4 columns, all dynamic
  290. Menu floating
  291. Menu fixed, content & header dynamic
  292. 3 columns fixed centered
  293. Dynamic with header and footer
  294. Fixed BOX centered
  295. Dynamic BOX centered
  296. Fixed Box totally centered
  297. 3-cols-seerose
  298. 2-cols-greylight
  299. 3-cols-dp
  300. 3-cols-sky
  301. 3-cols-sky2
  302. 3-cols-bronze
  303. 2-cols-dotted
  304. 2-cols-sand
  305. 2-cols-marine
  306. 2-cols-bronze
  307. Single column, left aligned, set width
  308. Single column, left aligned, scalable width
  309. Single column, centre aligned, set width
  310. Single column, centre aligned, scalable width
  311. Intricate Fluid Layouts in Three Easy Steps
  312. Owen Briggs boxes
  313. Equally-spaced boxes
  314. Simple two-column layout with header & footer
  315. 3 column layout with header & footer
  316. Another 3 column layout with header & footer (scrolling sections in IE...)
  317. 50/50 CSS Puzzle
  318. Centered vertical split of whole page
  319. Three Columns with Boxes
  320. Three Columns without Boxes
  321. Two Columns with Boxes
  322. Two Columns with Boxes (v2)
  323. Two Columns with Boxes - Liquid
  324. Two Columns without Boxes
  325. A simple 'minimum width' layout
  326. 1 Column Fixed Width
  327. 1 Column Fluid Width
  328. 2 Column Fixed Width v1
  329. 2 Column Fixed Width v2
  330. 2 Column Fluid Width v1
  331. 2 Column Fluid Width v2
  332. 3 Column Fixed Width
  333. 3 Column Fluid Width
  334. Flexible Layout
  335. Two Column Flexible
  336. Two Column Flexible With Header
  337. Two Column - Left Column Static
  338. Two Column - Left Column Static with Header Bar
  339. Two Column Fixed Width with Header & Footer
  340. Three Column - Left & Right Columns Static
  341. Three Column - Pixel Perfect
  342. Three Column Pixel Perfect with Header
  343. Three Column Pixel Perfect with Header & Footer - MK 1
  344. Center Floated Box
  345. Nested Left Floated Box
  346. Fixed central width: (750px), header/content/footer
  347. Fluid width (%), header/content/footer
  348. Fixed width (750px) header/left menu, content/footer
  349. Fluid width (%) header/ left menu/ content/footer
  350. Fixed width (750 px) header/left menu/right menu/content/footer
  351. Fluid width (%) header/left menu/right menu/content/footer
  352. Fixed width (750px) header/top menu/content/footer
  353. Fluid width (%) header/top menu/content/footer
  354. Fixed width (750px) header/top menu/left menu/right menu/content/footer
  355. Fluid width (%) header/top menu/left menu/right menu/content/footer
  356. Fixed width (750px)header/left menu/scrollable content/footer
  357. Fluid height and width (%) header/left menu/scrollable content/footer
  358. Stretchable CSS cells
  359. Centered box 1
  360. One-column
  361. Fixed 3-column over 4-column layout
  362. Centered box 2
  363. Fluid one-column layout (basic)
  364. Fluid two-column layout (basic)
  365. Fluid three-column layout (basic)
  366. CSS Negative Margins - Part One
  367. CSS Negative Margins - Part Two: Two Column Liquid Layouts
  368. CSS Negative Margins - Part Three: Improving the Two-Column Layout
  369. CSS Negative Margins - Part Four: Three Column Liquid Layouts
  370. Create Columns with Floats
  371. Create a Horizontal Band CSS Layout - Part 1
  372. Create a Horizontal Band CSS Layout - Part 2
  373. Create a Horizontal Band CSS Layout - Part 3
  374. Create a Horizontal Band CSS Layout - Part 4
  375. Create a Horizontal Band CSS Layout - Part 5
  376. Setting Type on the Web to a Baseline Grid
  377. Robert Nyman Layouts
  378. Rock Solid CSS Layouts
  379. The “I can't believe it's not a table!” layout
  380. Tableless layout HOWTO
  381. Washi: A CSS Layout by PVII
  382. Three steps to a two column CSS layout
  383. Positioning Two Columns with a Header and a Footer
  384. 1 Column - fw-1-1-col
  385. 1 Column - fw-2-1-col
  386. 1 Column - fw-3-1-col
  387. 1 Column - fw-4-1-col
  388. 1 Column - fw-5-1-col
  389. 1 Column - fw-6-1-col
  390. 1 Column - fw-7-1-col
  391. 1 Column - fw-8-1-col
  392. 1 Column - fw-9-1-col
  393. 1 Column - fw-10-1-col
  394. 1 Column - fw-11-1-col
  395. 2 Column - fw-12-2-col
  396. 2 Column - fw-13-2-col
  397. 2 Column - fw-14-2-col
  398. 2 Column - fw-15-2-col
  399. 2 Column - fw-16-2-col
  400. 2 Column - fw-17-2-col
  401. 2 Column - fw-18-2-col
  402. 2 Column - fw-19-2-col
  403. 2 Column - fw-20-2-col
  404. 2 Column - fw-21-2-col
  405. 2 Column - fw-22-2-col
  406. 2 Column - fw-23-2-col
  407. 2 Column - fw-24-2-col
  408. 2 Column - fw-25-2-col
  409. 2 Column - fw-26-2-col
  410. 2 Column - fw-27-2-col
  411. 2 Column - fw-28-2-col
  412. 2 Column - fw-29-2-col
  413. 2 Column - fw-30-2-col
  414. 2 Column - fw-31-2-col
  415. 2 Column - fw-32-2-col
  416. 2 Column - fw-33-2-col
  417. 3 Column - fw-34-3-col
  418. 3 Column - fw-35-3-col
  419. 3 Column - fw-36-3-col
  420. 3 Column - fw-37-3-col
  421. 3 Column - fw-38-3-col
  422. 3 Column - fw-39-3-col
  423. 3 Column - fw-40-3-col
  424. 3 Column - fw-41-3-col
  425. 3 Column - fw-42-3-col
  426. 3 Column - fw-43-3-col
  427. 4 Column - fw-44-4-col
  428. 4 Column - fw-45-4-col
  429. 4 Column - fw-46-4-col
  430. 4 Column - fw-47-4-col
  431. 4 Column - fw-48-4-col
  432. 4 Column - fw-49-4-col
  433. 4 Column - fw-50-4-col
  434. 4 Column - fw-51-4-col
  435. 4 Column - fw-52-4-col
  436. 4 Column - fw-53-4-col
  437. 2 Column - faux-1-2-col
  438. 2 Column - faux-2-2-col
  439. 2 Column - faux-3-2-col
  440. 2 Column - faux-4-2-col
  441. 2 Column - faux-5-2-col
  442. 2 Column - faux-6-2-col
  443. 2 Column - faux-7-2-col
  444. 2 Column - faux-8-2-col
  445. 2 Column - faux-9-2-col
  446. 2 Column - faux-10-2-col
  447. 2 Column - faux-11-2-col
  448. 2 Column - faux-12-2-col
  449. 2 Column - faux-13-2-col
  450. 2 Column - faux-14-2-col
  451. 2 Column - faux-15-2-col
  452. 2 Column - faux-16-2-col
  453. 2 Column - faux-17-2-col
  454. 2 Column - faux-18-2-col
  455. 2 Column - faux-19-2-col
  456. 2 Column - faux-20-2-col
  457. 2 Column - fw-21-2-col
  458. 2 Column - fw-22-2-col
  459. 3 Column - faux-23-3-col
  460. 3 Column - faux-24-3-col
  461. 3 Column - faux-25-3-col
  462. 3 Column - faux-26-3-col
  463. 3 Column - faux-27-3-col
  464. 3 Column - faux-28-3-col
  465. 3 Column - faux-29-3-col
  466. 3 Column - faux-30-3-col
  467. 3 Column - faux-31-3-col
  468. 3 Column - faux-32-3-col
  469. 4 Column - faux-33-4-col
  470. 4 Column - faux-34-4-col
  471. 4 Column - faux-35-4-col
  472. 4 Column - faux-36-4-col
  473. 4 Column - faux-37-4-col
  474. 4 Column - faux-38-4-col
  475. 4 Column - faux-39-4-col
  476. 4 Column - faux-40-4-col
  477. 4 Column - faux-41-4-col
  478. 4 Column - faux-42-4-col
  479. Two “Continues” Columns
  480. Conditional Elastic px/em-based 'min/max-width' simulation in IE/win
  481. Conditional Elastic px/em-based 'min/max-width' simulation in IE/win
  482. Conditional Elastic All em-based 'min/max-width' simulation in IE/win
  483. Conditional Liquid px/px-based 'min/max-width' simulation in IE/win
  484. Conditional Elastic layout working version
  485. Conditional Elastic layout debugging version
  486. Multicolumn Conditional Elastic layout
  487. Multicolumn Conditional Elastic layout demo1
  488. Multicolumn Conditional Elastic layout demo2
  489. Multicolumn Conditional Elastic layout demo3
  490. Asymmetric 3-column 1
  491. Asymmetric 3-column 2
  492. Symmetric 3-column
  493. 3-column with stacked floats
  494. What's a dream?
  495. Shoestring- design...
  496. Equal height boxes based on CSS tables, also for Internet Explorer
  497. Equal height boxes based on CSS tables, also for Internet Explorer 2
  498. Elastic shapes for most screens 1
  499. Elastic shapes for most screens 2
  500. Elastic shapes for most screens 3
  501. Baseball Trivia Quiz
  502. The 100% tall container 1
  503. The 100% tall container 2
  504. The 100% tall container 3
  505. The 100% tall container 4
  506. The 96% tall container 4
  507. Flexi-Floats 3 Column CSS Layout - Fluid, Multi-Column Stretch Header, Footer, Fluid Center - Fixed or Fluid widths
  508. Absolutely Fluid - CSS Layout 3 Column Layout - Fluid, Multi-Column Stretch Header, Footer, Fluid Center - Fixed width Sides - Quirks Mode
  509. 3 Column CSS Layout a work in progress

Ti potrebbe interessare anche

Torna su