About the various styles/codes: unfortunately I'm not a programmer and entirely unfamiliar with the differences. I just copy/paste stuff and watch how that turns out. ;)
Right, exactly what I figured. Here's a quick way to tell what you're looking at: CSS will always look like this: element{property:value;}
In real life CSS, the element is the part of the page you want to change, like "body", "tertiary", "a:link", "ul li", etc.
The property is the thing you want to set on the element, like the "margin", "padding", "color", "background-color", "border", etc. You'll notice in my examples there's no programming-like codes or anything else odd-looking mixed in, it's all written in natural-looking, human-readable language.
The value is what you want to set the properties to.
Again, no programming-like dollar signs or anything else are to be found here, either (when you get into hacking CSS, especially for IE, this is not strictly true anymore, but for purposes of writing basic CSS, it is).
Your value can be set in numbers and pixels (px), ems (em), percentages {%} or it could be a word like "transparent" (for backgrounds), "solid" (for borders that inherit the color of a parent element), hex codes (for colors, which always look something like this: "#000" or "#000000") or color names ("blue", "red", etc). And there's more, this is just a short list.
So to complete the thought (and 'just for example', since it seems you already have your page set slightly off-center and to the right like you want it) say you want to offset the body element of your journal by setting a margin-left property with a 40px value. So you'd write:
body {margin-left: 40px;}
What you see in the s2 code you're looking through and copying? That's not CSS. It's more like how Dreamwidth uses the s2 programming language to set the basic style of the page (like this line found in your CSS: #footer a, #footer a:link, #footer a:active { color: this is s2, it won't do anything, but it will break your page as far as the browser checking for valid CSS goes-->$*color_footer_link; } by telling the s2 compiler how to make your page look.
The compiler takes the s2 commands, checks them against the basic page structure (which has also been set with s2 - in fact, this command: $*color_footer_link tells the compiler to "look for" and "use" the color that's already been set in the base s2) then prints out (displays) the result.
Web browsers can't read s2, Perl, or any other compiled language that you put in the style sheet (or the Custom CSS box, for purposes of our walk-through) because CSS is not a compiled language. It's also not a programming language. It's just a rigidly defined set of commands that the browser knows how to read to figure out how to make your web page look.
Compiled languages? The browser has no control over them at all. That's all done on server-side (not client-side, which is on *your* end, strictly through the browser).
Hope that helps a little...also, just noticed you have this in your CSS:
To set the margin correctly, just leave out the commas (but always leave in the spaces when you use CSS shorthand).
#canvas { margin: 0 0 0 0;}
If you have any questions, let me know. (Also, when you take out those commas? Your page will center. At which point, if you'll go ahead and take out all the s2 commands, too, I'll see what I can do to help you. :)
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
onlyembers
no subject
Date: 2012-03-16 03:23 am (UTC)Right, exactly what I figured. Here's a quick way to tell what you're looking at: CSS will always look like this:
element{property:value;}In real life CSS, the element is the part of the page you want to change, like "body", "tertiary", "a:link", "ul li", etc.
The property is the thing you want to set on the element, like the "margin", "padding", "color", "background-color", "border", etc. You'll notice in my examples there's no programming-like codes or anything else odd-looking mixed in, it's all written in natural-looking, human-readable language.
The value is what you want to set the properties to.
Again, no programming-like dollar signs or anything else are to be found here, either (when you get into hacking CSS, especially for IE, this is not strictly true anymore, but for purposes of writing basic CSS, it is).
Your value can be set in numbers and pixels (px), ems (em), percentages {%} or it could be a word like "transparent" (for backgrounds), "solid" (for borders that inherit the color of a parent element), hex codes (for colors, which always look something like this: "#000" or "#000000") or color names ("blue", "red", etc). And there's more, this is just a short list.
So to complete the thought (and 'just for example', since it seems you already have your page set slightly off-center and to the right like you want it) say you want to offset the
bodyelement of your journal by setting amargin-leftproperty with a40pxvalue. So you'd write:body {margin-left: 40px;}What you see in the s2 code you're looking through and copying? That's not CSS. It's more like how Dreamwidth uses the s2 programming language to set the basic style of the page (like this line found in your CSS:
#footer a, #footer a:link, #footer a:active { color: this is s2, it won't do anything, but it will break your page as far as the browser checking for valid CSS goes-->$*color_footer_link; }by telling the s2 compiler how to make your page look.The compiler takes the s2 commands, checks them against the basic page structure (which has also been set with s2 - in fact, this command:
$*color_footer_linktells the compiler to "look for" and "use" the color that's already been set in the base s2) then prints out (displays) the result.Web browsers can't read s2, Perl, or any other compiled language that you put in the style sheet (or the Custom CSS box, for purposes of our walk-through) because CSS is not a compiled language. It's also not a programming language. It's just a rigidly defined set of commands that the browser knows how to read to figure out how to make your web page look.
Compiled languages? The browser has no control over them at all. That's all done on server-side (not client-side, which is on *your* end, strictly through the browser).
Hope that helps a little...also, just noticed you have this in your CSS:
#canvas {margin: 0, 0, 0, 0;
padding: 2% 0;
text-align: justify;
width: 80%;
}
To set the margin correctly, just leave out the commas (but always leave in the spaces when you use CSS shorthand).
#canvas {margin: 0 0 0 0;}
If you have any questions, let me know. (Also, when you take out those commas? Your page will center. At which point, if you'll go ahead and take out all the s2 commands, too, I'll see what I can do to help you. :)