Vertua CSS Problems

ethan marcottESXSW2006www.vertua.com

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

http://www.vertua.co


http://graphicalwonder.com/

http://graphicalwonder.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.



http://sxsw2006.vertua.com/absolute/

http://sxsw2006.vertua.com/absolute/


A new “positioning context”

div.photo { position: relative;}

p.caption { position: absolute; bottom: 9px;}

<div class="photo"> <p>Here’s a caption. Yay.</p> <img src="photo.jpg" alt="" /></div>



"Bottom-blindness"

http://sxsw2006.vertua.com/absolute/index04.html































































http://blog.fastcompany.com/archives/2006/03/09/getting_sloppy.html

http://blog.fastcompany.com/archives/2006/03/09/getting_sloppy.html

position: relative;

position: absolute;width: [x];

position: absolute;width: [y]

margin-left: [x];margin-right: [y];


Remember <img align="left">?




The basics

img { float: left; }




The basics

img { float: right; }




Reflow, floats, and you

img { float: left; }




Restoring order to the flow

p.clear { clear: left; }



http://sidesh0w.com/photos/2003_07_barre/

http://sidesh0w.com/photos/2003_07_barre/


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.



http://sxsw2006.vertua.com/floats/

http://sxsw2006.vertua.com/floats/


Marrying floats and positioning



http://sxsw2006.vertua.com/combine/



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>




Getting our 2-column structure




Getting our 2-column structure

.person { clear: left;}

.person .image { float: left;}




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>




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>




.person { position: relative;}

Layering the link

position: relative;




.person dt i { display: block; height: 160px; width: 160px; position: absolute; left: 0; top: 0;}

.person { position: relative;}

Layering the link

<i></i>





Ethan Marcottevertua.com

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

http://vertua.com/

Business

Vertua CSS Problems