This page is about Rows or something
- iPhone
- This is an iPhone. It's the phone we've been dreaming of since the dawn of wireless balls.
- jawbone
- This is a Jawbone. It is a bluetooth earpiece. It's the only one I've ever owned that works well.
- wallet
- This is a wallet. It's what you need to fill with money if you want to own the other things on this page.
The area below the Navigation menu, which includes the "register", "find a store" & "Special this week:" links, use pure css styling to create the layout and the rounded corners.
The corners are simply a few white pixels floated left and right. I want to keep the page width fluid in the browser so I didn't follow the method exactly as it was done in the book I learned the technique from. They had it so the left and right corner were connected, but that would keep the width at a certain size. I like big monitors and think that if you've invested the several hundred bucks in the monitor, then you should be able to use it. The web page should stretch. Yes, I have a percentage size... eighty percent width and it's centered, but... well... whatev!!! guyyyyyy....
In the "olden days", one would use tables, transparent positioning gifs and hours of layout tweaking to create the niceness seen above. As it stands now, it's simply a few lines of html and some very specific rules in the stylesheet. The text and colors in the navigation tabs can change and no new graphics need to be created, so marketing are able to "just see it this one last way..." without the person coding vowing to kill them as they sleep.
I did do some wacky stuff to achieve the four rounded corners in the "special" row. I added one div beneath the line of text so I could float the two "corners" left and right.
Hey, Dean... What's that over there on the left?
Oh, it's a sneak preview of the next page wot deals with floats. When something floats, in this case, the box with the
boxes over there on the left, everything else "flows" around it. Float... Flow... Neat beans.
See it in action with some nice rounded corner boxes on the next page which I creatively titled: Creative
Floats! Wooh-Yeah.