krisjohnson
04-10-2009, 09:13 AM
I working a basic layot piece using CSS
It's a simple two row design - primarily using the background-image selector.
One row would contain the branding for the page - menu bar, search area, etc. The second row would contain a three column layout of floating boxes. Box 1 would be for side navigation links, the middle box (Box 2) would be for content and the right box (Box 3) would be for ads.
So I started my sample layout and was able to create the branding area. I created an attribute called container to outline my entire work area. I used attribute called masthad to house background image -- I simply pull in the designed image to background image tag. I had to use quotes around my image name to get it to work properly in Mozilla.
I then used nested DIV tags in my BODY to display the image and then layer text or imagess upon my image to complete the look.
Here's the test page sample -> hhttp://www.danereidmedia.com/talktones/Archive/manning_layout_sample.html
Now it came time to start work on the second row. The plan was to continue to nest inside of my container attribute. I would set another container to host my 3 column design. I called that attibute bodyContainer. Then I set up three floating boxes so I could assign 3 background image to them to complete the look of my 3 column design.
The idea was to again use nested DIVs to add any needed text or images to complete the look or functionality needs from there.
The problem I'm having is I cannot get my background images to display now.
I can go directly to the path of the URL used in the backgound-image selector and see the image -- but my CSS will not resolve to show it.
So I took it out of my overall page and put it in it's own simple page -- just to see if it was some other nesting issue. And I still cannot see the images resolve.
Here's the link to this test page -> http://www.danereidmedia.com/talktones/Archive/manning2.html
The Style sheet is in the html doc. The URL resolves to a real address for the images.
Can someone point out my ignorance here? This is driving me crazy. :confused:
It seems so simple -- yet I cannot see anything. The images are in a charcoal gray to appear on a black background.
Thanks
It's a simple two row design - primarily using the background-image selector.
One row would contain the branding for the page - menu bar, search area, etc. The second row would contain a three column layout of floating boxes. Box 1 would be for side navigation links, the middle box (Box 2) would be for content and the right box (Box 3) would be for ads.
So I started my sample layout and was able to create the branding area. I created an attribute called container to outline my entire work area. I used attribute called masthad to house background image -- I simply pull in the designed image to background image tag. I had to use quotes around my image name to get it to work properly in Mozilla.
I then used nested DIV tags in my BODY to display the image and then layer text or imagess upon my image to complete the look.
Here's the test page sample -> hhttp://www.danereidmedia.com/talktones/Archive/manning_layout_sample.html
Now it came time to start work on the second row. The plan was to continue to nest inside of my container attribute. I would set another container to host my 3 column design. I called that attibute bodyContainer. Then I set up three floating boxes so I could assign 3 background image to them to complete the look of my 3 column design.
The idea was to again use nested DIVs to add any needed text or images to complete the look or functionality needs from there.
The problem I'm having is I cannot get my background images to display now.
I can go directly to the path of the URL used in the backgound-image selector and see the image -- but my CSS will not resolve to show it.
So I took it out of my overall page and put it in it's own simple page -- just to see if it was some other nesting issue. And I still cannot see the images resolve.
Here's the link to this test page -> http://www.danereidmedia.com/talktones/Archive/manning2.html
The Style sheet is in the html doc. The URL resolves to a real address for the images.
Can someone point out my ignorance here? This is driving me crazy. :confused:
It seems so simple -- yet I cannot see anything. The images are in a charcoal gray to appear on a black background.
Thanks