Hi there,

Ok, after reading this link from LadynRed http://www.hotdesign.com/seybold/everything.html

I can now (sort of) see why CSS layouts are the way to go... but this page design is killing me!

Here is the table version of my page:

The header and nav is fine (although the header.jpg is in a table

The main problem I'm having is that i need the image of the light bulb to sit in the bottom left corner of the page but need to have the faded Grey line go across the bottom. As you can see there is a background image in the table bottom right and that is going over the top of the logo that sits in the middle of the page.

i also need to be able to enter content into the bottom right table as well...

Grrrr! this is proving harder than I thought it would be!

Can anyone help with the HTML and CSS code for how this layout SHOULD be?!

Cheers

I haven't looked at your code but I thought I'd reply with something real quick. Have you tried using z-index and assign the picture in the middle a higher index number than the lightbulb image, which would make the middle image closer to the user?

Just a thought.

You can try to make the 2 images 1 and set it as the background image for the footer.

Originally Posted by rob7676

You can try to make the 2 images 1 and set it as the background image for the footer.

Thats what I'm now trying to do - it works well. set the image to display at the bottom.

I guess its setting the div's correctly that im having trouble with now!

This seems to be what I'm after

Although not sure how im supposed to set the positioning of #wrapper at the moment its "relative" ?

When I view the new layout on Ie6 I cannot see the middle image anymore. The light bulb image moved way up under the navigation.

Sorry, played around with everything!

Think i've sorted it all now. try the link in the 1st post.

I'm sort of getting the hang of this now. Tables used to be so much quicker but I do agree that CSS is better in the long run.

As a very famous, small, green Jedi once said...
"You must unlearn, what you have learned..."

Perfect in IE6 now!!!

Good job!

Rolda, did you see the solution I posted in your other thread ??
http://www.webmaster-talk.com/css-fo...o-3-parts.html

You're not quite there yet, it's got a few minor problems in IE6, but bigger ones in Firefox on my 1280x1024 resolution.

I got that thanks - but then changed the layout a bit!

a few minor problems in IE6, but bigger ones in Firefox on my 1280x1024 resolution.

Great...

I'll post the finished page and see what can be done.

** Updated Post **

Arghhhh!!! now I'm seeing the errors in FF!!

Link Here &
Link Here

Looks fine in IE7 (also, on the contact page - where is that yellow dot coming from at the bottom of the form?

The yellow dot is from the <li> you have in there. I can't believe you stuck a TABLE inside a list - that's just not proper coding at all.

Sorry!

Its a standard contact form that I use and pasted it inside...!

This is one of the main bits of CSS I have problems with, cells side by side...
Any advise on whats causing it to move over in IE6 and FF?

<li> </li> removed

The light bulb div is outside the full wrapper div. I didn't look at it too much, but I would assume the light bulb div needs to be inside the wrapper div.

<li> </li> removed

You also need to remove the <ul></ul> that's in there.

On your contact2.htm - the doctype declaration statment isn't close properly, which will cause problems.

You also haven't cleared your float, so even if you move the bulb inside of #wrapper, it's not going to be 'contained' until you clear the floats. As it is, #wrapper ends at the top horizontal line.

ok, clear the float of what part?

Ah, on #bulb, ok that works now.

Thanks ladynRed - your my saviour (again...)

Can anyone explain why that was causing a problem and how clearing fixed it please.
I need to get my head round what caused it.

Whenever you float something you have to clear that float. The reference explains it better than I can:

http://www.complexspiral.com/publica...aining-floats/
http://css-discuss.incutio.com/?page=ClearingSpace

excellent, thanks for that - learned a lot in the last hour! x

Ok, now my next problem!

I need to insert a thumbnail of a video link in to the section at the bottom right of this page so it sits above the row of links and to the right of the bulb image...

I tryed to insert a new DIV into the section but because I've used margin-top to position the footer DIV, the new one just attaches itself to that.

any suggestions?!