4 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

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

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

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

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Anonymous
Anonymous's picture
Guru

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

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

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 Oups

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 19 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

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 Laughing out loud