Perception is partial reality

Wednesday, August 22, 2007

Nesting and Centering div elements

Designers struggle frequently with proper nesting and centering of div elements. I've found, from reading many sources, the best way to take control of your elements is to surround them completely with a div container.

Div containers can be centered and manipulated just about anyway you see fit. Once the "container" is established, one can have seemingly perfect control of design - whether location of internally nested divs, centering, colors, the list goes on.

I've written about centering before. Recently, for whatever reason, I've had much better success with using this style for centering: margin: 0 auto (this means to make the margin equal 0 on the top and bottom and for the sides (left/right) to be auto aligned. Keeping in mind the clockwise approach to remembering single-line declarations, so the above style can also be written as margin: 0 auto 0 auto, more clearly, margin: W X Y Z, where W=top, X=right-side, Y=bottom, and Z=left-side.

Saturday, May 27, 2006

CSS, XHTML, and Centering your Web

Centering your web page can be an issue. I looked around the web to find a myriad of information about how to use auto margins and, frankly, hacks that will only work in one browser and maybe another. As an avid MySpace user, I used MySpace as a resource to find how to change my blog look and found a blog there that gave me invaluable insight on how to center a web page. It's really fairly simple; you will be as surprised as I was.

First, I'm going to show you the HTML/XHTML code. I'm not going to show ALL of the code, just what you need to mess with in order to get the page centered. You will start with the <body> tag and then follow with <div> tags. You will normally have more than one <div> element (this is important) that is "contained" by a single "container" <div> element; as follows:

<body>

<div>

<p>Content Here</p>

</div>

<div>

<p>More Content Here</p>

</div>

<div>

<p>Even MORE Content Here!!</p>

</div>

</div>

</body>

So, you have 3 different DIV elements within a single DIV "container". This is how we affect the alignment of ALL the contained DIVs. I do not recommend using table tags at all. Tables are being deprecated with exception only to tabular data. There's nothing you can't do with XHTML/CSS, so I encourage you to use it.

The following is the important code to use with CSS to make your page center. It may seem confusing at first, but it's really very, very simple! You must define a width of the page, say, width: 700px. Then, you need to bring the whole container back HALF the size of the width using the margin-left attribute; margin-left: -350px. Next, you will tell the screen to position itself 50% of whatever the resolution is (the beauty of this is, no matter what the resolution is of the viewer, your page will always be centered. You do this using the left: attribute and assigning it as such: left: 50%. Here's the CSS:

body {

margin: 0;

padding: 0px;

background: #000;

color: #fff;

border-style: none;

}

div.container {

margin: 0;

padding: 0;

width: 700px;

margin-left: -350px;

left: 50%;

position: absolute;

}

//*then the rest of your CSS code for your other DIVs may follow - Remember, you should assign a "class" to all DIVs you wish to affect separately, otherwise, simply putting div { whatever in }, will result in ALL unclassed DIVs taking on the SAME format, positioning, etc... *//

Talk is cheap. Use Yahoo! Messenger to make PC-to-Phone calls. Great rates starting at 1¢/min.

Sunday, April 16, 2006

Web page structure - the beginning.

Here's how it all begins. Once you have chosen a DTD (document type definition), you will add several things called tags to your page to layout the page for you to begin inserting html or xhtml code giving your page a distinct look.

Let's build from the last post. I am going to use notepad for this demonstration, but remember, any text editor that doesn't insert any special formatting codes will work.


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

 <title>Insert your page title here</title>
 <meta http-equiv="content-type" 
  content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

     <p>---Create Your Page In This Area---</p>

</body>
</html>

Where the <p> tag is used above, can also be used a <div> tag. I try to use <div> tags wherever possible for page layout and design.

Saturday, April 15, 2006

XHTML - Where to begin.

When you're creating a web page, one of the easiest ways to create a lean and clean set of xhtml code is to begin with your "doctype". The doctype declares to the reading browser (the browser you are using to view your pages) what to expect and how to interpret it. So, if you don't tell the browser anything at all, it reads everything in what is called "quirks" mode, which may or may not display your pages as intended. Bottom line - always use a doctype. And why xhtml? Because it is where everything is going or has gone. There are some basics you should know about xhtml, so you may wish to visit the w3schools site, which will provide you with all and more than you ever wanted to know about xhtml, css, and html.

I typically use the transitional form of the doctype, as follows:

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

For more information on choosing a doctype, follow the links below:
http://www.htmlhelp.com/tools/validator/doctype.html

http://www.w3.org/QA/2002/04/valid-dtd-list.html

After choosing a doctype, open your favorite text editor and insert it as the first line. Be sure you are not using an editor that may insert its own code after saving the file and when you do save the file, choose "save as..." and create a name of your choosing and extend it with .html, i.e., your_filename.html.

CSS, XHTML, and how it all started for me.

For years I envied web pages and especially personal ones. I wanted to create my own, but was always too busy to even fathom where to begin. Up until the last six to nine months, I knew little if anything about creating a web page. Now, I have a simple web page I created with the help of Macromedia Studio 8, a lot of reading, tutorials, and more reading. I haven't finished all the books I bought. Most of the help I've gotten are from reading pages and pages of blogs and help sites for web design. The web has proven to be an invaluable resource which jumpstarted me to where I am now.

Like so many others out there, I want to write a few pages, at least, about web design to help you jumpstart your design ideas. One thing I know for sure, most of the design it with your creative talent. If you don't think you're creative, just try a few things with some code from already created pages and soon you'll come up with your own ideas to implement.

Stay tuned for some real basics on where to begin.