Wednesday, November 30, 2005

CSS CODE

Since I am posting code today I will post one more piece of code. This is a bit of CSS I have used to make a 3X3 grid using only divs with no tables. I am a CSS zealot and I love to build without tables. I am working on incorporating this into the current sites I work on and since its so simple I thought I would share it with everyone. The way it works is I build a container div for my products I think of it as a self contained code block in that container I build a few other divs to help control the flow of the piece. Once that piece is finished I dump them into a larger container div that holds all of my product blocks. The width of each product block is set and the width of the container div is also set. In this example you would to have to set the width of the container if you wanted a liquid layout this would allow you to have products fill up the width of the users browser. Since my layout is not as liquid as it could be I have set the width to be wide enough to display only 3 product blocks across. Once there are three blocks in the container the float property causes the boxes to float down to the next line. This is an easy solution and I am sure I will use it n many places. I only put one product block in the code in this post but you can look at the live copy and see it with more.


<style type="text/css"
media="screen">
.prodContainer { width: 560px; }
.prodBox { width: 180px; float: left; }
.smallHero { text-align: center; }
.smallDetail { }
.buyButton { width: 89px; height: 23px; float: left; text-align: center;
padding-top: 4px; }
.prodInfo { float: right; font-family: Arial, Verdana, Helvetica; font-size:
11px; width: 89px; padding-top: 2px; }

</style>


</head>


<body>


<h1>Body Content here</h1>


<div class="prodContainer">


<div


class="prodBox">


<div class="smallHero">


<img src="prod.jpg" alt="" />


</div>


<div class="smallDetail">


<span class="buyButton">


<img src="buy.gif" alt="" />


</span>


<span class="prodInfo">


$55.00 - [TF76-1]<br />Fresh Fall Magic


</span>


</div>


</div>


</div>


</body>


</html>

posted by little big toe at 7:30 AM

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home