Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

centering content and code

M

moea

macrumors newbie
Original poster
Jan 28, 2006
13
0
Let me start by saying, I am new and don't know a thing about code writing. I have designed my pages to be approx. 900 px wide. I use Dreamweaver for my web design. I would like to have my pages centered in any browser window.

I have been told to insert a div tag. When I do this and a dialog box appears. I don't know what Class or ID mean. I have no idea what code to write between the div. If someone could please help, I'd greatly appreciate it. Again, I haven't the slightest idea what any of the code means, or how to employ it.

If you would be interested in my pages, they can be found at oakmontelks.com. Thanks in advance.
 
You create a div, you then give it a class or id, and then set the margins to 0 auto; in the CSS file. You can then surround it with another div so you still have a margin, check out my website as I do this.
 
The id attribute are unique values to identify HTML tags in your document. CSS (Cascading Style Sheets) make use of them to identify elements to attach styles like the container name below. The class attribute for HTML tags do not have to be unique names. Think of them as classification names. These class names can also be used with CSS.

Example code for centering a page.

HTML: 
<html><head>
<style type="text/css">
body {
 text-align: center; /* This lets IE center the page */
}
#container {
 margin: 0 auto; /* the auto allows the content to be centered */
 text-align: left;
}
</style>
</head>
<body>
<div id="container">
All of your HTML code for the page.
</div>
</body></html>
 
@moea disregard Eraserhead's reply as i think he might have missed the part where you mentioned that you dont know anything about code... but angelwatt's response was right on the money. I only wanted to add a couple of bits that might help clarify anything that was still confusing, or at least hurdles that were there for me when i was just getting started...

HTML STUFF.

DIV Tags
Code: 
<div>  </div>
The div tag in itself is a blank HTML tag. While that is not 100% true all the time.. for the most part, and for what you are using it for its invisible. But what it does allow you to do is wrap code that you want to affect.

ID Selectors
Code: 
<div id="myIDSelectorName">  </div>
id's are an attribute of a div tag. Much like href or title are attributes of the link tag. What you choose to put as your id name is obituary but should be related to what your doing. It is also a good idea not to repeat any of your ID names in the same document.

CLASS Selectors
Code: 
<div class="myClassName">  </div>
Class is also another attribute of the div tag. And operates very similarly to ID with the exception that you can have multiple instances of the same name thrughout your docuemnt.

HOW TO USE THEM

So now you know how to apply the ID and Class tags to a div.. but how to do anything with them.. that is where CSS comes in..

I am not going to go indepth about how CSS works.. or what all the different CSS stuff means.. but i will just show the syntax for ID's and CLASSES.

When targeting an ID in css.. you type the name of the id.. and right before it you put a # symbol. so you get this..

Code: 
<style>
#myIDSelectorName{...stuff in here ...}
</style>

When targeting a class you type the name of it.. but this time in front of it you put a period. so you get this..

Code: 
<style>
.myClassName{..stuff in here ...}
</style>

and then there are a couple items in CSS that are not classes or ID's like 'body' and 'html' that dont require anything in front of them.

So hopefully that helps a lil more. :D

M
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back