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

Learning to love absolute CSS positioning...

on

  • 16,587 views

Etan Marcotte from vertua.com @ SXSW2006

Etan Marcotte from vertua.com @ SXSW2006

Statistics

Views

Total Views
16,587
Slideshare-icon Views on SlideShare
14,715
Embed Views
1,872

Actions

Likes
23
Downloads
459
Comments
0

13 Embeds 1,872

http://www.dreamcss.com 1684
http://dreamcss.blogspot.com 116
http://www.slideshare.net 24
http://sc-net.blogspot.com 17
http://kevin.astudio4.nl 8
http://sc-net.blogspot.pt 6
http://sc-net.blogspot.ru 4
http://sc-net.blogspot.com.br 4
http://translate.googleusercontent.com 3
http://apprentieweb.blogspot.com 3
http://sc-net.blogspot.fi 1
http://feeds.feedburner.com 1
http://sc-net.blogspot.com.es 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Learning to love absolute CSS positioning... Learning to love absolute CSS positioning... Presentation Transcript

    • 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
    • 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
    • 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
    • "Bottom-blindness"
    • position: relative;
    • position: position: margin-left: [x]; absolute; absolute; margin-right: [y]; width: [x]; width: [y]
    • 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.vertua.com
    • Restoring order to the flow p.clear { clear: left; } ethan marcottESXSW2006www.vertua.com
    • 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
    • Marrying floats and positioning ethan marcottESXSW2006www.vertua.com
    • 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
    • Getting our 2-column structure ethan marcottESXSW2006www.vertua.com
    • Getting our 2-column structure .person { clear: left; } .person .image { float: left; } ethan marcottESXSW2006www.vertua.com
    • 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
    • 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
    • Layering the link .person { position: relative; } position: relative; ethan marcottESXSW2006www.vertua.com
    • 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
    • Ethan Marcotte vertua.com