Your SlideShare is downloading. ×
Learning to love absolute CSS positioning...
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Learning to love absolute CSS positioning...

11,023

Published on

Etan Marcotte from vertua.com @ SXSW2006

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,023
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
465
Comments
0
Likes
24
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. "Bottom-blindness"
  • 5. position: relative;
  • 6. position: position: margin-left: [x]; absolute; absolute; margin-right: [y]; width: [x]; width: [y]
  • 7. Remember <img align="left">? ethan marcottESXSW2006www.vertua.com
  • 8. The basics img { float: left; } ethan marcottESXSW2006www.vertua.com
  • 9. The basics img { float: right; } ethan marcottESXSW2006www.vertua.com
  • 10. Reflow, floats, and you img { float: left; } ethan marcottESXSW2006www.vertua.com
  • 11. Restoring order to the flow p.clear { clear: left; } ethan marcottESXSW2006www.vertua.com
  • 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. Marrying floats and positioning ethan marcottESXSW2006www.vertua.com
  • 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. Getting our 2-column structure ethan marcottESXSW2006www.vertua.com
  • 16. Getting our 2-column structure .person { clear: left; } .person .image { float: left; } ethan marcottESXSW2006www.vertua.com
  • 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. 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. Layering the link .person { position: relative; } position: relative; ethan marcottESXSW2006www.vertua.com
  • 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. Ethan Marcotte vertua.com

×