Help - Search - Members - Calendar
Full Version: How Exactly Do I Use The <div>
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS
Vaisor
Hi,

Just wondering about the <div> code...

How exactly do i use div codes? I think i need a CSS sheet am i right?

I understand it works like a table, And i can change the WxH like this:

<div id="content" style="width: 985; height: 308">test</div>

But how would I Position them and center them etc...

Centering: <div align="center"> ?? (didn't seem to center very well)

And how would I put them side on to each other as a column?

Thanks,
Vaisor

Vaisor
lol dw just wanted to know how to use divs but im gona hold off on it for a while till i get a better web editing program that doesn't feel the need to muck everything up
Cmain
Read a book or some tutorials on CSS. To center a div you would:

<div id="center"></div>

#center {
margin: 0 auto;
}
Vaisor
aha there we go, thanks man
MrTouz
Using divs is simple, what im gonna write might not be the BEST way to use it, but its how you actually use it.

Inside your html / php ... page

CODE
<div id="somename">

Some Text

</div>




Inside your .css page

CODE
div#somename { // must be the same name as the id you set on your html / php page
margin-top:150px;
color:#FFFFFF;
width:10px;
height:10px;
someothercss:hahaha;
}


What you actualy do is set "variables" inside your style.css and you "call" the "function" inside your html/php and these "variables" will apply.
Not the words to use i guess since i did not learn off the book but by my self but it is what it is, you set a div name, you give them sizes, colors, and you just use it on your page.

Div's are not just like tables. They can be used as is (wouldnt suggest it) but it can be used for many things, first to give a name to a certain element... also to set a size, or a color to this element.. can be used for many things, i personally never see sites without div's... i always use them like i will always use <table...
Ed
QUOTE(MrTouz @ Jan 19 2008, 11:22 AM) *
Using divs is simple, what im gonna write might not be the BEST way to use it, but its how you actually use it.

Inside your html / php ... page

CODE
<div id="somename">

Some Text

</div>




Inside your .css page

[code]
What you actualy do is set "variables" inside your style.css and you "call" the "function" inside your html/php and these "variables" will apply.
Not the words to use i guess since i did not learn off the book but by my self but it is what it is, you set a div name, you give them sizes, colors, and you just use it on your page.


Properties and selectors I think are the proper terminology.
MrTouz
CODE
FFS STOP TRYING TO TEACH PEOPLE WRONG THINGS.


Stop being so fuckin mean, dude, you seriously piss off... and im serious, you make so dumb comments so times.. it really pisses me off.

a smart comment from Bread :

CODE
Properties and selectors I think are the proper terminology.


I guess he actually read what i write before he makes stupid comments :

CODE
Not the words to use i guess since i did not learn off the book but by my self


Dude, im not trying to be mean or hard, but if i dont tell you... you gonna be like it all the time... seriously.. your comments are mean and rude. Try to be nicer to people.
Vaisor
ok..

And is there a way to put them so that the actual div is centered not just the text? and make the text align to the left?

= div aligned to center
= content within div aligned to left

Thanks,
Vaisor
Cmain
CODE
margin: 0 auto;

That should center the div.

CODE
text-align: left;

That should align the text.
bezz
I think this best explains how to layout a page using divs
Vaisor
Awesome thanks alot guys

QUOTE(Cmain @ Jan 20 2008, 05:27 AM) *
CODE
margin: 0 auto;

That should center the div.

CODE
text-align: left;

That should align the text.


text-align made the text go left but so did the div, even with both of those codes...

This is what i have done:

CODE
<div style="margin: 0 auto; text-align: left; width: 307; height: 110" ><font size="2" color="#3F4A59">fgdfg</font><p></p></div>
MrTouz
See now what you should do is :

create a .css file :

name your div and add the info to it like :

CODE
div#text {
margin: 0 auto;
text-align: left;
width: 307px;
height: 110px;
font-size:2px;
color:#3F4A59;
}


CODE
<div id="text">
fgdfg
<p>

</p>
</div>


See in your css you regrouped the style and the html coding for your font size and color, all that in the same div.
b-boypshyk
QUOTE(Cmain @ Jan 20 2008, 05:27 AM) *
CODE
margin: 0 auto;

That should center the div.

CODE
text-align: left;

That should align the text.



just looking around...im not saying you are wrong...im asking i thought auto doesnt always work...dont know if its on firefox or if its on ie but i thought one of those doesnt recognize the auto code...
Brandon
QUOTE(MrTouz @ Jan 19 2008, 08:48 PM) *
CODE
FFS STOP TRYING TO TEACH PEOPLE WRONG THINGS.


Stop being so fuckin mean, dude, you seriously piss off... and im serious, you make so dumb comments so times.. it really pisses me off.

a smart comment from Bread :

CODE
Properties and selectors I think are the proper terminology.


I guess he actually read what i write before he makes stupid comments :

CODE
Not the words to use i guess since i did not learn off the book but by my self


Dude, im not trying to be mean or hard, but if i dont tell you... you gonna be like it all the time... seriously.. your comments are mean and rude. Try to be nicer to people.

About Tom 100% agreed, he thinks he can get away with it because he's an admin and that its just the internet. he wouldnt like it if we visit him and show who's boss would he.
Cmain
QUOTE(b-boypshyk @ Mar 16 2008, 12:46 AM) *
just looking around...im not saying you are wrong...im asking i thought auto doesnt always work...dont know if its on firefox or if its on ie but i thought one of those doesnt recognize the auto code...


It should work in all modern browsers.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.