The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to Add a Column Header and Footer
itKiwi
post 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 Image

Attached File(s)
Attached File  ClassExample.html ( 1.41k ) Number of downloads: 1535
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
itKiwi
post Sep 5 2006, 04:28 PM
Post #4





Group: Members
Posts: 3
Joined: 5-September 06
Member No.: 72



QUOTE(jimlongo @ Sep 5 2006, 11:02 PM) *

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. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post 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. mellow.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
itKiwi
post Sep 6 2006, 03:06 PM
Post #6





Group: Members
Posts: 3
Joined: 5-September 06
Member No.: 72



QUOTE(jimlongo @ Sep 5 2006, 11:42 PM) *

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. mellow.gif


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 ! smile.gif I've tried to help ! wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 01:17 AM