14 replies [Last post]
altast
altast's picture
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2007-07-26
Posts: 7
Points: 0

Hi I wonder if anyone can help?

I am new to CSS and using the Faux Columns technic. I have a background image which repeats all the way down the page.

Because I am targeting the body tag it repeats past the bottom of the footer and breaks the design, when a browser window is larger than the page.

Is there anyway to stop this from happening? I have 'googled' for a solution to this problem and also searched various forums, however, I have not found an answer and/or a tutorial.

I know that you can stop the image from repeating, by targeting a different element, I just can't find a clearly written answer and/or solutio :shrug:

From what I have been able to gather, I should target an element such as the wrapper. When I do this, however, the background image sits inside the wrapper and can't be seen properly.

Can anyone help? I am extremely keen to improve my skills and learn.

I am using the following css (IE fixes are targeted in a separate stylesheet).

body { font: 62.7% Georgia, "lucida sans", "lucida grande", Trebuchet, Verdana; text-align: center; background: #e6e6e6 url(../images/page_bg.png) repeat-y center top; margin: 0; padding: 0; }

ul.primaryNav {
font-size: 1.00em;
font-weight: bold;
background-color: #000000;
width: 100%;
margin-left: 0px;
padding-left: 0px;
float: left;
list-style: none;
}

ul.primaryNav li {
float: left
}

ul.primaryNav a {
color: #ffffff;
text-decoration: none;
text-align: center;
background-color: #000000;
width: 8em;
margin-right: 2px;
padding: 5px;
display: block;
border: 1px solid #666666;
}

.primaryNav li.selectedtab a {
color: #ffffff;
text-decoration: none;
text-align: center;
background-color: #CC0033;
width: 8em;
margin-right: 2px;
padding: 5px;
display: block;
border: 1px solid #971254;
}

.primaryNav a:hover {
color: #ffffff;
background-color: #CC0033;
border: 1px solid #971254;
}

#wrapper {
text-align: left;
background: #ffffff;
width: 760px;
margin-right: auto;
margin-left: auto;
border-right: 1px solid #323232;
border-left: 1px solid #323232;
}

#header {
background: url(../images/logo.gif) no-repeat right top;
width: 760px;
height: 100px;
}

#mainContent {
width: 285px;
min-height: 300px; \* create consistent style for shorter pages *\
margin: 5px 10px 0;
padding: 10px;
border-right: 1px solid #e6e6e6;
float: left;
}

#footer {
color: #ffffff;
font-weight: bold;
text-align: right;
background-color: #000000;
padding: 7px 15px 10px 0px;
clear: both;
}

I am using the following XHTML:

First level navigation here
Content Here

Both the CSS and HTML Validate.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 50 weeks 6 days ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Think inside the box!

Hmmmmm...

The first thing I'd suggest is could you please pop your CSS in to the correct code tags? It makes them that pleasent shade of blue which I personally find easier to navigate.

Faux Columns should technically be rather an easy concept, but the bit that took me time to understand is how to get them in the right place.

It's simply a case of knowing precisely where you want them and applying them there. For example, if you had 2 columns with a header and footer, obviously you wouldn't want them to continue past the footer or beneath the header which they would if they were applied to the body.

Instead you create a container specifically to put the two columns in and hold the background image.

Rather then Header - Column Left - Column Right - Footer, you'd now have Header - Container - Footer. You simply apply the background image to the container div, and put both columns inside that.

Do I make sense? Smile

Have YOU said Hello yet?
The CSSCreator Hello Thread

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

you should be able to use

you should be able to use the wrapper. what do you mean by the bg sits inside the wrapper and can't be seen properly? If it's wider than the wrapper, then make the wrapper wider with left and right padding.

altast
altast's picture
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2007-07-26
Posts: 7
Points: 0

Thank you (Burlster)

I am not sure if I was clear enough. I am not targeting a column. I am targeting the body. As a result the background image repeats all the way down the page, when I target another element such as the wrapper, the image sits inside it. I have attached an jpeg of the problem.

(Be gentle, I am a newbie, I have edited my posting to enclose the code)

AttachmentSize
example.jpg 22.67 KB
burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 50 weeks 6 days ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

