I'm so inexperienced, I don't even know how to ask this question. I see nice webpages surrounded by lovely colors. I read that pages should be about 960 pixels wide, so that's what I made mine. I figured out how to choose the page background, but the page was left with an inch or so of gray surrounding it in the remainder of the screen. How can I change that gray to one of those lovely colors? Thanks.
JoDee,
This is how I set up my CSS where the body background is an image instead of a color and the wrapper has a background-color for the 'page'.
body
{
font-family:Verdana, Helvetica, Arial, sans-serif;
line-height:18px;
font-size:100%;
color:#FFFFCC;
background-image:url('../images/natfl009.jpg');
}
#wrapper
{
float:left; width:100%; background-color:#48583E;
}
This is how I set up my CSS where the body background is an image instead of a color and the wrapper has a background-color for the 'page'.
body
{
font-family:Verdana, Helvetica, Arial, sans-serif;
line-height:18px;
font-size:100%;
color:#FFFFCC;
background-image:url('../images/natfl009.jpg');
}
#wrapper
{
float:left; width:100%; background-color:#48583E;
}
JoDee, if you want to see the background, and with a width of 960 pixels, I would write the styles for the wrapper like this:
#wrapper
{
margin: auto; width:960px; background-color:#48583E;
}
The 'margin: auto;' bit also centers the content.
#wrapper
{
margin: auto; width:960px; background-color:#48583E;
}
The 'margin: auto;' bit also centers the content.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Can you post a link to your webpage, so we can see what you are saying. Because if you put image in the background then it would tile and you would not see gray.
So maybe you set the wrong background? For the background behind the webpage you go here to set:
From the menu, select "Settings"
Then select "Background fill properties"
Then you have 3 choices to choose a color, image or continue the page background.
Here is what the pop up screen will look like:
http://www.coffeecuphelp.com/krickman/helppics/vsd_backgroundfill.jpg
If this is what you did then, please put a link to your page showing the problem, so that we can see if there is another problem.
Also when you are working in the VSD program, you will not see the background you choose. It always shows gray. To view what the choice will look like you need to view it by clicking the preveiw button or testing in browser.
Kim
So maybe you set the wrong background? For the background behind the webpage you go here to set:
From the menu, select "Settings"
Then select "Background fill properties"
Then you have 3 choices to choose a color, image or continue the page background.
Here is what the pop up screen will look like:
http://www.coffeecuphelp.com/krickman/helppics/vsd_backgroundfill.jpg
If this is what you did then, please put a link to your page showing the problem, so that we can see if there is another problem.
Also when you are working in the VSD program, you will not see the background you choose. It always shows gray. To view what the choice will look like you need to view it by clicking the preveiw button or testing in browser.
Kim
Thanks to those who answered. Kim, that step by step was really helpful. I'm using the HTML editor. I had to start over, so the link below leads to what I've redone. The page is set at 960 pixels wide. The picture is 800 pixels wide. I could make the picture 960 if that would look better. I'm no longer seeing gray strips up the right and left side. I have no idea what it looks like to someone else. If it's correct, then my next step is to add menu buttons for home, contact, and so forth under the picture, and categories down the left side. And guess what? I don't know how to do that either. A tip would be most welcome. But again THANKS to everyone. You've been kind and patient. JoDee
stonycreekstore.com
stonycreekstore.com
Is the picture the banner you currently have on the website. It floats to the right on my browser. I looked at your code. One of the issues I see is that you have it set to position:absolute. This does allow you more control over the image, but it does not let you resize the way you want.
It also makes a difference if the image you refer to is a banner, or a background image? I would suggest much different code for a banner than I would a background.
It also makes a difference if the image you refer to is a banner, or a background image? I would suggest much different code for a banner than I would a background.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
if you add:
#wrapper {background-color:#80FF80; width:800px; margin-left:auto; margin-right:auto;}
to your css
then wrap your page code in a <div> like this
your page will be auto centered regardless of the screen size your users are at.
Also your first anchor reference was htt, rather than http:// that is probably why it won't link back to the site, but no problem, quick fix.
Don't hesitate to drop on in and ask questions, we like questions
#wrapper {background-color:#80FF80; width:800px; margin-left:auto; margin-right:auto;}
to your css
then wrap your page code in a <div> like this
<div id=wrapper>
<a href="http://www.stonycreekstore.com/"><img title="Stony Creek General Store" border="0" alt="Stony Creek" src="images/creekpic.jpg" width="800" height="249"/> </a>
</div>
<a href="http://www.stonycreekstore.com/"><img title="Stony Creek General Store" border="0" alt="Stony Creek" src="images/creekpic.jpg" width="800" height="249"/> </a>
</div>
your page will be auto centered regardless of the screen size your users are at.
Also your first anchor reference was htt, rather than http:// that is probably why it won't link back to the site, but no problem, quick fix.
Don't hesitate to drop on in and ask questions, we like questions

