...

View Full Version : Move text "with" background image



hyperballad400
05-14-2010, 11:13 PM
Hi!
Trying this again and hoping someone can help! THANKS IN ADVANCE!!!!

I've created this site:
http://aftergoodesq.com/

The problem I'm having is that on bigger monitors, the text and nav move "off" the background image and onto the grey background:
http://clip2net.com/page/m0/5763090

Changing the body positioning messes it up for smaller monitors:
http://clip2net.com/page/m0/5798687

Any ideas if I can "connect" the text and nav to the background image without actually making them all into one image?

this is really driving me nuts so THANK YOU FOR ANY HELP!!!!!!!!!

mbaker
05-15-2010, 10:44 AM
I or others here will be more likely to look at your code and provide advice if it validates at the w3c html and css validators (see links in my sig).

Your html has 73 errors when validated as XHTML1.0 Strict
However if you were to change the DocType to:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
this would be reduced to 14 errors.

There are also 3 errors in your CSS.

In CSS (& HTML) the colour grey is spelt gray, just as colour is spelt color.

Apostropartheid
05-15-2010, 07:31 PM
Not that you should change to HTML 4.01 Transitional. If you validate to this standard, there's no point in doing so at all. HTML 4.01 Strict or XHTML 1.0 Strict are recommended for new documents.

I assume you don't know how to center in CSS? One uses "margin: 0 auto" (only margin-left and margin-right have to be auto, top and bottom can be anything you want.) Apply this to a container around the rest of your content and the rest should be easy.

mbaker
05-16-2010, 01:09 AM
For me the value in validating against any standard, including HTML4.01 Transitional, is that it removes a major cause of things not working the way you want or expect them to.

If it does not validate it suggests there is a major flaw in your code, such as the second <body> tag and the stray closing </div> tags for which there are no opening tags. Is this because the </div> tags are extra, or some opening <div> tags are missing?

If you want to go with the future you could validate against HTML5 using the experimental validator. There are only 26 errors with HTML5 compared to 73 with XHTML 1.0 Strict.

hyperballad400
05-18-2010, 07:38 PM
thank you very very much Apostropartheid.
i tried what you suggested, putting the elements in a container with "margin: 0 auto", and this was the result:
http://clip2net.com/page/m0/5865080
do you have any suggestions? is there something else that i should be doing with this container?

mbaker, thanks for the feedback too. i would like to get everything squared away but getting the layout correct is a higher priority as this is something that many users may see. i know i'm sort of doing it backwards, but that's just where i'm at right now.

mbaker
05-19-2010, 12:23 AM
mbaker, thanks for the feedback too. i would like to get everything squared away but getting the layout correct is a higher priority as this is something that many users may see. i know i'm sort of doing it backwards, but that's just where i'm at right now.

My suggestion that you get you page to validate (to any standard) is not to do it because you should, or because it is a good thing to do, but to assist you in getting your layout correct. For example major flaws in your code, such as the second <body> tag and the stray closing </div> tags for which there are no opening tags could well be the cause of your problems.

When browsers encounter errors such as these they "guess" at what you intended. Different browsers make different "guesses" leading to different layout.

Frankly, until you eliminate these issues, it is fairly pointless looking for other solutions.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum