CSS Mess
Author |
Message |
ProgrammingFun
|
Posted: Sat Aug 28, 2010 12:19 pm Post subject: CSS Mess |
|
|
I am very, very new to CSS and was using it to design a website. I wanted a rule which would give me a fixed background so that my site could scroll without the background moving.
After hours of Googling, I found the following code to help me in sticking my background.
However, I have noticed that this code has also disabled the scrolling on my webpage.
Can anyone help me in redesigning this code so that I get a fixed background but can still scroll on my site?
Thanks for the time.
HTML: |
<style type="text/css">
html, body {width:100%; height:100%; padding:0; margin:0; background:#fff;}
html {overflow:hidden;}
body {
font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(images/background.png);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:22px; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>
|
|
|
|
|
|
|
Sponsor Sponsor
|
|
|
Tony
|
|
|
|
|
ProgrammingFun
|
Posted: Sat Aug 28, 2010 2:11 pm Post subject: Re: RE:CSS Mess |
|
|
Tony @ Sat Aug 28, 2010 12:32 pm wrote: You just need background-attackment -- http://www.w3schools.com/css/pr_background-attachment.asp
What you have has elements that I suspect you are not using and was probably meant for something else. Likely there's a custom "scroller" element.
I tried adding just the following (scrolling started to work)...
CSS: |
<style type="text/css">
body {
font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(images/background.png);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
|
...but then the background stops showing ( I want to keep the font family and the fixed background, nothing else).
If I write out like this...
CSS: |
<style type="text/css">
html, body {width:100%; height:100%; padding:0; margin:0; background:#fff;}
body {
font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(images/background.png);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:22px; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
}
</style>
|
...the page is able to scroll but the background no longer remains fixed.
Here is my complete <head> (with the old version of the CSS command (no scroller)):
HTML: |
<head>
<link rel="shortcut icon" type="x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website </title>
<!-- Hover link begins -->
<style type="text/css">
.footlink { COLOR: black; TEXT-DECORATION: none; }
.footlink:hover { TEXT-DECORATION: underline; }
</style>
<!-- Hover link ends -->
<style type="text/css">
html, body {width:100%; height:100%; padding:0; margin:0; background:#fff;}
html {overflow:hidden;}
body {
font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(images/background.png);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:22px; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>
<!-- Menubar script begins -->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- Menubar Script ends -->
</head>
|
|
|
|
|
|
|
DtY
|
Posted: Sat Aug 28, 2010 4:51 pm Post subject: RE:CSS Mess |
|
|
Hey, I know this is not what you want to hear, but please, please do not use pixels to measure a font size.
When you tell a browser to use a 12px font, that means 12px no matter where it's viewed, which is pretty small if you were to print it at 300dpi (of course, browsers wouldn't actually print 12px at 300dpi, but that's what you're telling them to do).
If I set my default font size to something bigger, it's probably because I want a bigger font. If you assign it in pixels, my choice suddenly means nothing, which as a web user, I probably do not want.
Check out this article: http://htmldog.com/articles/elasticdesign/
|
|
|
|
|
|
ProgrammingFun
|
Posted: Sat Aug 28, 2010 8:03 pm Post subject: Re: RE:CSS Mess |
|
|
DtY @ Sat Aug 28, 2010 4:51 pm wrote: Hey, I know this is not what you want to hear, but please, please do not use pixels to measure a font size.
When you tell a browser to use a 12px font, that means 12px no matter where it's viewed, which is pretty small if you were to print it at 300dpi (of course, browsers wouldn't actually print 12px at 300dpi, but that's what you're telling them to do).
If I set my default font size to something bigger, it's probably because I want a bigger font. If you assign it in pixels, my choice suddenly means nothing, which as a web user, I probably do not want.
Check out this article: http://htmldog.com/articles/elasticdesign/
Thanks for the tip, I'll look into it...
Any ideas on how I can fix my background issue?
|
|
|
|
|
|
DtY
|
Posted: Sun Aug 29, 2010 7:25 am Post subject: RE:CSS Mess |
|
|
Have you tried validating the CSS? Sometimes doing that will point out errors you wouldn't have otherwise noticed: http://jigsaw.w3.org/css-validator/
Just keep in mind that -o-, -moz- and -webkit- rules will give you an error, but you can safely ignore those.
|
|
|
|
|
|
ProgrammingFun
|
Posted: Sun Aug 29, 2010 8:52 am Post subject: Re: RE:CSS Mess |
|
|
DtY @ Sun Aug 29, 2010 7:25 am wrote: Have you tried validating the CSS? Sometimes doing that will point out errors you wouldn't have otherwise noticed: http://jigsaw.w3.org/css-validator/
Just keep in mind that -o-, -moz- and -webkit- rules will give you an error, but you can safely ignore those.
I don't even know anything about these CSS rules, the code that I'm trying to fix was given on some tutorial website and it worked for me (at that time, I didn't need a scroller).
BTW, the website isn't online yet...so I can't validate the CSS right now.
|
|
|
|
|
|
DtY
|
Posted: Sun Aug 29, 2010 10:37 am Post subject: RE:CSS Mess |
|
|
There's a tab to check by either uploading a file or pasting it directly. Just gave it a try, and the only errors were the CSS 3 rules you were using.
Can you post the full page, or at least a page with content in it, so we can try it out? Just looking at the CSS, I don't see anything wrong.
|
|
|
|
|
|
Sponsor Sponsor
|
|
|
ProgrammingFun
|
Posted: Sun Aug 29, 2010 12:17 pm Post subject: Re: RE:CSS Mess |
|
|
DtY @ Sun Aug 29, 2010 10:37 am wrote: There's a tab to check by either uploading a file or pasting it directly. Just gave it a try, and the only errors were the CSS 3 rules you were using.
Can you post the full page, or at least a page with content in it, so we can try it out? Just looking at the CSS, I don't see anything wrong.
Here is an example (I pasted stuff from Wikipedia).
Description: |
This page will not scroll and when it does scroll, the image no longer remains fixed. |
|
Download |
Filename: |
Example.zip |
Filesize: |
141.37 KB |
Downloaded: |
374 Time(s) |
|
|
|
|
|
|
Brightguy
|
Posted: Sun Aug 29, 2010 1:51 pm Post subject: Re: CSS Mess |
|
|
Clear the unnecessary rules you applied to html (really, you should start clean). overflow:hidden; will hide the scrollbar. background:#fff; will probably overlap your fixed background, and maybe that is confusing you.
|
|
|
|
|
|
ProgrammingFun
|
Posted: Sun Aug 29, 2010 3:14 pm Post subject: Re: CSS Mess |
|
|
Brightguy @ Sun Aug 29, 2010 1:51 pm wrote: Clear the unnecessary rules you applied to html (really, you should start clean). overflow:hidden; will hide the scrollbar. background:#fff; will probably overlap your fixed background, and maybe that is confusing you.
Thanks so much, that fixed my problem!
I had realized the overflow but was confused by the white overlapping.
Here is the final code for that CSS rule:
css: |
<style type="text/css">
html, body {width:100%; height:100%; padding:0; margin:0;}
html {overflow:visible;}
body {
font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(images/background.png);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:22px; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>
|
I am going to worry about cleaning up the rest of the code for v2 of the website (this version was made in a rush)
|
|
|
|
|
|
ProgrammingFun
|
Posted: Mon Sep 20, 2010 9:23 pm Post subject: RE:CSS Mess |
|
|
A little late but...
it turns out that IE did not support the above code, so I ended up using a white background after all.
|
|
|
|
|
|
|
|