Learning to love absolute CSS positioning...

11,531 views
11,405 views

Published on

Etan Marcotte from vertua.com @ SXSW2006

Published in: Business, Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,531
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
470
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

Learning to love absolute CSS positioning...

  1. 1. The Question “ Trying to move toward absolute positioning versus floats for layout.... I am trying to figure out if [you] have to always use a height on the wrapper div. If I have text columns that have no specific ” height it seems everything breaks at that point. Shane Perran, graphicalwonder.com ethan marcottESXSW2006www.vertua.com
  2. 2. Absolute Positioning It’s all about the x and the y (axes, that is) ❖ Treating parts of your document as distinct ❖ “layers” Use CSS to precisely place them upon a ❖ coordinate grid Cake, yes? Let’s look at an example. ethan marcottESXSW2006www.vertua.com
  3. 3. A new “positioning context” div.photo { <div class="photo"> position: relative; <p>Here’s a caption. Yay.</p> } <img src="photo.jpg" alt="" /> </div> p.caption { position: absolute; bottom: 9px; } ethan marcottESXSW2006www.vertua.com
  4. 4. "Bottom-blindness"
  5. 5. position: relative;
  6. 6. position: position: margin-left: [x]; absolute; absolute; margin-right: [y]; width: [x]; width: [y]
  7. 7. Remember <img align="left">? ethan marcottESXSW2006www.vertua.com
  8. 8. The basics img { float: left; } ethan marcottESXSW2006www.vertua.com
  9. 9. The basics img { float: right; } ethan marcottESXSW2006www.vertua.com
  10. 10. Reflow, floats, and you img { float: left; } ethan marcottESXSW2006www.vertua.com
  11. 11. Restoring order to the flow p.clear { clear: left; } ethan marcottESXSW2006www.vertua.com
  12. 12. Okay, great. Kitty pictures. So? Floats can provide us with a more flexible ❖ layout model Clearing allows the components of our ❖ designs to become “context aware” Let’s view a simple example. ❖ ethan marcottESXSW2006www.vertua.com
  13. 13. Marrying floats and positioning ethan marcottESXSW2006www.vertua.com
  14. 14. The marvelous markup <div class="person"> <div class="image"> <img src="photo.jpg" alt="" /> </div> <dl> <dt><a href="#">Durstan who?</a></dt> <dd> <ul>...</ul> </dd> </dl> </div> ethan marcottESXSW2006www.vertua.com
  15. 15. Getting our 2-column structure ethan marcottESXSW2006www.vertua.com
  16. 16. Getting our 2-column structure .person { clear: left; } .person .image { float: left; } ethan marcottESXSW2006www.vertua.com
  17. 17. One minor addition <div class="person"> <div class="image"> <img src="photo.jpg" alt="" /> </div> <dl> <dt><a href="#">Durstan who?</a></dt> <dd> <ul>...</ul> </dd> </dl> </div> ethan marcottESXSW2006www.vertua.com
  18. 18. One minor addition <div class="person"> <div class="image"> <img src="photo.jpg" alt="" /> </div> <dl> <dt><a href="#"><i></i>Durstan who?</a></dt> <dd> <ul>...</ul> </dd> </dl> </div> ethan marcottESXSW2006www.vertua.com
  19. 19. Layering the link .person { position: relative; } position: relative; ethan marcottESXSW2006www.vertua.com
  20. 20. Layering the link .person { position: relative; } .person dt i { <i></i> display: block; height: 160px; width: 160px; position: absolute; left: 0; top: 0; } ethan marcottESXSW2006www.vertua.com
  21. 21. Ethan Marcotte vertua.com

×