Volunteering to help 
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/

http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
david wilson wrote:
if you add:
#wrapper {background-color:#80FF80; width:800px; margin-left:auto; margin-right:auto;}
to your css
then wrap your page code in a <div> like this
your page will be auto centered regardless of the screen size your users are at.
Also your first anchor reference was htt, rather than http:// that is probably why it won't link back to the site, but no problem, quick fix.
Don't hesitate to drop on in and ask questions, we like questions
if you add:
#wrapper {background-color:#80FF80; width:800px; margin-left:auto; margin-right:auto;}
to your css
then wrap your page code in a <div> like this
<div id=wrapper>
<a href="http://www.stonycreekstore.com/"><img title="Stony Creek General Store" border="0" alt="Stony Creek" src="images/creekpic.jpg" width="800" height="249"/> </a>
</div>
<a href="http://www.stonycreekstore.com/"><img title="Stony Creek General Store" border="0" alt="Stony Creek" src="images/creekpic.jpg" width="800" height="249"/> </a>
</div>
your page will be auto centered regardless of the screen size your users are at.
Also your first anchor reference was htt, rather than http:// that is probably why it won't link back to the site, but no problem, quick fix.
Don't hesitate to drop on in and ask questions, we like questions

Dave is correct. In addition to this make sure that if you do what Dave mentions then you do it to all of the elements on your page so that when the screen resizes your whole page moves with your banner.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
It also makes a difference if the image you refer to is a banner, or a background image? I would suggest much different code for a banner than I would a background.
The image is not a banner, but it's not a background, either. It's just a picture I wanted at the top of my page. The background I refer to is just a teal color background on the rest of the page. The color is CCFFFF. I simply wanted the picture to be at the top center, and beneath it the row of links to home, contact and about.
if you add:
#wrapper {background-color:#80FF80; width:800px; margin-left:auto; margin-right:auto;}
to your css
then wrap your page code in a <div> like this
<div id=wrapper>
<a href="http://www.stonycreekstore.com/"><img title="Stony Creek General Store" border="0" alt="Stony Creek" src="images/creekpic.jpg" width="800" height="249"/> </a>
</div>
your page will be auto centered regardless of the screen size your users are at.
Also your first anchor reference was htt, rather than http:// that is probably why it won't link back to the site, but no problem, quick fix.
#wrapper {background-color:#80FF80; width:800px; margin-left:auto; margin-right:auto;}
to your css
then wrap your page code in a <div> like this
<div id=wrapper>
<a href="http://www.stonycreekstore.com/"><img title="Stony Creek General Store" border="0" alt="Stony Creek" src="images/creekpic.jpg" width="800" height="249"/> </a>
</div>
your page will be auto centered regardless of the screen size your users are at.
Also your first anchor reference was htt, rather than http:// that is probably why it won't link back to the site, but no problem, quick fix.
Man, did I ever fall down the rabbit hole. I thought I could learn enough HTML to put up this website, but now I can see that I probably can't. David, and the rest of you, If I had any idea at all how to do what you suggested, I'd do it in a heartbeat. I'm not giving up yet. I'll read the manuals I've got and try to figure this out. And you all have my sincere gratitude. Thanks so much! JoDee
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.