The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Background image not working, Looks fine in DW but not in any f12 preview
Frumpy Jones
post Jun 27 2012, 11:20 PM
Post #1





Group: Members
Posts: 4
Joined: 27-June 12
Member No.: 17,347
Title says it all. Would welcome any help:

Here's the code:

/* CSS Style Sheet */

body {
margin: 0px;
padding: 0px;
}

#container {
width: 870px;
margin: 0 0 0 20px;
padding: 0;
background-color: #fff;
background-image:url(images/background.png)
}

This post has been edited by Frumpy Jones: Jun 27 2012, 11:20 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 28 2012, 03:27 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Can you post the URL (address) of a page that demonstrates the problem? Then we can see the markup, CSS and image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frumpy Jones
post Jun 28 2012, 04:47 AM
Post #3





Group: Members
Posts: 4
Joined: 27-June 12
Member No.: 17,347
Sorry. I meant to. It's at http://www.happyhappyfaces.com/sessions/spa/index.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 28 2012, 06:57 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You need to clear the floats. See http://css-tricks.com/snippets/css/clear-fix/ and http://nicolasgallagher.com/micro-clearfix-hack/ , and links from there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frumpy Jones
post Jun 28 2012, 09:43 AM
Post #5





Group: Members
Posts: 4
Joined: 27-June 12
Member No.: 17,347
QUOTE(Frederiek @ Jun 28 2012, 07:57 AM) *

You need to clear the floats. See http://css-tricks.com/snippets/css/clear-fix/ and http://nicolasgallagher.com/micro-clearfix-hack/ , and links from there.


Okay, let's assume I have no idea what you're talking about (Cos I don't). blush.gif

Seriously, I don't understand the problem I'm having for the solution you're providing. I'm a n00b. Can you dummy-down the problem and the solution you're offering so I can better obtain and retain the knowledge you're offering? smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 28 2012, 10:07 AM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Please see the FAQ entries Where can I learn about HTML? and Where can I learn about CSS?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 28 2012, 03:04 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Read this, especially the first paragraph and follow the link to Meyer's site there.
http://css-discuss.incutio.com/wiki/Clearing_Space
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frumpy Jones
post Jul 1 2012, 08:06 AM
Post #8





Group: Members
Posts: 4
Joined: 27-June 12
Member No.: 17,347
QUOTE(pandy @ Jun 28 2012, 04:04 PM) *

Read this, especially the first paragraph and follow the link to Meyer's site there.
http://css-discuss.incutio.com/wiki/Clearing_Space


This was helpful in understanding the issue. Thank you.

However, I am still having a problem with the soluton. Firstly, the container I placed the background image in (Container) has no float in it (All of the containers INSIDE of Container do).

So I tried a cleaner method (Clearer id added and utilized), but that did zippo to fix the issue (But could entirely be due to my not fully grasping what goes where to make this happen).

So, The files are uploaded for all to look at (www.happyhappyfaces.com/sessions/spa/index.htm),
and here's my css file as it stands now. I thank you in advance for any further help:

CODE

/* CSS Style Sheet */
/* Beatrice Spa */

body     {
        margin: 0px;
        padding: 0px;
        }

#container    {
            width: 870px;
            margin: 0 0 0 20px;
            padding: 0;
            background-color: #fff;
            background-image:url("images/background.png");
            background-repeat:no-repeat;
            background-attachment:fixed;
            }

#container #col1    {
                /*background-color:#ceccfe;*/
                margin: 10px;
                padding: 0;
                width: 218px;
                height: 95px;
                float: left;
                }

#container #col2    {
                margin: 0;
                padding: 0;
                width: 360px;
                height: 150px;
                float: left;
                }

#container #col3    {
                /*background-color:#dcdcfe;*/
                margin: 10px;
                padding: 0;
                width: 136px;
                height: 98px;
                float: right;
                }
                
#container h2    {
                /*background-color:#09F*/;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 178px;
                float: left;
                vertical-align: middle;
                }

#container h3    {
                /*background-color:#6599ff*/;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 50px;
                float: left;
                vertical-align: middle;
                }

#container h4    {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 15px;
                float: left;
                }
                
#container #col4    {
                    width: 250px;
                    float: left;
                    }

#container #col5    {
                    /*background-color:#ccccfe*/;
                    width: 610px;
                    float: right;
                    margin: 0;
                    padding: 0;
                    }

#container #footer {
                    /*background-color: #333365*/;
                    color: #e9ffff;
                    float: left;
                    width: 870px;
                    }

#clearer     {
                clear: left; line-height: 0; height: 0;
                }


This post has been edited by Frumpy Jones: Jul 1 2012, 08:08 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 1 2012, 01:15 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You've placed your clearer DIV wrong. You must have it AFTER the floats you want to clear. Where you have it, first in #container, there's nothing to clear.

Point is that when a box has the property 'clear' it goes to the first spot where no float interferes. If you place it before the floats it just stays where it is because there are no floats in the way.

If you want to visualize this to understand how it works create a document with a container, a few floated boxes and a clearer DIV. Give all but the container a height and width and give all boxes different background colors so you can see them. Then start moving things around and see what happens. When it comes to positioning, floats and the like, there is no better method than this if you want to quickly get a grasp of things IMO.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 2 2012, 02:34 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
That's a good exercise.
The only (slight) problem I have with a clearer DIV is the need of an extra empty element, which is not very semantic.

Personally, I use Nicolas Gallagher's Micro-clearhack, which uses CSS pseudo-elements ( see http://www.456bereastreet.com/archive/2005...lectors_part_3/ ).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 2 2012, 06:35 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The advantage is that it works and is short and simple, both to use and understand.

I think you got the URL wrong? You meant this, right?
http://nicolasgallagher.com/micro-clearfix-hack/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 2 2012, 01:36 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
OK, this seems to be fixed now, but you don't need that many clearers. The last one is enough.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 3 2012, 02:44 AM
Post #13


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
QUOTE(pandy @ Jul 2 2012, 01:35 PM) *

The advantage is that it works and is short and simple, both to use and understand.

I think you got the URL wrong? You meant this, right?
http://nicolasgallagher.com/micro-clearfix-hack/

I had already given that link earlier in this thread.
This time I meant to point to an explanation of CSS pseudo-elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 3 2012, 05:18 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Ah!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 07:52 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC