Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 CSS Mess
Index -> Web Design
View previous topic Printable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
ProgrammingFun




PostPosted: 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
Sponsor
sponsor
Tony




PostPosted: Sat Aug 28, 2010 12:32 pm   Post subject: RE:CSS Mess

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.
Latest from compsci.ca/blog: Tony's programming blog. DWITE - a programming contest.
ProgrammingFun




PostPosted: 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




PostPosted: 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




PostPosted: 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... BooHoo
Any ideas on how I can fix my background issue? Confused
DtY




PostPosted: 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




PostPosted: 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




PostPosted: 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
Sponsor
sponsor
ProgrammingFun




PostPosted: 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).



Example.zip
 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:  378 Time(s)

Brightguy




PostPosted: 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




PostPosted: 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




PostPosted: 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. Mr. Green
Display posts from previous:   
   Index -> Web Design
View previous topic Tell A FriendPrintable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 1  [ 12 Posts ]
Jump to:   


Style:  
Search: