Learning to love absolute CSS positioning...

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

http://www.dreamcss.com	601
http://dreamcss.blogspot.com	116
http://www.slideshare.net	24
http://sc-net.blogspot.com	15
http://kevin.astudio4.nl	8
http://apprentieweb.blogspot.com	3
http://translate.googleusercontent.com	3
http://sc-net.blogspot.com.br	2

Learning to love absolute CSS positioning...

by huer1278ft on Apr 17, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 772

Statistics

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