Trying to do it "right" with CSS
Hello, I am needing help to cover the following example over to be as modern and best supported with CSS and such. I know how to do it all with tables and outdated attributes like backgrounds, but would like to find out how to do this the "proper way"
Please refer to this image for an example. I just threw it together, so pardon how bad it looks: http://www.wtvgames.com/screenlayout.gif (when viewing this image, imagine the whole image is like 1024 wide, not what you see).
In the dark blue top area, we have a background image, that is way wide, so that even people at really wide resolutions do not get a repeating or cut off image. This is one large (but optimized to be small) image. I don't want any repeating areas
The "My Logo" is an image that displays on top.
Now on the left side menu (light blue), we have the "IMG" and menu items as the actual content, however at the BOTTOM of the menu area, we need a background image that is aligned with the bottom of the light blue area, that is under the bottom portion of the menu. However, the menu area will be different heights on different pages, so needs to be attached to the bottom of the menu somehow.
The main content area will be designed to fit minimum of 750 wide, but should be able to expand wider as the users screen size increases.
Please note, the main thing I use is Dreamweaver MX 2004. I tried to create a layers in there, and set background for the layer, however, in firefox the background image didn't come out at all. dreamweaver produced the following code
<div id="heading"
style="position:absolute;
left:0px;
top:0px;
width:100%;
height:70px;
z-index:1;
background-image: url(/run/img/headback01.jpg);
layer-background-image: url(/run/img/headback01.jpg);
border: 1px none #000000;">
<img src="/run/img/biglogo01.gif" alt="my logo" border="0" width="234" height="93">
</div>I did try doing a search on here, and saw a post mentioning to put quotes around what was in url() , however, as soon as I did that, the background quit working in IE 6 as well.
I have always been one to learn from example, however, I need to know it is a good PROPER example to follow. If you have any recommendations for how to do this, or can recommend a site does similar using good CSS code, I would greatly appreciate hearing from you!
Thank you for your time.
-Greg
syawilim posted this at 12:12 — 15th October 2004.
He has: 93 posts
Joined: Jun 2004
This may help you out a little http://css.maxdesign.com.au/floatutorial/index.htm
AyntRyte posted this at 13:03 — 15th October 2004.
He has: 145 posts
Joined: Jun 2004
For the background images, did you try removing the leading slash from the url?
Greg K posted this at 19:06 — 15th October 2004.
He has: 2,145 posts
Joined: Nov 2003
syawilim: thank you for the link. I will definatly be trying those tutorials later tonight and this weekend!
ayntryte: on our site we need the leading slash as this is a template that will get called from different pages on different directory levels, so need all links to be based off the root of the site.
-Greg
syawilim posted this at 07:09 — 23rd October 2004.
He has: 93 posts
Joined: Jun 2004
Rather than have the slash you could do one of the folowing:
either of these should work.
There are no stupid questions, only stupid people!
slickfish
web site design, production and maintenance for small business
www.justapickle.com
Blogging for the socially conscious
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.