PDA

View Full Version : 3 cols (css holy grail) w images?


SeaFoam
October 13th, 2007, 11:58 AM
There's no shortage of examples of doing 3 cols (css holy grail). However, it seems that EVERYONE I've found contain text, not images in the left and right cols.

Can anyone point to an example of a 3 column css layout in which the left and right column have images in them? And by that I mean images beyond the size of just a small 60x60 (or so) thumb.

In particular I'm trying to find an example of putting a 60x160 image in the left column and 300x250 in the right column (these are 2 of the IAB banner size guidlines). I've tried myself, and I keep going off the page. Anyone tried this or know of an existing example? TIA.
StigC
October 13th, 2007, 12:43 PM
Hey SeaFoam.

It's possible to use images - example here:http://www.flashback-live.dk

In that example the images are added as background for the different div's in the CSS style sheet.

The key is to use percent as your width in your css. That way the layout scales to the resolution of the users screen. But if your content is too wide for the pixels available, the divs will drop below one another.


#left {
width: 25%;
height: 600px;
float: left;
}
#center {
width: 50%;
float: left;
}
#right {
width: 24%;
height: 600px;
float: left;
}
Notice that the percentages only add up to 99% - for some reason this seems to work the best for me. Of course you can change the percentages around as you like.
Now you can add the images, either in the HTML Div tags, or as backgrounds in the css. (If you want content on top of them.)

But it's important that you remember to specify the height of your div tags, or else the images won't show up!

I hope this helps...
SeaFoam
October 13th, 2007, 09:56 PM
Thanks - Here's the ALA holy grail page:
http://www.alistapart.com/d/holygrail/example_1.html

Heres the IAB guidlines for images (I'm trying to use the skyscraper left and med rectangle right) http://www.iab.net/standards/adunits.asp

I tried to flesh out the code you gave with some from the ALA's page into a html page with the styles inline. It's uh... well, any suggestions? :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">

#header, #footer {
width: 100%;
height: 60px;
background: #999;
}

#left {
width: 25%;
height: 600px;
float: left;
background: #66F;
}
#center {
width: 50%;
float: left;
background: #DDD;
}
#right {
width: 24%;
height: 600px;
float: left;
background: #F66;
}

</style>
</head>

<body>

<div id="header">This is the header.</div>

<div id="left">
<h1>This is the left content.</h1>
<img src="http://www.iab.net/standards/images/ads/160x600.gif">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<div id="center">
<h1>This is the center content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<div id="right">
<h1>This is the right content.</h1>
<img src="http://www.iab.net/standards/images/ads/300x250.gif">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<div id="footer">This is the footer.</div>

</body>

</html>
prc
October 13th, 2007, 10:37 PM
I tried to flesh out the code you gave with some from the ALA's page into a html page with the styles inline. It's uh... well, any suggestions? :)


So it works? If you dont want inline css put it in a .css file and link it!?
StigC
October 14th, 2007, 04:10 AM
If it doesn't work, try adding "float: left;" to your header/footer section aswell.

I see what you mean with the left banner. But the image moves for the text "this is the left clomun". If you remove that, it might look alright. Otherwise I would suggest putting the left content in a new div tag WITHIN the "left" div tag.
That way you can position the content within the left column:


#leftcontent {
top: 0px;
left: 0px;
margin: 5px 5px 5px 5px;
text-align: left;
}(This is just an example)

Or you can split the content up in two div tags (WITHIN the "left" tag), IE Banner and text, and use "float: left;" for the image (again specifiying height/width) which will make the text fit around the image.

Again - if you want text on top of the banner, add the image as your background in the css file:



#left {
width: 25%;
height: 600px;
float: left;
background: #66F;
background-image:url(http://www.iab.net/standards/images/ads/160x600.gif);
background-position:left top;
background-repeat:no-repeat;
background-attachment:fixed; /* use fixed if you don't want the image to scroll */
}
Also I would suggest making an external css file and link to it. That way you can use it on all of your pages. example:
Put this in your HEAD section.


<link rel="stylesheet" type="text/css" href="YourFilename.css">
And of course save the css file in the same folder as your html page.

Hope this works for you.