How to Add a Column Header and Footer |
How to Add a Column Header and Footer |
itKiwi |
Sep 5 2006, 02:44 PM
Post
#1
|
Group: Members Posts: 3 Joined: 5-September 06 Member No.: 72 |
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: 1535 |
jimlongo |
Sep 5 2006, 03:39 PM
Post
#2
|
This is My Life Group: Members Posts: 1,128 Joined: 24-August 06 From: t-dot Member No.: 16 |
QUOTE how can I get the text to expand and contract to fill the available width, and not jump under the picture. remove the width and float from the .itemtext will flow the text around the image. |
jimlongo |
Sep 5 2006, 04:02 PM
Post
#3
|
This is My Life Group: Members Posts: 1,128 Joined: 24-August 06 From: t-dot Member No.: 16 |
QUOTE 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. 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-ba...ound/color.html CODE <!-- 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%;} --> HTML <div class="item"> <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> |
itKiwi |
Sep 5 2006, 04:28 PM
Post
#4
|
Group: Members Posts: 3 Joined: 5-September 06 Member No.: 72 |
QUOTE 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. 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. |
jimlongo |
Sep 5 2006, 04:42 PM
Post
#5
|
This is My Life Group: Members Posts: 1,128 Joined: 24-August 06 From: t-dot Member No.: 16 |
You could try something like this 2 column layout
http://accessat.c-net.us/test/template-2col.html QUOTE Haven't tried it on IE yet. Will I get any surprises ? Could be, I don't have IE so I can't help you there. |
itKiwi |
Sep 6 2006, 03:06 PM
Post
#6
|
Group: Members Posts: 3 Joined: 5-September 06 Member No.: 72 |
You could try something like this 2 column layout http://accessat.c-net.us/test/template-2col.html QUOTE Haven't tried it on IE yet. Will I get any surprises ? 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 ! |
Lo-Fi Version | Time is now: 26th April 2024 - 02:27 PM |