{Guide} DIVs and CSS basics!

[Meti]

Hey there!
I'm bored, so I've decided to create a guide about the DIV and CSS basics.
Hope this helps some of you guys!

Meti
-----------------------------------------------------------------
Basic DIV and CSS:
A basic DIV code will look like this:

<div id="CSSNAME"></div>

And a basic CSS code will look like this:

#CSSNAME {
}

-----------------------------------------------------------------
Some basic CSS codes:
margin:- Basicly marginals between the spaces.
The margin codes could look like this:

margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin: auto;

Margin: auto; centers the layout/image/div

But you could add:

margin: 0px;

To the body tag, and then it will be easier for you to do the full screen sizes


Padding:- Positioning the text
Could look like this:

padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;

background-image: url(folder/picture.png); - This is the background of the image.

width: 0px;- This is the width of the image/div
height: 0px;- This is the height of the image/div

float:- Makes your image/div float
Could look like this:

float: left;
float: right;

I personally never use float:right;

color:- Change the font color
Could look like this:

color: #FFFFFF;

- makes your text white

-----------------------------------------------------------------
I guess that's all I can get in my head atm
Please tell me if there are some thing I've forgotten.

You are not allowed to post this on other forums without permission from Meti Mulaj. Copyright © Meti Mulaj 2008+

[D-Man22]

Great tut, even though I dont need it! +REP -- shouldnt this be in the tut section?

[Meti]

Thanks.
It has to be moved there by the Forum Staff

[CS-dude]

Hey,

The trick with float:right; is that the content sitting to its left actually has to appear after the floated div in the html
Can be a bit confusing as it goes against the normal left-to-right mentality.

CS-dude

[Aflux]

You don't explain things very well i.e;

Basicly marginals between the spaces.

Like, what the hell is that meant to mean?

[HabbDance]

pretty good tut, some was unclear, but ik it is hard to explain, i've tried.

i geuss you deserve a +rep

[Meti]

Hey,

The trick with float:right; is that the content sitting to its left actually has to appear after the floated div in the html
Can be a bit confusing as it goes against the normal left-to-right mentality.

CS-dude

Ok. Didn't understand anything about that

You don't explain things very well i.e;

Like, what the hell is that meant to mean?

Marginals between the spaces?

pretty good tut, some was unclear, but ik it is hard to explain, i've tried.

i geuss you deserve a +rep

Thanks =)

[Monopoly]

It's alright.
It's kind of scattered though. Like you've sat and just typed the random facts about CSS and divs that came into your head.
Try next time to make a tutorial about actually doing something?
Maybe explain what a div is and what it does etc.
Fair attempt, I'll give you some of my 1 REP power.

[Decode]

That is IE only if you are going to use background images.

[Meti]

well, since most of the browsers in the world have IE, it'd better to code in for IE