A touch confused

I think I'm a bit confused. The image that you've attached... is that what you have currently or is that what you want to achieve?

So am I right in saying you want the column to go from the very top of the page all the way down to the footer but then stop?

Smile

Have YOU said Hello yet?
The CSSCreator Hello Thread

altast
altast's picture
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2007-07-26
Posts: 7
Points: 0

Thank you Wolfcry911

Thank you for your help Smile

I think I am on the right track with your suggestion. I have included a screen shot of the effect of adding the background image to the #wrapper and adding padding to the left.

Would I be right in thinking I actually need two wrappers? One to target with the background image and another to add the borders to the left and right?

I have been weary of using to many

AttachmentSize
example2.jpg 22.64 KB
burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 50 weeks 6 days ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Getting warmer

If I had to guess, I would guess that you are referring to the shadowy outside bit? That isn't technically a faux column, but is just a vertically repeating background image to give the effect of a fancy border.

The solution (if my guess is close), would be that you would still need a container to stick the background image in (you can't stop a repeating bg image, but you can stop whatever is holding it).

However, the containing div could sit hard against the top of the page and hard against the footer using margin and padding : 0. That would give the illusion the column goes all the way down the page stopping at the footer, but in actual fact it wouldn't. Oh, come to think of it, you probably want to put the footer in there too, but that doesn't change my explanation.

Think of one of those clever toys you get which have sensors underneath and keep going until they find the edge then turn in a different direction... repeating background images are just like that. They can't be controlled because they're simple toys designed to go until they hit the edge, but you can control where the edge is!

Have YOU said Hello yet?
The CSSCreator Hello Thread

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 50 weeks 6 days ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Sorry

:bigoops:

Ignore my last post probably, sorry, I should have been more patient instead of interrupting you.

I shall have a look at your last post now!

Have YOU said Hello yet?
The CSSCreator Hello Thread

altast
altast's picture
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2007-07-26
Posts: 7
Points: 0

That's right

In answer to your question...
The example is what is currently happening.

Yes you are right in saying...
I would like the column to go from the very top of the page all the way down to the footer but then stop.

Any help would be appreciated Smile

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 50 weeks 6 days ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Complex

Ok, how I see it (simplified) is like such...

We have a container div. It sits hard against the top of the browser courtesy of margin and paddings set to 0 for the top property. It has a vertically repeating background image with the gradient border either side in it (so the image is the whole background strip).

Then we stick in your white content div with the appropriate width set, centred to ensure either side it is not covering up the important bits of your background image. Does that make sense? So it is a solid white box, with the gradient background image showing through either side to sit against it.

Then in that container box we sit your Footer, with the same width as the content div, and that sits with no margin or padding against the bottom so there is no gap between it and the bottom of the container div, thus stopping the background image repeating after the footer.

Sorry, I do not have the tools right now to show you what I mean with an image Sad

Have I lost you?

Have YOU said Hello yet?
The CSSCreator Hello Thread

altast
altast's picture
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2007-07-26
Posts: 7
Points: 0

Getting there...

That is what I thought, however, when I target the wrapper I get the effect shown in example2.jpg, which looks like the image is trapped inside.

I think the reason the image will not neatly float behind the wrapper, is that it is instead being contained within it (I am guessing here, so feedback would be welcome).

Therefore I come back to my original question (as a result of Wolfcry911), do I need two wrappers. One to contain the mainContent and the other to target with the background image?

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 50 weeks 6 days ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

I'm going to say yes then.

I'm going to say yes then. Play around with the idea of having two and see how it comes out.

Let me know how you get on Laughing out loud

Have YOU said Hello yet?
The CSSCreator Hello Thread

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

No, make the border part of

No, make the border part of the bg image.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 50 weeks 6 days ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Counter-Productive

I get the feeling Wolfcry is right, and I've just got horribly confused in what is wanted. Think I might stop intefering now, I'm probably just making things worse.

But yes, I'm pretty sure you can include all the border images in to a single image of a certain width.

Have YOU said Hello yet?
The CSSCreator Hello Thread

altast
altast's picture
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2007-07-26
Posts: 7
Points: 0

Thanks

I can see how that would work. Smile