The Question


 “     Trying to move toward absolute positioning versus floats for
       layout.... I am trying to figure...
Absolute Positioning
                It’s all about the x and the y (axes, that is)
            ❖


                Treati...
A new “positioning context”




                                                     div.photo {
                 <div cla...
"Bottom-blindness"
position: relative;
position:                          position:
              margin-left: [x];
absolute;                          absolute;
...
Remember <img            align="left">?




ethan marcottESXSW2006www.vertua.com
The basics




                                       img { float: left; }




ethan marcottESXSW2006www.vertua.com
The basics




                                       img { float: right; }




ethan marcottESXSW2006www.vertua.com
Reflow, floats, and you




                                       img { float: left; }



ethan marcottESXSW2006www.vertu...
Restoring order to the flow




                                 p.clear { clear: left; }


ethan marcottESXSW2006www.vert...
Okay, great. Kitty pictures. So?
                Floats can provide us with a more flexible
            ❖

               ...
Marrying floats and positioning




ethan marcottESXSW2006www.vertua.com
The marvelous markup
            <div class="person">
               <div class="image">
                  <img src="photo...
Getting our 2-column structure




ethan marcottESXSW2006www.vertua.com
Getting our 2-column structure

                                       .person {
                                       
 ...
One minor addition
            <div class="person">
               <div class="image">
                  <img src="photo.j...
One minor addition
            <div class="person">
               <div class="image">
                  <img src="photo.j...
Layering the link
                                                .person {
                                              ...
Layering the link
                                                .person {
                                              ...
Ethan Marcotte
  vertua.com
Learning to love absolute CSS positioning...
Learning to love absolute CSS positioning...
Learning to love absolute CSS positioning...
Learning to love absolute CSS positioning...
Learning to love absolute CSS positioning...
Learning to love absolute CSS positioning...
Learning to love absolute CSS positioning...
Learning to love absolute CSS positioning...
Learning to love absolute CSS positioning...
Upcoming SlideShare
Loading in...5
×

Learning to love absolute CSS positioning...

11,323
-1

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,323
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
469
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×