{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 :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+

[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 :P

[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-dudeOk. Didn't understand anything about that :P


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

Like, what the hell is that meant to mean?
Marginals between the spaces? :P


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

i geuss you deserve a +rep :PThanks =)

[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 :P

[Dilore]

well, since most of the browsers in the world have IE, it'd better to code in for IE :PYou haven't heard about Firefox have you??

[Meti]

Ofcouse I have. I use it too sometimes.

But IE comes with your computer, so everyone has it.

[Aflux]

well, since most of the browsers in the world have IE, it'd better to code in for IE :P
That doesn't make sense either.

[L?KE]

I'm sorry but this could have been found easy by a qiuck google search, and I swear you even left out classes?

[RichardKnox]

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

Sorry, what? Background images work in Firefox...

[Meti]

I'm sorry but this could have been found easy by a qiuck google search, and I swear you even left out classes?

i actually did :P

[Decode]

Ofcouse I have. I use it too sometimes.

But IE comes with your computer, so everyone has it.
So you are saying that web developers should just support IE?

Sorry, what? Background images work in Firefox...
Padding + margin adds width to boxes in IE where as Firefox keeps it at 100px causing the background image to run short on FF.

[Jackboy]

it'd better to code in for IE :P

Get off this forum and take english lessons.

Edited by MattGarner (Forum Super Moderator): Please do not be rude towards other members.

[L?KE]

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

Lol.

1. Browsers themselves don't have IE. (Unless you mean web browsers, as in people)
2. Just because more people have it doesn't mean it's better to code for it, it's better to code for all browsers.

[Iszak]

Technically his sentence makes sense - as browsers are the people browsing websites thus being browsers. Sure it's not the best combination because a browser is also the software. But anyhow - as I said to Tom about padding and margin - it only adds to the box if you don't declare a doctype as stated in another post. Read up on doctypes - http://www.w3.org/QA/Tips/Doctype. It clearly states



But the most important thing is that with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a "standard" parsing mode, where the understanding (and, as a result, the display) of the document is not only faster, it is also consistent and free of any bad surprise that documents without doctype will create.

[Meti]

Get off this forum and take english lessons.What? I'll stay here if I want.
It's not like you don't understand what I say? It's not like I talk to you in Swedish?

So ******** annoying


Lol.

1. Browsers themselves don't have IE. (Unless you mean web browsers, as in people)
2. Just because more people have it doesn't mean it's better to code for it, it's better to code for all browsers.
lol. I mean web browsers :P

[Jackboy]

What? I'll stay here if I want.
It's not like you don't understand what I say? It's not like I talk to you in Swedish?

So ******** annoying


Ahh i didn't know you were Swedish....

My bad, soz :P

[Meti]

Lol =) it's ok ;)