Hello All-
So, I'm a tables/frames/html junkie who is trying her first hand at a mostly CSS site. I've created a background page that holds the framework of the site and have used a table to place the main content in the center of the page. It's testing great in Firefox, Safari, ie6 and Netscape on my computer, but I've had my testers come back with the following issues:
*in ie6, my background image is getting cut off and they can't scroll to see the rest of it
*my content table is running into the bottom of the background image in Firefox and Safari on smaller browser sizes
So, my questions are:
How do I make sure that the whole background image can be seen in every browser?
How can I keep my table completely centered and not have my info shift into the bottom of the background image?
I would usually do this using my tried and true table/frames method, but I really want to use this as a way to learn CSS.
Here's the link to my site... any help would rock. Or if you can point me to some good resources for fixing my errors, I would greatly appreciate it...
www.mettadesign.net
So, I'm a tables/frames/html junkie who is trying her first hand at a mostly CSS site. I've created a background page that holds the framework of the site and have used a table to place the main content in the center of the page. It's testing great in Firefox, Safari, ie6 and Netscape on my computer, but I've had my testers come back with the following issues:
*in ie6, my background image is getting cut off and they can't scroll to see the rest of it
*my content table is running into the bottom of the background image in Firefox and Safari on smaller browser sizes
So, my questions are:
How do I make sure that the whole background image can be seen in every browser?
How can I keep my table completely centered and not have my info shift into the bottom of the background image?
I would usually do this using my tried and true table/frames method, but I really want to use this as a way to learn CSS.
Here's the link to my site... any help would rock. Or if you can point me to some good resources for fixing my errors, I would greatly appreciate it...
www.mettadesign.net
posted by:
|
Maryland
|
-
Re: CSS Background
Thu, August 2, 2007 - 9:02 AMWell when i looked at your page i was confused about some of your questions, but lets see here...
"*in ie6, my background image is getting cut off and they can't scroll to see the rest of it"
Youre using one background image attributed to the body of you page. Thats a bad idea because what youve essentially done is make your content float on top of an image. Each one can move independently of another yet one relies on the other for layout. IF they rely on each other they should be grouped together in some fashion. In this case you need at least 2 Divs or if you want to use tables a 1x2 container table. The first div (or cell if using tables) should hold the background image that is your header (from the first white area at the top of the image to the green stripe below the logo) and have a white background color. This way your content area is able to expand with the height of its content. The second div/cell would be your footer from the top of the last bottom read stipe to the bottom edge of the current graphic. I thousl have a fixed height. thats the minimum although ideally id do 3 divs or a 1x3 table enclosed in a container div/table. The container would handle the centering while the first div/cell inside would hold your header with the menu inside, the 2nd div/cell would hold the content, and the 3rd would hold your footer.
Additionally quit using <br /> to add vertical space between elements. Thats not what its for - at all. Instead use CSS to add margins, padding, positioning or any combonation thereof to position elements in the vertically as well as horizontally See below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[http://]" title="www.w3.org/TR/xhtml1/DTD/...nsitional.dtd">">www.w3.org/TR/xhtml1/DTD/...nsitional.dtd">
<html xmlns="[http://]www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Basic Centered 3 Region Layout</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #ccc;
}
#shell {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
width: 750px;
}
p {
margin: 0px;
padding: 0px;
}
#header {
background-color: #f00;
height: 100px;
}
#main {
padding: 20px;
background-color: #0f0;
}
#footer {
height: 50px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="shell">
<div id="header">
<p>I am the header. I have a fixed height and width. I contain the menu and probably have a background image.</p>
</div>
<div id="main">
<p>I am main content area. I contain the content. I have a fixed width and will expand vertically with the length of my content... pushing the footer below me down accordingly.</p>
</div>
<div id="footer">
<p>I am the footer. I have a fixed height and width. I contain the footer information like links, copyright notice, etc.. I probably have a background image.</p>
</div>
</div>
</body>
</html>
-
-
Re: CSS Background
Thu, August 2, 2007 - 2:10 PMThanks for all of your input. I will stop with the <br>s! Thanks for busting my chops on that one, it's a lazy habit I picked up and you've shown me the light.
Yeah, the background image being the framework was a crackpot idea I had to see if I could make it work, but you're totally right about just putting it all in a table so I can control alignment more. I started with the idea of ... what if I DIDn'T have to put all of my content in a table and could make it float on one image background... sigh, alas, it is dumb and I should go with what works.
Thanks again. I'll repost when I've done my changes. -
-
Re: CSS Background
Thu, August 2, 2007 - 2:14 PMexcuse my brain for subbing "tables" for "divs"
long week.
-
Re: CSS Background
Thu, August 2, 2007 - 3:21 PMWell the idea inofitslef isnt dumb.. essentially you were doing what you should be doing... trying to keep things as simple as possible. Where you got off track was neglecting to take into account the complexity of your solution in implementation - that complexity being the image defining your layout being completely independent from the content said layout is supposed to contain. While its more markup overall, breaking it up makes more sense to implement because you have greater control - in this case necessary control.
But is *always* good to take a step back and review how youre doing things every now and then - make sure your best practice is still a "best practice".
I like the color palette by the way... and the logo graphic. The layout is solid as well though its uninspiring - but not everything has to "break ground" visually, non? (Lord knows most of my work doesnt... haha). -
-
Re: CSS Background
Fri, August 3, 2007 - 7:11 AMYeah.. I definitely like to challenge myself every once in a while and go.. "what other way could I do this?" However, it probably wasn't best to try that with one of my first CSS attempts... sometimes I have more daring than sense :)
Thanks for the compliments on the colors/logo. Yeah and I'll admit that the layout is a bit on the boring side, but I deal a lot with nonprofits and small businesses when I do graphic/web design and I have to keep it really simple for them. I find that they want really basic "what do you do, how can I get in contact with you..." information, so all the fun, jazzy elements get tossed to the wind. But I also figure I'll start out really basic and then see what I can add to make it more dynamic and fun (I'll also admit that I'm throwing this together since I've had several clients ask for my website and I've realized that I spend so much time doing OTHER peoples' work that I forget to promote my own). Le sigh!
-
-
Re: CSS Background
Fri, August 3, 2007 - 8:49 AMhaha sounds like a plan to me... less is more.
-
-
-
-
