Trying to make this into div's - (Paul you have seen this before)

[mumford1]

Hi

Paul kindly helped me on the overall layout for this a while back now at http://www.bfgroup.co.uk/omega/new/system-integration/

Bu i now want to turn to turn the whole header into divs, but I am running into trouble hence the reason why i stuck a table or two in there!

This is what I am trying to achieve http://www.omegadm.co.uk/header.jpg

I hope this all make sense, and I hope someone can help me

cheers

[Paul O'B]

Hi,

Well as its a fixed width page you can basically just absolutely position everything where you want.

However as that whole top banner seems to be completely made up with images I would be inclined to drop the whole lot in place in one go with no slicing. Place it all in one background element of appropriate height and width.

You can then simply absolutely place any extras such as your flash panel, links etc on top of the correct part of the image .

Thats how I'd do it because I like to keep things simple where possible.

Paul

[mumford1]

I wish I could do that, but where the part has text, that has to be HTML text linking to there relevant pages...do you see what I mean?, this could be tricky!!

[mumford1]

Would it be easier to insert a table instead?... I would rather not though!!

[Paul O'B]

Hi,

I would still do it like I said originally. You only have odd bits of text and these can be placed exactly where you want on top of the background. You have a fixed width so theres no wrapping to take care of.

I div for the background of the whole top. then just absolulely place the text and whatever else you want on top of the image. Seems straight forward enough to me unless I'm missing something

Should be a ten minute job once you've worked out the exact co-ordinates etc.

If your still confused or I'm missing something then shout

Paul

[mumford1]

Paul

I understand what you are saying I think ...... but how do I exactly work out the co-ordinates.

This is what I have done so far for the header

#headerbground{
width:561px;
height:177px;
margin:0;
padding:0;
background-image: url(images/bground-header.jpg);
}
#flash{
position: absolute; right: 50%;
margin:0;
padding:0;
}
.floatleft{
float:left;
}
#distribution{
position: absolute; right: 20.2%;
border-bottom:1px solid #fff;
border-right:42px solid #779997;
margin:0;
padding:0;
}

<div class="floatleft">
<div id="headerbground">
<div id="flash">f</div>
<div id="distribution">f</div>
</div>

With regard to the % I have put it, they are done by trial and error to be honest! and don't get the same results when viewed in different browsers

[AdamsHC]

You do not need to use % values for your coordinates, pixels should work well for your fixed width layout. So, for every piece of text you want to put on top of background, you should use:

display: block;
position:absolute;
top: ?px;
left: ?px;

Exact position you may get from your design. In addition you may want to reduce line-height, set padding and margin to 0px, set specific width if texts can be changed from CMS, etc.

[mumford1]

Okay

I did what you said and made the whole top a background image and placed everything on to it.

Got it too work, but now all the content below seems to be hidden by the top

The page I have edited is at http://www.omegadm.co.uk/daves/daves.htm

and this is a link to how it should look http://www.omegadm.co.uk/daves/services.htm

Have I gone about this the right way now......

[AdamsHC]

you need to do the same thing for the rest of content - put it absolutely below the header

[mumford1]

when I absolute position the divs below i am getting some strange renderings between the different browsers, this is becoming a bit of a mess now I am not convinced this is the right way to do it .. help!!!!!!

[mumford1]

i got it to look okay by adding a wrapper div (width specified around all of the content below the header)

If i am doing fixed width page designs is absolute positioning the way to go, is it right that i don't have to worry about floats if this option is taken?

[mumford1]

The thing is now the footer I have at the bottom of the page will be overlapped by the content above.....agghhhhhh!!!

[Paul O'B]

lol - don't panic.

Sorry i don't have time to give you the solution as I'm in the middle of 2 jobs at the moment but all you need to do is get your content back in the flow.

As the top of the page is absolutely placed then to get some flow back in the page you should make your content statically placed and use a margin-top to clear the header.

However if your header contains everything then it doesn't need to be absolutely placed anyway and content can just follow on naturally. You just need to give the header the correct height so that following content will start afterwards as normal. The header is the first thing on the page so theres no need to position it. Just give it a position:relative for stacking context.

The content within the header is absolutely placed in the correct positions and will not affect the rest of the layout. This way the flow of the page is preserved and your footer can then follow your content without problems.

I hope thats clearer.

Paul

[mumford1]

Thanks for the response, yes that made it clearer, if you look at the main content (grey nav) and pics in IE you will see there seems to be some sort of pixel jog, viewed in Firefox and NN it looks fine.

What can I do to correct this ? I thought by having

* html #leftcontent {
height:236px;
margin-right:-3px;
}

Would fix this, but NO!!

Its okay I have sussed it! Image width problem og bground image

[Paul O'B]

sorry, for not geting back sooner but I had a layout of my own that wouldn't work lol and it needed to be done immediately.

Hope you've sorted your problem out ok now

Paul