{Guide} DIVs and CSS basics!

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:

HTML Code:

---

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

---

And a basic CSS code will look like this:

HTML Code:

---

#CSSNAME {
}

---

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

HTML Code:

---

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:

HTML Code:

---

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:

HTML Code:

---

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:

HTML Code:

---

float: left;
float: right;

---

I personally never use float:right;

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

HTML Code:

---

color: #FFFFFF;

---

- makes your text white

-----------------------------------------------------------------
I guess that's all I can get in my head atm :P
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+

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

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

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

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

Quote:

---

Basicly marginals between the spaces.

---

Like, what the hell is that meant to mean?

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

i geuss you deserve a +rep :P

Quote:

---

Originally Posted by 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

---

Ok. Didn't understand anything about that :P

Quote:

---

Originally Posted by Aflux

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

Like, what the hell is that meant to mean?

---

Marginals between the spaces? :P

Quote:

---

Originally Posted by HabbDance

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

i geuss you deserve a +rep :P

---

Thanks =)

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. ;)

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

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