The above code works exactly as you have it defined.
It may not be doing what you thought it may do but it is working without problem.
You would rarely use a margin-left on the body element as that effectively loses you 23% of the vieport. You should leave the body alone as far as margins are concerned and add margins to the inner elements where appropriate.
What were you expecting from your code above? It gives a fixed positioned image and a body element with a margin-left of 23%.
That css page is on my server and I can’t get it back to discover how I did it as it has been inadvertently overridden with new code.
All day today I’ve been working from scratch on selected css from your examples and am finally making some headway - except - my background image is not fixed.
All three of the background lines of code below are directly from W3c
In looking at my Internet site the background image DOES stay fixed. However, the css sheet I uploaded to the server no longer exist on my computer as it was inadvertently saved over so I’m creating a new one using the three lines of code referrenced in the Wc3 and compiling examples provided by you. It’s all working except the background image is scrolling - not stationary.
Those three lines of code are not working as the background images is scrolling with the page.
Validation Output: 6 Errors
1. Line 8, Column 20: document type does not allow element "div" here; assuming missing "body" start-tag
<div id="outer">
2. Line 9, Column 6: document type does not allow element "body" here
<body>
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
3. Line 40, Column 7: end tag for "div" omitted, but OMITTAG NO was specified
</html>
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
4. Line 8, Column 5: start tag was here
<div id="outer">
5. Line 40, Column 7: end tag for "body" omitted, but OMITTAG NO was specified
</html>
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
6. Line 8, Column 5: start tag was here
<div id="outer">
For sure I’m not able to understand these. They are a likely result of me fiddling with them to get the result (alignment, etc.) that I was hoping for.
I’ve attached a 46k InternetPageLyout.pdf file to kind of show what I’m looking for. I will have approximately 46 separate pages (One for each city) with three to four charts on each so page I’m trying to get this really tight for speed.
I haven’t started on my home page yet. Other pages will mostly be h2 with <p> text and of course header and footer as on the example.
Using the markUp and CSS I have hoe to I get to the design I have attached?
In looking at my Internet site the background image DOES stay fixed. However, the css sheet I uploaded to the server no longer exist on my computer as it was inadvertently saved over so I’m creating a new one using the three lines of code referrenced in the Wc3 and compiling examples provided by you. It’s all working except the background image is scrolling - not stationary.
If you lose a style sheet on your hard drive but it is still on the server you can simply grab a copy from the server. Your current style sheet is: http://www.propertieswithstyle.com/testcss.css
I often go to view source and find the name of a style sheet so I can look at it to see if I can understand how a page is built.
Karin
Or since it is your site, you should be able to download it via file manager or ftp.
You can also just click Command + Shift + C (that’s for a Mac, not sure for PC) to open the style sheet in a new tab. Or, using Firebug for Firefox or the developer tools for other browsers, you can look at the underlying code at the same time as viewing the web page.
I’ve got codeburner for Firefox but haven’t gotten around to learning how to use it. I just played with it a bit. Looks worth taking the time to learn to use it.
Do you really mean Codeburner, or Firebug? Codeburner is a handy link to the sitepoint reference documents.
Firebug is a really handy tool for looking under the hood at CSS, JS etc. You basically click a button to open it, so from a simple point of view, there’s nothing really to learn. Other browsers have similar tools, though Firebug allows you to modify the CSS and HTML, making it particularly power ful for testing and debugging. You can do a lot of stuff with JS, too, though I’m yet to get my head around that properly.
Nope, I just had Codeburner, although I haven’t gotten around to using it yet. It was promoted here awhile back. I just looked up Firebug and downloaded it. This definitely looks worth the time to learn to use.
body {
background-attachment: fixed[COLOR="Red"];[/COLOR]
background-color: #CC9900;
background-image: url("/images/redsquare.png");
font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
font-size: 100%;
line-height: 1.25;
padding: 8%;
}
After not posting for a while, you should provide an updated link, as it’s hard to work out where you are up to. Going by your last link, the image specified in the above code does not exist in your images folder anyway.
Make sure to change background-repeat: no-repeat to background-repeat: repeat, too.