WARNING: It’s best to know basic HTML before attempting to read through and understand this tutorial. A good idea is to also read [Only registered and activated users can see links. ] before you read this.
The part we’ll be focusing on here is the "style" part.
What is style? Style shows how things will look on your layout. It sets the font, color, border, background color, background image, etc. for your layout.
Let’s say you’re coding a Xanga layout, and you’re making your own custom modules. For each section, you have a specific header and a specific layout of the section. It gets annoying to have to type out the style of the section and/or header every time you have a new section. Plus, it’s easy to make typos that mess up the whole look of the layout, and you have to spend hours going through your code, trying to find the mistake. That’s where stylesheets come in.
Stylesheets, often referred to as CSS, are a way to make your codes clean, neat, and easy to read. They organize all the information into one stylesheet, so that you don’t have to type it all out every time you have a new div.
A stylesheet looks like this:
Code:
<style type="text/css"> stylesheet stuff go here </style>
<style type=”text/css”> shows the beginning of the stylesheet, and </style> shows the end of the stylesheet. Everything that goes between the two tags is part of the style.
Look familiar? These specify the scrollbar colors and the background image and colors of the main site. The .body part of the code means this applies to the entire site. It's what I call the title. (Sorry, I don't know the actual term for it.)
Everything after .body is put in brackets ({ and }). This is a must. Everything in a stylesheet (except the title) must go in between those brackets. Notice that each aspect is separated by a semicolon ( ; ). This is also a must. If you don’t put the semicolon between each aspect, the stylesheet won’t work.
Now let’s look at something a bit more complicated. We’re getting into assigning classes now.
It doesn’t look so complicated at first. Until you get to coding the div of the module.
So your module div looks something like this:
Code:
<div style="overflow: auto; margin-top: ###px; margin-left: ###px;">
<b>About Me</b>
NAME: Blahh<br>
AGE: 264<br>
HOBBIES: picking on little kids<br>
EXPERTISE: being crabby<br>
DISLIKES: good kids</div>
That’s fine. Except when you look at it through a Xanga, the fonts will be default, the div won’t have a border; everything you detailed in the stylesheet isn’t going to show up. Why is that?
Well, the computer can’t tell that the code above is for your module. So even if you specify everything in the stylesheet, it’s not going to show up that way. What you need to do is link the stylesheet to the div.
Look at the stylesheet again. See where it says “.module”? We’re going to call that the div class.
Now go back to your module code. Insert class="module" before the style, so that it looks like this:
That’s how you assign a class to a div. The "div class" part is the link between the stylesheet and the actual div. If you look at it through a Xanga again, it will be the width, height, font, color, etc. of what you have in the stylesheet. Neat, huh?
i just have a question about div layouts, for some reason i could never get the repeating background to align with my image 0_o
[Only registered and activated users can see links. ] <---if you look closely you could see it's slightly disaligned, it was teh best i could do,i spent an hour trying to adjust the size of it so it would go alone...
it was a layout i was working on months ago, i quit it because it got oo frustrating and the dates kept disapearing everytime i made adjustments =/, why is that?
If you maximize your screen, it's aligned, but otherwise, it's not. The only solution I can think of is to put your image in a div, and have the repeating background in the div style.
Like this:
Code:
<div align="left" width="widthofimage" style="background-image: url(bgurlhere); background-repeat: repeat-y; background-position: left;">
<img src="imageurlhere" border="0">THE REST OF YOUR CODE (the module part, and the blog div) GO HERE. do NOT close this div. Otherwise it won't work.
^Hope that made sense.
There's one thing that goes wrong with this solution, though. It's that at the very bottom of the page, you have about 15px of blank space. Kinda annoying, but yeah. Not much you can do about it.
__________________
Something tells me I've been on this forum for way too long.
Whatever you've classed your div as, you can add something in the stylesheet with the same title as the class name. That way, you don't have to type out the div style every single time for custom modules and such.
__________________
Something tells me I've been on this forum for way too long.
It shows that you are unregistered. Please register with us by clicking Here
Linear Mode
