Reply
Please help me with this layout:
Old 03-27-2008, 08:46 AM Please help me with this layout:
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 527
Name: Darren
Location: England
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 always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!
rolda hayes is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
     
Old 03-27-2008, 09:17 AM Re: Please help me with this layout:
Skilled Talker

Posts: 63
Name: Sandy
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.
__________________
Sandy K
sandyk3 is offline
Reply With Quote
View Public Profile
 
Old 03-27-2008, 09:53 AM Re: Please help me with this layout:
Novice Talker

Posts: 6
Name: Rob
You can try to make the 2 images 1 and set it as the background image for the footer.
__________________
Get your "Green" certification at Enviro Kleen.
Dog Lovers Monthly - For the dog lover in all of us.
rob7676 is offline
Reply With Quote
View Public Profile Visit rob7676's homepage!
 
Old 03-27-2008, 09:59 AM Re: Please help me with this layout:
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 527
Name: Darren
Location: England
Quote:
Originally Posted by rob7676 View Post
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" ?
__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!

Last edited by rolda hayes : 03-27-2008 at 10:10 AM. Reason: added updated url
rolda hayes is offline
Reply With Quote
View Public Profile
 
Old 03-27-2008, 10:27 AM Re: Please help me with this layout:
Skilled Talker

Posts: 63
Name: Sandy
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.
__________________
Sandy K
sandyk3 is offline
Reply With Quote
View Public Profile
 
Old 03-27-2008, 11:14 AM Re: Please help me with this layout:
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 527
Name: Darren
Location: England
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..."

__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!
rolda hayes is offline
Reply With Quote
View Public Profile
 
Old 03-27-2008, 12:58 PM Re: Please help me with this layout:
Skilled Talker

Posts: 63
Name: Sandy
Perfect in IE6 now!!!

Good job!
__________________
Sandy K
sandyk3 is offline
Reply With Quote
View Public Profile
 
Old 03-27-2008, 02:47 PM Re: Please help me with this layout:
LadynRed's Avatar
Super Moderator

Posts: 5,973
Location: Tennessee
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-27-2008, 06:12 PM Re: Please help me with this layout:
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 527
Name: Darren
Location: England
I got that thanks - but then changed the layout a bit!

Quote:
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?
__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!

Last edited by rolda hayes : 03-27-2008 at 07:36 PM. Reason: Updated post with more info
rolda hayes is offline
Reply With Quote
View Public Profile
 
Old 03-27-2008, 08:19 PM Re: Please help me with this layout:
LadynRed's Avatar
Super Moderator

Posts: 5,973
Location: Tennessee
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-28-2008, 04:42 AM Re: Please help me with this layout:
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 527
Name: Darren
Location: England
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
__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!

Last edited by rolda hayes : 03-28-2008 at 04:44 AM.
rolda hayes is offline
Reply With Quote
View Public Profile
 
Old 03-28-2008, 09:58 AM Re: Please help me with this layout:
angele803's Avatar
Perfectly Imperfect

Posts: 1,446
Name: Stephanie
Location: Oklahoma
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.
angele803 is offline
Reply With Quote
View Public Profile
 
Old 03-28-2008, 10:19 AM Re: Please help me with this layout:
LadynRed's Avatar
Super Moderator

Posts: 5,973
Location: Tennessee
Quote:
<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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-28-2008, 03:46 PM Re: Please help me with this layout:
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 527
Name: Darren
Location: England
ok, clear the float of what part?
__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!
rolda hayes is offline
Reply With Quote
View Public Profile
 
Old 03-28-2008, 03:49 PM Re: Please help me with this layout:
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 527
Name: Darren
Location: England
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.

__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!
rolda hayes is offline
Reply With Quote
View Public Profile
 
Old 03-28-2008, 06:02 PM Re: Please help me with this layout:
LadynRed's Avatar
Super Moderator

Posts: 5,973
Location: Tennessee
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
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-28-2008, 06:14 PM Re: Please help me with this layout:
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 527
Name: Darren
Location: England
excellent, thanks for that - learned a lot in the last hour! x
__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!
rolda hayes is offline
Reply With Quote
View Public Profile
 
Old 03-31-2008, 09:30 AM Re: Please help me with this layout:
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 527
Name: Darren
Location: England
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?!
__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!
rolda hayes is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Please help me with this layout: