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...
quot;Bottom-blindnessquot;
position: relative;
position:                          position:
              margin-left: [x];
absolute;                          absolute;
...
Remember <img            align=quot;leftquot;>?




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=quot;personquot;>
               <div class=quot;imagequot;>
                 ...
Getting our 2-column structure




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

                                       .person {
                                       
 ...
One minor addition
            <div class=quot;personquot;>
               <div class=quot;imagequot;>
                  <...
One minor addition
            <div class=quot;personquot;>
               <div class=quot;imagequot;>
                  <...
Layering the link
                                                .person {
                                              ...
Layering the link
                                                .person {
                                              ...
Ethan Marcotte
  vertua.com
Vertua CSS Problems
Vertua CSS Problems
Vertua CSS Problems
Vertua CSS Problems
Vertua CSS Problems
Vertua CSS Problems
Vertua CSS Problems
Vertua CSS Problems
Vertua CSS Problems
Upcoming SlideShare
Loading in …5
×

Vertua CSS Problems

979 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
979
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vertua CSS Problems

  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=quot;photoquot;> position: relative; <p>Here’s a caption. Yay.</p> } <img src=quot;photo.jpgquot; alt=quot;quot; /> </div> p.caption { position: absolute; bottom: 9px; } ethan marcottESXSW2006www.vertua.com
  4. 4. quot;Bottom-blindnessquot;
  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=quot;leftquot;>? 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=quot;personquot;> <div class=quot;imagequot;> <img src=quot;photo.jpgquot; alt=quot;quot; /> </div> <dl> <dt><a href=quot;#quot;>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=quot;personquot;> <div class=quot;imagequot;> <img src=quot;photo.jpgquot; alt=quot;quot; /> </div> <dl> <dt><a href=quot;#quot;>Durstan who?</a></dt> <dd> <ul>...</ul> </dd> </dl> </div> ethan marcottESXSW2006www.vertua.com
  18. 18. One minor addition <div class=quot;personquot;> <div class=quot;imagequot;> <img src=quot;photo.jpgquot; alt=quot;quot; /> </div> <dl> <dt><a href=quot;#quot;><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

×