{Guide} DIVs and CSS basics!

Printable View

22-10-2008, 03:33 PM
Meti

{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+
22-10-2008, 03:35 PM
D-Man22

Great tut, even though I dont need it! +REP -- shouldnt this be in the tut section?
22-10-2008, 03:36 PM
Meti

Thanks.
It has to be moved there by the Forum Staff ;)
22-10-2008, 04:05 PM
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
22-10-2008, 06:16 PM
Aflux

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

Quote:

Basicly marginals between the spaces.

Like, what the hell is that meant to mean?
22-10-2008, 07:19 PM
HabbDance

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

i geuss you deserve a +rep :P
22-10-2008, 07:40 PM
Meti

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 =)
22-10-2008, 07:51 PM
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. ;)
22-10-2008, 07:52 PM
Decode

That is IE only if you are going to use background images.
23-10-2008, 01:56 PM
Meti

well, since most of the browsers in the world have IE, it'd better to code in for IE :P
23-10-2008, 02:36 PM
Dilore

Quote:

Originally Posted by Meti

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

You haven't heard about Firefox have you??
23-10-2008, 03:22 PM
Meti

Ofcouse I have. I use it too sometimes.

But IE comes with your computer, so everyone has it.
23-10-2008, 03:28 PM
Aflux

Quote:

Originally Posted by Meti

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.
23-10-2008, 03:37 PM
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?
23-10-2008, 04:09 PM
RichardKnox

Quote:

Originally Posted by Tom743

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

Sorry, what? Background images work in Firefox...
23-10-2008, 04:13 PM
Meti

Quote:

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

i actually did :P
23-10-2008, 04:36 PM
Decode

Quote:

Originally Posted by Meti

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?

Quote:

Originally Posted by RichardKnox

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.
23-10-2008, 04:51 PM
Jackboy

Quote:

Originally Posted by Meti

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.
23-10-2008, 04:55 PM
L?KE

Quote:

Originally Posted by Meti

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.
23-10-2008, 06:23 PM
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

Quote:

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.
24-10-2008, 02:08 PM
Meti

Quote:

Originally Posted by Jackboy

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

Quote:

Originally Posted by L?KE

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
24-10-2008, 02:41 PM
Jackboy

Quote:

Originally Posted by Meti

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
24-10-2008, 09:24 PM
Meti

Lol =) it's ok ;)