Wed, 2003-04-30 05:41
I'm looking to recreate a page header that was originally coded with the use
of tables. It consisted of the complex part of the header as an image on the
right adjacent to coloured table rows on the left that lined up with the
horizontal pattern in the image.
The result was a header that resized with the browser.
After much searching and reading I'm no closer to an answer about how I
might achieve the same result using CSS positioning.
To give an idea of the header result I'm looking for see:
http://www.netnoise.com.au/acpchn/index.php
Appreciate any suggestions
Wed, 2003-04-30 07:41
#1
Re-create page header
What I see on the page, and what I read above, are two different things.
From the pages point of view I'm sure we can give you some tips to get the buttons (About Us, Contact Us etc) in a horizontal line.
But the text above suggests there should be an image to the right of these buttons. And that the buttons should be in a vertical line, not horizontal.
Or is it just too early in the morning and I can't read things properly? (yeah, probably this one)
Could we maybe see an example of the table version, or what it is you are attempting to recreate.
Cheers
Wed, 2003-04-30 10:46
#2
Re-create page header
Sorry for the confusion.
It is the content at the very top of the page (ie the title and map etc) that I want to reproduce, not the nav bar.
Thanks
David
Wed, 2003-04-30 19:39
#3
Re-create page header
Ah I see, I was thinking more than one colour in the table rows, it makes more sense now.
I will take a look for you soon, once my head stops pounding, so hopefully tomorrow 
Wed, 2003-04-30 22:43
#4
Re-create page header
Here's a possible approach:
(1) We'll need three images: (i) the complex graphic and curved box corners to the right, (ii) the curved box corners for the left, and (iii) the background stripe thing. I'll call them right-image, left-image, and middle-image, respectively.
(2) Create three nested DIVs, something like:
<div id="midBox">
<div id="rightBox">
<div id="leftBox">
Australian Confederation, etc
</div>
</div>
</div>
The idea is that each of these divs will present one of the images.
(3) Define CSS for the divs:
#midBox {
background:url(middle-image.gif);
}
#leftBox {
background:url(left-image.gif) left top no-repeat;
}
#rightBox {
background:url(right-image.gif) right top no-repeat
}
#midBox, #leftBox, #rightBox {
height:150px;
width:100%;
margin:0px;
}
It might also be useful to wrap the title text in a div as well, so that it can be positioned and sized appropriately.
I hope gives you at least a starting point in your efforts 