Hello,
Okay, Odd query for you. I'll try and explain it as a clearly and explanative as possible, though as I'm confused about it, god knows what the end result of what you'll be reading will be!
Okay, I have this background image (that's attached). It's absolutely perfect in every sense, the colours, gradient and so forth, but it's limiting as it needs a set width. For example, our content has to be 760px to be in the "white".
Basically, what I need done is that I can be able to set the content of the site to say, 90% I guess that's pretty easy with body { width: 90%; margin: 0 auto; } in CSS.
However, by doing this, I'd still like the gradient on either side of the content like the current image has. That the content is in the white, and the gradient then starts from the edge of the content. I don't know if 90% is the correct width to be able to see the gradient, hopefully you'll notice.
Is this achieveable, as I don't want to limit it to a set width, as for users on high resolutions, the 7xx's width's are a little small, especially with our layout as we have content, navigation, login system etc in blocks on the right.
Any help is much appreciated, and hope I explained clearly enough.
As said, the GIF is attached.
Many thanks in advance.
Regards,You would have to make too seperate containers, one inside other. Then, split that background image into 2 pieces and put one as the background of the outside container like this:
background: #fff url("images/leftback.gif") top left repeat-y;
And then in the inner container, set the background up like this:
background: transparent url("images/rightback.gif") top right repeat-y;
(and make sure the inner container has a width of 100% of the outer one)Hi.
Here's kind of a good start...
You can do a layout with three columns and have your styles like so:
div#colLeft {
left: 0
}Sorry... I accidently hit submit before I finished. And Daniel beat me to it.
You don't have to split your image into two pieces. You can use the same image as the background. Just align it to the left for the left side of the page and the right for the right side of the page. You'd only have to worry about one image instead of two.
Just my two cents.Hello.
Thank you for your replies.
I am OK with CSS, however this is a bit beyond me!
I've included my basic HTML and CSS below (literally the frame, I've removed all "styling"). I would put it online, but I don't have a host, and the free ones muck it around with their ads. Apologies if this inconveniences you at all.
The Basic HTML is in .txt as an attachment.
How can I achieve that background on this, i.e. to make this CSS (please correct anything you see wrong, it works in every browser I've tried it on) to have say, 90% width and then the background gradients on each side?
Thanks again for any assistance you can provide.
Regards,any ideas guys, sorry?I'll work with it right now, but I'm doing other things aswell, so it may take a while.Originally posted by Daniel T
I'll work with it right now, but I'm doing other things aswell, so it may take a while.
Hi Daniel,
Thank you very much!
I've been playing around with it, and err... well, let's just say it's not going well!!!
Thanks again.
Regards,Hi there.
Did you manage to get it going? Or did anyone else?
I've still tried, and tried looking at other sites but cannot get it working at all.
Thanks again.
Regards,Oh, sorry, I was really busy last night, and kinda forgot about it
I'll work on it right now 
OK, I'm looking at this right now, and I don't really see where you want to apply the background.... 
Hiya.
Thanks
Ok, well, as you'll see by the layout, there's no container, but I wanted to have the content (so everything at the moment that's liquid) to be say, 85%, then the background - that you'll notice has an effect on either side to be applied to each side of the container.
Hope that makes some sense.
Regards,If your container has a width of 85%, there's no way you will be able to fit the background in, seeing there'll only be 7.5% on each side...Hmm yes, I see how you mean.
How would you do it? As I said, I'm not an expert in CSS at all, only to do what I've managed in the layout file (hope that was ok?)...
What way would you do / have you come up with?
Thanks again.
Regards,I would recomment making it a fixed or elastic layout (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/elastic/">http://www.alistapart.com/articles/elastic/</a><!-- m -->), as I am not a big fan of fluid ones...Hi there.
Sorry if this in unclear.
If you Download the bg.gif attachment at the beginning of this thread, and tile it, you'll see how there's a set "whitespace" for content, then the gradient effects start.
I'm fine with getting the width of a document to a certin perect, i.e. 80%, as I can just stick a <div id='container'>..</div> around the main content, and then use #container { width: 80%; background-color: #fff; } in css.
However, with the images, how can i make it so that the effects start on the left, and right of the content, despite how much whitespace there is? At the moment, there's a set width of how much "white" there is, I want to be able to have that effect on either side of my container, which will have an #fff background.
Hope that makes some kind of sense, apologies if it doesn't. Long, long day at work (13hrs)...
Regards,What yo could do is make the continainer have padding: 0px X; (where X = the width of the gradient) and a width of 80%....Originally posted by Daniel T
What yo could do is make the continainer have padding: 0px X; (where X = the width of the gradient) and a width of 80%....
Hiya Dan,
Thanks.
I would need to split the image up though, right?
Regards,I already have (in attatchment).
You will need to create 2 containers, and have the one with the background image on the right(the inner container have margin-right: -176px; and have 176px padding on the outter container.Hi again,
Thanks very much for doing that.
I'll have a go at doing that, and will do some research on what you mentioned, but my CSS is limited, but i'll let you know how i get on.
Thanks again.
Regards,OK, sounds good! If you need help with it, just ask!Hi again,
Still having absolutely no luck with this at all.
I tried creating two containers and using the widths you said, but it's not working at all - the background doesn't show on either side. God knows what I've done!
Regards,Hmmm.... I imagine you're testing in IE? IE doesn't add the padding onto the object, but rather includes the padding in the width of it. Not sure how you'll get around this, you may have to use a hackOriginally posted by Daniel T
Hmmm.... I imagine you're testing in IE? IE doesn't add the padding onto the object, but rather includes the padding in the width of it. Not sure how you'll get around this, you may have to use a hack
Hi there.
Yes, I was...
Hmm... I'll have another go at it, and then if it's still not working on all the browsers the current site does, then I'll use the set width one. Many sites use set widths, so it cannot be that bad.
Thanks again Daniel.
Regards,Also, if you would still like to do the fluid layout, you may find this (<!-- m --><a class="postlink" href="http://tantek.com/CSS/Examples/boxmodelhack.html">http://tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->) box model hack usefull.Hacks are almost never neccessary, like now for instance. Here is that background thing done with two div tags, if you're shooting for 100% width then you could use the body tag to replace the outer div tag.Thank you guys for that.
Okay, Odd query for you. I'll try and explain it as a clearly and explanative as possible, though as I'm confused about it, god knows what the end result of what you'll be reading will be!
Okay, I have this background image (that's attached). It's absolutely perfect in every sense, the colours, gradient and so forth, but it's limiting as it needs a set width. For example, our content has to be 760px to be in the "white".
Basically, what I need done is that I can be able to set the content of the site to say, 90% I guess that's pretty easy with body { width: 90%; margin: 0 auto; } in CSS.
However, by doing this, I'd still like the gradient on either side of the content like the current image has. That the content is in the white, and the gradient then starts from the edge of the content. I don't know if 90% is the correct width to be able to see the gradient, hopefully you'll notice.
Is this achieveable, as I don't want to limit it to a set width, as for users on high resolutions, the 7xx's width's are a little small, especially with our layout as we have content, navigation, login system etc in blocks on the right.
Any help is much appreciated, and hope I explained clearly enough.
As said, the GIF is attached.
Many thanks in advance.
Regards,You would have to make too seperate containers, one inside other. Then, split that background image into 2 pieces and put one as the background of the outside container like this:
background: #fff url("images/leftback.gif") top left repeat-y;
And then in the inner container, set the background up like this:
background: transparent url("images/rightback.gif") top right repeat-y;
(and make sure the inner container has a width of 100% of the outer one)Hi.
Here's kind of a good start...
You can do a layout with three columns and have your styles like so:
div#colLeft {
left: 0
}Sorry... I accidently hit submit before I finished. And Daniel beat me to it.
You don't have to split your image into two pieces. You can use the same image as the background. Just align it to the left for the left side of the page and the right for the right side of the page. You'd only have to worry about one image instead of two.
Just my two cents.Hello.
Thank you for your replies.
I am OK with CSS, however this is a bit beyond me!
I've included my basic HTML and CSS below (literally the frame, I've removed all "styling"). I would put it online, but I don't have a host, and the free ones muck it around with their ads. Apologies if this inconveniences you at all.
The Basic HTML is in .txt as an attachment.
How can I achieve that background on this, i.e. to make this CSS (please correct anything you see wrong, it works in every browser I've tried it on) to have say, 90% width and then the background gradients on each side?
Thanks again for any assistance you can provide.
Regards,any ideas guys, sorry?I'll work with it right now, but I'm doing other things aswell, so it may take a while.Originally posted by Daniel T
I'll work with it right now, but I'm doing other things aswell, so it may take a while.
Hi Daniel,
Thank you very much!
I've been playing around with it, and err... well, let's just say it's not going well!!!
Thanks again.
Regards,Hi there.
Did you manage to get it going? Or did anyone else?
I've still tried, and tried looking at other sites but cannot get it working at all.
Thanks again.
Regards,Oh, sorry, I was really busy last night, and kinda forgot about it
I'll work on it right now OK, I'm looking at this right now, and I don't really see where you want to apply the background.... Hiya.Thanks
Ok, well, as you'll see by the layout, there's no container, but I wanted to have the content (so everything at the moment that's liquid) to be say, 85%, then the background - that you'll notice has an effect on either side to be applied to each side of the container.
Hope that makes some sense.
Regards,If your container has a width of 85%, there's no way you will be able to fit the background in, seeing there'll only be 7.5% on each side...Hmm yes, I see how you mean.
How would you do it? As I said, I'm not an expert in CSS at all, only to do what I've managed in the layout file (hope that was ok?)...
What way would you do / have you come up with?
Thanks again.
Regards,I would recomment making it a fixed or elastic layout (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/elastic/">http://www.alistapart.com/articles/elastic/</a><!-- m -->), as I am not a big fan of fluid ones...Hi there.
Sorry if this in unclear.
If you Download the bg.gif attachment at the beginning of this thread, and tile it, you'll see how there's a set "whitespace" for content, then the gradient effects start.
I'm fine with getting the width of a document to a certin perect, i.e. 80%, as I can just stick a <div id='container'>..</div> around the main content, and then use #container { width: 80%; background-color: #fff; } in css.
However, with the images, how can i make it so that the effects start on the left, and right of the content, despite how much whitespace there is? At the moment, there's a set width of how much "white" there is, I want to be able to have that effect on either side of my container, which will have an #fff background.
Hope that makes some kind of sense, apologies if it doesn't. Long, long day at work (13hrs)...
Regards,What yo could do is make the continainer have padding: 0px X; (where X = the width of the gradient) and a width of 80%....Originally posted by Daniel T
What yo could do is make the continainer have padding: 0px X; (where X = the width of the gradient) and a width of 80%....
Hiya Dan,
Thanks.
I would need to split the image up though, right?
Regards,I already have (in attatchment).
You will need to create 2 containers, and have the one with the background image on the right(the inner container have margin-right: -176px; and have 176px padding on the outter container.Hi again,
Thanks very much for doing that.
I'll have a go at doing that, and will do some research on what you mentioned, but my CSS is limited, but i'll let you know how i get on.
Thanks again.
Regards,OK, sounds good! If you need help with it, just ask!Hi again,
Still having absolutely no luck with this at all.
I tried creating two containers and using the widths you said, but it's not working at all - the background doesn't show on either side. God knows what I've done!
Regards,Hmmm.... I imagine you're testing in IE? IE doesn't add the padding onto the object, but rather includes the padding in the width of it. Not sure how you'll get around this, you may have to use a hack
Originally posted by Daniel T Hmmm.... I imagine you're testing in IE? IE doesn't add the padding onto the object, but rather includes the padding in the width of it. Not sure how you'll get around this, you may have to use a hack
Hi there.
Yes, I was...
Hmm... I'll have another go at it, and then if it's still not working on all the browsers the current site does, then I'll use the set width one. Many sites use set widths, so it cannot be that bad.
Thanks again Daniel.
Regards,Also, if you would still like to do the fluid layout, you may find this (<!-- m --><a class="postlink" href="http://tantek.com/CSS/Examples/boxmodelhack.html">http://tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->) box model hack usefull.Hacks are almost never neccessary, like now for instance. Here is that background thing done with two div tags, if you're shooting for 100% width then you could use the body tag to replace the outer div tag.Thank you guys for that.