DIV 101

As I try to upgrade my Web Design skills I an confronted with some question about Divs. My instructor told us last year to remember this quote and to use it in our design. “Semantic we stand, divitis we fall” It was talking about using Semantic code, or well written code to create web pages. I misinterpretted the phrase & tried to design without using Divs. Now I am running into basic design problems. My web pages are simply….boring & I want to spice them up. A way to do this is <DIV>s,

So I am going to write good sematic code & try to avoid DIV~itis. So, what is Divitis? Check out this link from “A Padded Cell” and learn my child. 🙂

http://www.apaddedcell.com/div-itis-what-it-and-how-avoid-it

I also am running into defining various Div Standards. What is a <div id>, <div style>, <div class>, and <div title>?

<div id>: defines the identification of the div to use in CSS code. For example

<div id=”content”>
<h1>This is the title</h1>
<h2>This is the sub-title</h2>

<p>This is the body of the article</p>
<p>There may be several paragraphs here that you need to style with
CSS</p>
</div>
————————————————–
CSS

#content p {
font-size: .9em;
}

<div class>: this defines the position of the div. For example, to create a rounded box using div containers, you’d have to use the div class to indicate position of the nested div containers, i.e images.

For example:

<div class=”top”><div class=”bottom”>
<div class=”left”> <div class=”right”>
<div class=”topLeft”><div class=”topRight”>
<div class=”bottomLeft”><div class=”bottomRight”>
<div class= “boxContent”>
content
</div>
</div></div></div></div>
</div></div></div></div>

rounded border divs

 

 

 

 

 

 

Example 1: these are the images used for the rounded box

 

Example 2: div class box content

 

 

 

 

 

 

a divs style

 

 

 

 

 

Example 3: div style in the CSS

the final product

 

 

 

 

 

 

 

 

Example 4. The finished product. The rounded div box is in the upper right hand corner of the page.

<div style>: this is the style of the div, such as for this example, the box contents were defined in the CSS code. See Example 3 above. You can also use this tag directly on your HTML page. As in this example:

<DIV style=”color:red; font-style:italic; font-weight:bold; font-family:Arial”>
Now I’m also bold and have an Arial font!
</DIV>

Now I’m also bold and have an Arial font!

<div title>: The title of the div section. Specifies extra information about a div element.

div sumary table

 

 

 

 

 

 

To sum up:

 

1. Use an ID when a style will occur once on multiple pages.

2. Use a class when a style will occur more than once on multiple pages.

3. Define the IDs and classes in an external style sheet so the browser can cache the file, and that style information doesn’t have to be downloaded with each page.

4. Use inline styles, i.e. <div style=”foo: blah;”>, when a style is unique to one tag on one page.

**Also, IDs take precedence over classes in style sheets. Inline styles take precedence over any CSS declaration in any external style sheet or embedded style sheet.

I hope this little review has helped you to get the DIV attributes straight like it has me. 🙂 Thanks for reading & be sure to comment. 🙂

References:

New Perspectives on HTML and XHTML (Comprehensive), Fifth Edition, Carey, Patrick. Centage Learning.
(used for Education purposes)

 

Advertisements

De~nada!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s