Learning to love absolute CSS positioning...
-
Upload
huer1278ft -
Category
Business
-
view
11.034 -
download
0
description
Transcript of Learning to love absolute CSS positioning...
![Page 1: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/1.jpg)
![Page 2: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/2.jpg)
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
![Page 3: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/3.jpg)
![Page 4: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/4.jpg)
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.
![Page 5: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/5.jpg)
ethan marcottESXSW2006www.vertua.com
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>
![Page 6: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/6.jpg)
"Bottom-blindness"
![Page 7: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/7.jpg)
![Page 8: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/8.jpg)
position: relative;
![Page 9: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/9.jpg)
position: absolute;width: [x];
position: absolute;width: [y]
margin-left: [x];margin-right: [y];
![Page 10: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/10.jpg)
![Page 11: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/11.jpg)
![Page 12: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/12.jpg)
![Page 13: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/13.jpg)
![Page 14: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/14.jpg)
ethan marcottESXSW2006www.vertua.com
Remember <img align="left">?
![Page 15: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/15.jpg)
ethan marcottESXSW2006www.vertua.com
The basics
img { float: left; }
![Page 16: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/16.jpg)
ethan marcottESXSW2006www.vertua.com
The basics
img { float: right; }
![Page 17: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/17.jpg)
ethan marcottESXSW2006www.vertua.com
Reflow, floats, and you
img { float: left; }
![Page 18: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/18.jpg)
ethan marcottESXSW2006www.vertua.com
Restoring order to the flow
p.clear { clear: left; }
![Page 20: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/20.jpg)
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.
![Page 21: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/21.jpg)
ethan marcottESXSW2006www.vertua.com
Marrying floats and positioning
![Page 22: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/22.jpg)
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>
![Page 23: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/23.jpg)
ethan marcottESXSW2006www.vertua.com
Getting our 2-column structure
![Page 24: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/24.jpg)
ethan marcottESXSW2006www.vertua.com
Getting our 2-column structure
.person { clear: left;}
.person .image { float: left;}
![Page 25: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/25.jpg)
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>
![Page 26: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/26.jpg)
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>
![Page 27: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/27.jpg)
ethan marcottESXSW2006www.vertua.com
.person { position: relative;}
Layering the link
position: relative;
![Page 28: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/28.jpg)
ethan marcottESXSW2006www.vertua.com
.person dt i { display: block; height: 160px; width: 160px; position: absolute; left: 0; top: 0;}
.person { position: relative;}
Layering the link
<i></i>
![Page 30: Learning to love absolute CSS positioning...](https://reader034.fdocuments.in/reader034/viewer/2022052618/554ca0d4b4c905f0178b5128/html5/thumbnails/30.jpg)
Ethan Marcottevertua.com