Your SlideShare is downloading. ×
Vertua CSS Problems
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Vertua CSS Problems

763

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
763
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. quot;Bottom-blindnessquot;
  • 5. position: relative;
  • 6. position: position: margin-left: [x]; absolute; absolute; margin-right: [y]; width: [x]; width: [y]
  • 7. Remember <img align=quot;leftquot;>? ethan marcottESXSW2006www.vertua.com
  • 8. The basics img { float: left; } ethan marcottESXSW2006www.vertua.com
  • 9. The basics img { float: right; } ethan marcottESXSW2006www.vertua.com
  • 10. Reflow, floats, and you img { float: left; } ethan marcottESXSW2006www.vertua.com
  • 11. Restoring order to the flow p.clear { clear: left; } ethan marcottESXSW2006www.vertua.com
  • 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. Marrying floats and positioning ethan marcottESXSW2006www.vertua.com
  • 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. Getting our 2-column structure ethan marcottESXSW2006www.vertua.com
  • 16. Getting our 2-column structure .person { clear: left; } .person .image { float: left; } ethan marcottESXSW2006www.vertua.com
  • 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. 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. Layering the link .person { position: relative; } position: relative; ethan marcottESXSW2006www.vertua.com
  • 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. Ethan Marcotte vertua.com

×