Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ How to Add a Column Header and Footer
Posted by: itKiwi Sep 5 2006, 02:44 PM
I'm new at this CSS, and have plagiarised some code off the 'net. See attachments. I don't really understand all of what's happening in this page, but I now want to add the itemheader and itemfooter classes. The itemheader should be level with the top of the image, and the itemfooter should go under the existing text, in the same column. Both these could be in a different text style, and/or links. I need to repeat variations of this "item" group down the page.
Also, how can I get the text to expand and contract to fill the available width, and not jump under the picture.
I'm using Firefox 1.5 for development, but it must also work with IE6.
Your help would be appreciated. Thanks.
Attached image(s)
Attached File(s)
ClassExample.html ( 1.41k )
Number of downloads: 1537
Posted by: jimlongo Sep 5 2006, 03:39 PM
remove the width and float from the .itemtext will flow the text around the image.
Posted by: jimlongo Sep 5 2006, 04:02 PM
What if you do this?
I needed to adjust the css padding and margins to make this work - I put a bg color so you can see what's happening, but remember if you dictate bg you also need to state font color.
http://htmlhelp.com/reference/css/color-background/color.html
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #333333;
background-color: #FFFFFF;
margin: 20 20 20 20;
}
.item {
margin: 0;
}
.itemimage {
background-color: #FFFFFF;
border: 0px solid #333333;
padding: 0 12 12 12;
width: 140px;
float: left;
margin-right: 6px;
}
.itemtext {
background-color: #FFFFFF;
border: 0px solid #333333;
padding: 12px;
}
.footer {
clear: both;
padding: 12px;
}
.itemheader {
background-color: #999999;
width: 100%;
}
.itemfooter {
background-color: #999999;
width: 100%;}
-->
<div class="itemheader">
header
<div class="itemimage">
<img src="post-72-1157485110.jpg">
</div>
</div>
<div class="itemtext">
<p>
The Government did not decide immediately to add another unit to the division it was proposing to raise, particularly as the demand was that the Maori force, whatever its constitution and size, be composed entirely of Maoris. Something more than lip service had been given in New Zealand to the concept that the Maori people were, economically as well as politically, entirely equal to the pakeha, but there were hesitations about a completely Maori military unit.
</p>
</div>
<div class="itemfooter">
footer
</div>
</div>
Posted by: itKiwi Sep 5 2006, 04:28 PM
What if you do this?
I needed to adjust the css padding and margins to make this work - I put a bg color so you can see what's happening, but remember if you dictate bg you also need to state font color.
Thanks Jim.
The header is fine, but I don't want the text to wrap under the image, but stay in the column to the right of the image. The itemfooter should also stay to the right of the image.
Haven't tried it on IE yet. Will I get any surprises ?
Thanks again.
Posted by: jimlongo Sep 5 2006, 04:42 PM
You could try something like this 2 column layout
http://accessat.c-net.us/test/template-2col.html
Could be, I don't have IE so I can't help you there.
Posted by: itKiwi Sep 6 2006, 03:06 PM
You could try something like this 2 column layout
http://accessat.c-net.us/test/template-2col.html
Could be, I don't have IE so I can't help you there.
Thanks for the link, Jim. Looks good so far, though with my version, (Nav column (or picture) on the left), with IE, the picture disappears if the browser window becomes too narrow. This is a relatively minor problem which I'll think about later. accessat.c-net.us is a good site; lots of useful goodies.
Thanks again.
Good luck with the forums; hope they grow !
I've tried to help !
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)