1 / 44

Faux Absolute Positioning

Faux Absolute Positioning. position : absolute;. ???. float: left;. najneobhospodarovateľnejší. 1. 2. 3. FLOAT + POSITION. Faux Absolute Positioning. left : 100 %. margin-left: -100%. <div class=“oblast”>…</div>. oblasť. <div class=“oblast”> <div class=“riadok”>…</div> </div>.

xanthe
Download Presentation

Faux Absolute Positioning

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Faux Absolute Positioning

  2. position: absolute;

  3. ???

  4. float: left;

  5. najneobhospodarovateľnejší

  6. 1 2 3

  7. FLOAT + POSITION

  8. Faux Absolute Positioning

  9. left: 100% margin-left: -100%

  10. <div class=“oblast”>…</div> oblasť

  11. <div class=“oblast”> <div class=“riadok”>…</div> </div> oblasť riadok

  12. <div class=“oblast”> <div class=“riadok”> <div class=“polozka”>…</div> </div> </div> oblasť riadok položka položka

  13. oblasť .riadok { float: left; width: 100%; display: block; position: relative; } riadok

  14. oblasť .riadok { float: left; width: 100%; display: block; position: relative; } .polozka { float: left; position: relative; left: 100%; } riadok položka

  15. oblasť riadok položka

  16. left: 100% oblasť riadok

  17. left: 100% margin-left: -100% oblasť riadok položka

  18. oblasť riadok položka

  19. left: 100% oblasť riadok položka

  20. left: 100% margin-left: -50% oblasť riadok položka položka

  21. <div class=“obsah”> <div class=“riadok”> <div class=“polozka lavyStlpec”>…</div> <div class=“polozka pravyStlpec”>…</div> </div> </div>

  22. .riadok { float: left; width: 100%; display: block; position: relative; } .polozka { float: left; position: relative; left: 100%; }

  23. .riadok { float: left; width: 100%; display: block; position: relative; } .polozka { float: left; position: relative; left: 100%; } .lavyStlpec { width: 50%; margin-left: -100%; } .pravyStlpec { width: 50%; margin-left: -50%; }

  24. <div id=“hlavicka”>…</div> <div id=“obsah”> <div class=“riadok dvaStlpce”> <div class=“polozka lavyStlpec”>…</div> <div class=“polozka pravyStlpec”>…</div> </div> <div class=“riadok triStlpce”> <div class=“polozka strednyStlpec”>…</div> <div class=“polozka lavyStlpec”>…</div> <div class=“polozka pravyStlpec”>…</div> </div> </div> <div id=“paticka”>…</div>

  25. #obsah { width: 960px; } .dvaStlpce .polozka { width: 480px; } .dvaStlpce .lavyStlpec { margin-left: -960px; } .dvaStlpce .pravyStlpec { margin-left: -480px; } .triStlpce .polozka { width: 320px; } .triStlpce .lavyStlpec { margin-left: -960px; } .triStlpce .strednyStlpec { margin-left: -640px; } .triStlpce .pravyStlpec { margin-left: -320px; }

  26. HACKY

  27. 3 1 2

  28. <div class=“oblast”> <div class=“riadok”> <div class=“polozka”>1</div> <div class=“polozka”>2</div> <div class=“polozka”>3</div> </div> </div>

  29. stĺpec obsah

  30. width: 960px

  31. width: 960px width: 10em stĺpec

  32. width: 960px width: 10em margin-left: -??? stĺpec obsah

  33. <div class=“obsah”> <div class=“riadok”> <div class=“polozka”> … </div> </div> </div>

  34. <table> <div class=“riadok”> <div class=“polozka”> … </div> </div> </table>

  35. <table> <tr> <div class=“polozka”> … </div> </tr> </table>

  36. <table> <tr> <td> … </td> </tr> </table>

  37. RTFM A List Apart http://www.alistapart.com/articles/fauxabsolutepositioning/ Google http://www.google.com/search?q=Faux%20Absolute%20Positioning

More Related