<div> HTML Tag + Some CSS

[Noob Saibot 38]

Introduction

 

This tutorial will show basic use of the <div> tag and how you can use IDs & Classes to make the section stand out using CSS. Like the HTML Reference tutorial said, ?can be used in your board wrappers, HTML template, forum rules (in Admin CP), Board guidelines (Admin CP), website, & posts (as long as the doHTML BB Code tag is activated for that forum and group).?

 

<Div> Tag Reference(s)

 

Below are three ways to set up the HTML <div> tag. The first way is basic html, but the other to ways has added information to be used in the CSS.

 

DIV Basic

 

Tag Start: <div> | Tag End: </div>

 

Description: Denotes divisions with in a document.

 

Example: <div>Your Content</div>

 

DIV Ids

 

Tag Start: <div id=Name> Tag End: </div>

 

Description: Identifies a Division in sections of a document that can then be positioned and styled with CSS.

 

Example: <div id=guest_bar>Welcome Guest</div>

 

DIV Classes

 

Tag Start: <div class=Name> Tag End: </div>

 

Description: Identifies a Division in sections of a document that can then be positioned and styled with CSS.

 

Example: <div class=guest_bar_content>This is sample text that could welcome a guest to your forum and would be posted in the HTML Template.</div>

 

<DIV> CSS Reference

 

Now lets look at how some sample CSS that would make the Div tag have a style and location (be sure to read my CSS Reference tutorial for more info).

 

 

CSS Key

 

# this tag represents an ID used in a <div> tag (e. g. <div id=tag>)

 

. this tag represents an Class used in a <div> tag (e. g. <div class=tag>)

 

{ this tag is where you start the body of the CSS class or ID

 

} this tag is where the end of the body of a class or id

 

; this ends a line of CSS in the body tags (e. g. {}) of a class or id

 

Sample CSS ID

 

#Guest_Bar {background-color: #000;
border: 1 solid color#fff;
color: #808080;
}

 

Sample CSS Class

 

#Guest_Bar_Content {background-color: #fff;
border: 1 solid color#000;
color: #c0c0c0;
}

 

Sample CSS Of IPB 1.3 Skin

 

#777; background-color: #DFE6EF; padding: 4px; margin: 0px }
.warngood { color: green }
.warnbad { color: red }
#padandcenter { margin-left: auto; margin-right: auto; text-align: center; padding: 14px 0px 14px 0px }
#profilename { font-size: 28px; font-weight: bold }
#calendarname { font-size: 22px; font-weight: bold }
#photowrap { padding: 6px }
#phototitle { font-size: 24px; border-bottom: 1px solid black }
#photoimg { text-align: center; margin-top: 15px }
#ucpmenu { line-height: 150%; width: 22%; border: 1px solid #345487; background-color: #F5F9FD }
#ucpmenu p { padding: 2px 5px 6px 9px; margin: 0px }
#ucpcontent { background-color: #F5F9FD; border: 1px solid #345487; line-height: 150%; width: auto }
#ucpcontent p { padding: 10px; margin: 0px }
#ipsbanner { position: absolute; top: 1px; right: 5% }
#logostrip { border: 1px solid #000; background-color: #000; padding: 0px; margin: 0px }
#submenu { border: 0px; background-color: #DFE6EF; font-size: 10px; margin: 3px 0px 3px 0px; color: #3A4F6C; font-weight: bold; background-image: url(http }
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight: bold; font-size: 10px; text-decoration: none; color: #800000 }
#userlinks { border: 0px; background-color: #F0F5FA; background-image: url(http }
#navstrip { font-weight: bold; padding: 6px 0px 6px 0px }
.activeuserstrip { background-color: #BCD0ED; padding: 6px }
.pformstrip { background-color: #202020; color: #000; font-weight: bold; padding: 7px; margin-top: 1px }
.pformleft { background-color: #C0C0C0; padding: 6px; margin-top: 1px; width: 25%; border-top: 1px solid #C2CFDF; border-right: 1px solid #C2CFDF }
.pformleftw { background-color: #C0C0C0; padding: 6px; margin-top: 1px; width: 40%; border-top: 1px solid #C2CFDF; border-right: 1px solid #C2CFDF }
.pformright { background-color: #C0C0C0; padding: 6px; margin-top: 1px; border-top: 1px solid #C2CFDF }
.signature { font-size: 10px; c1077435762olor: #339; line-height: 150% }
.postdetails { font-size: 10px }
.postcolor { font-size: 12px; line-height: 160% }
.normalname { font-size: 12px; font-weight: bold; color: #003 }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #900 }
.post1 { background-color: #800000 }
.post2 { background-color: #800000 }
.postlinksbar { background-color: #D1DCEB; padding: 7px; margin-top: 1px; font-size: 10px; background-image: url(style_images/<#IMG_DIR#>/tile_sub.gif) }
.row1 { background-color: #404040 }
.row2 { background-color: #808080 }
.row3 { background-color: #404040 }
.row4 { background-color: #808080 }
.row1, .row2, .row3, .row4 { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #000 }
.row1 a:link, .row1 a:visited, .row1 a:active { color: #000 }
.row1 a:hover { color: #404040; text-decoration: underline }
.row2 a:link, .row2 a:visited, .row2 a:active { color: #000 }
.row2 a:hover { color: #404040; text-decoration: underline }
.row3 a:link, .row3 a:visited, .row3 a:active { color: #000 }
.row3 a:hover { color: #404040; text-decoration: underline }
.row4 a:link, .row4 a:visited, .row4 a:active { color: #000 }
.row4 a:hover { color: #404040; text-decoration: underline }
.darkrow1 { background-color: #C0C0C0; color: #4C77B6 }
.darkrow2 { background-color: #404040; color: #3A4F6C }
.darkrow3 { background-color: #c0c0c0; color: #3A4F6C }
.hlight { background-color: #C0C0C0 }
.dlight { background-color: #404040 }

 

<DIV> Project

 

Now lets use what you learned above to make a simple News Box. This news Box will use the 2 <DIV> tags, but it would be better to use the <table> tag (but that's another Tutorial).

 

UNDER DEVELOPMENT; Please Check Back Soon