CSS : Html Tags ex 2
'div' Example
<html> <head> <title>div element example</title> </head> <body> <div id="Layer1" style="position:absolute; visibility:visible; left:166px; top:312px; width:300px; height:294px; background-color:#FFFFCC; layer-backgroundcolor:#FFFFCC; border:1px none #000000; z-index:1"> <p><img src="http://www.java2s.com/style/logo.png" alt="" width="300" height="225"></p> <p align="center">This div element contains an image plus a center aligned text.</p> </div> <div id="Layer2" style="position:absolute; visibility:visible; left:499px; top:338px; width:315px; height:174px; background-color:#CCFFCC; layer-background-color:#CCFFCC; border:1px none #000000; z-index:2"> <p>Text.</p> </div> </body>
</html>
Block divider
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen"> p { margin: 0; padding: 5px; background-color: ponk; border-left: 1px solid gray; border-right: 2px solid black; border-top: 1px solid gray; border-bottom: 2px solid black; } * .spacer-large { padding-bottom: 32px; } </style> </head> <body> <p>this is a test. </p> <div class="spacer-large"></div> <p>this is a test. </p> </body> </html>
Click to show and hide DIV content (IE only)
<html> <head> <title>ASR Outfitters</title> <style type="text/css"> <!-- body {font-size : 110% } h1, h2, h3 {font-family : "Comic Sans MS"} h1 {font-size : 180% ; font-weight : bold} --> </style> <script type="text/javascript" language="javascript"> <!-- function contactus() { if (document.all.contactus.style.display=="none") (document.all.contactus.style.display="block"); else (document.all.contactus.style.display="none"); } function otherstuff() { if (document.all.otherstuff.style.display=="none") (document.all.otherstuff.style.display="block"); else (document.all.otherstuff.style.display="none"); } function whatwedo() { if (document.all.whatwedo.style.display=="none") (document.all.whatwedo.style.display="block"); else (document.all.whatwedo.style.display="none") ; } function whathere() { if (document.all.whathere.style.display=="none") (document.all.whathere.style.display="block"); else (document.all.whathere.style.display="none"); } // --> </script> </head> <body> <p><a href="tour.html">t</a></p> <hr /> <h2 onclick="whathere()">click me</h2> <div id="whathere" style="display:none"> <p>This is a test. </p> <ul> <li><a href="">This is a test. </a>.</li> <li><a href="">This is a test. </a>.</li> <li><a href="">This is a test. </a>.</li> <li><a href="">This is a test. </a>.</li> <li><a href="">This is a test. </a>.</li> </ul> </div> <h2 onclick="whatwedo()">click me</h2> <div id="whatwedo" style="display:none"> <p>This is a test. <a href="">This is a test. </a>.</p> </div> <h2 onclick="otherstuff()">click me</h2> <div id="otherstuff" style="display:none"> <ul> <li>This is a test. <i>This is a test. </i>. <a href="http://www.a.com/"> http://www.a.com/</a>.</li> <li>This is a test. <ol> <li>This is a test. </li> <li>This is a test. </li> <li>This is a test. </li> </ol> </li> </ul> </div> <h2 onclick="contactus()">click me</h2> <div id="contactus" style="display:none"> <p>This is a test. <a href="mailto:a@r.com"> a@r.com</a>. </p> </div> </body> </html>
Click to show or hide DIV section
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" language="javascript1.3"> <!-- function closeall() { var divs = document.getElementsByTagName('div') var elements = divs.length for(var i = 0;i < elements;i++){ var divStyle = divs.item(i) divStyle.style.display = 'none'; } return; } function showOne(showme) { closeall() var element = document.getElementById(showme) element.style.display = 'block' return; } // --> </script> </head> <body onload="closeall()"> <!--<a onclick="closeall()" href="javascript:closeall();">Close All</a> --> <h2 onclick="showOne('whathere')">Click me to show or hide content</h2> <div id="whathere"> <p>This is a test. </p> <ul> <li><a href="">This is a test. </a></li> <li><a href="">This is a test. </a></li> <li><a href="">This is a test. </a>This is a test. </li> <li><a href="">This is a test. </a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> <h2 onclick="showOne('whatwedo')">Click me to show or hide content</h2> <div id="whatwedo"> <p><a href=".html">This is a test. </a>.</p> </div> <h2 onclick="showOne('otherstuff')">This is a test. </h2> <div id="otherstuff" > <ul> <li><i>This is a test. </i>. <a href="http://www.a.com/">http://www.a.com/</a>.</li> <li>This is a test. <ol> <li>This is a test. </li> <li>This is a test. </li> <li>This is a test. </li> </ol> </li> </ul> </div> <h2 onclick="showOne('contactus')">Click me</h2> <div id="contactus" > <p>This is a test. <a href="mailto:a@r.com">a@r.com</a>. This is a test. : </p> <address>This is a test. <br /></address> </div> </body> </html>
Use DIV as wrapper
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css"> div#wrapper{ float:left; width:100%; } </style> </head> <body> <div id="container"> <div id="header"> <h1>My Amazing Web Site </h1> </div> <div id="wrapper"> <div id="content"> <h2>Contact Form</h2> <form id="form1" name="form1" method="post" action="/"> <label for="fmmsg"><span class="akey">M</span>essage</label> <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea> <input type="submit" name="submit" value="send" class="submit" /> </form> </div> </div> <div id="extra"> <h2>quid pro quo</h2> </div> <div id="footer"> <p>ask.</p> </div> </div> </body> </html>
div in a div with class name
<html> <head> <style type="text/css"> body { background-color: #fff; } div.imgholder { float: left; background: red; margin: 0 7px 7px 0; } div.imgholder div { background: blue; padding: 0 6px 6px 0; } div.imgholder img { display: block; position: relative; background-color: #fff; border: 1px solid #666; padding: 2px; } </style> </head> <body> <div class="imgholder"> <div> <img src="http://www.domain.com/style/logo.png" alt="Photo" /> </div> </div> <h2>Adipiscing Elit</h2> </body> </html>
div.className (tag.className)
<html> <head> <title></title> <style type="text/css"> div.slide { width: 500px; height: 468px; background: red; } </style> </head> <body> <div class="slide"> </div> </body> </html>
div with class name
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div.imgholder { float:left; right !important; background: red; margin: 10px 0 0 5px; } div.imgholder img { display: block; position: relative; background-color: #fff; border: 1px solid #666; margin: -3px 5px 5px -3px; padding: 2px; } </style> </head> <body> <div class="imgholder"> <img src="http://www.java2s.com/style/logo.png" alt="" /> </div> </body> </html>
div with id style
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #content { background: red; height: 400px; width: 674px; } </style> </head> <body> <div id="content"> <h2>header 2 <span id="boat"> </span> </h2> </div> </body> </html>
HTML divisions
<!DOCTYPE html> <html> <head> <title>Example 2.18</title> <style type="text/css"> body { padding: 0 36px; } h1 { font-family: sans-serif; padding-top: 60px; } #header { margin-bottom: 36px; } #header img { float: left; } #header a { text-decoration: none; } #top-menu, #bottom-menu { margin-left: -36px; } #top-menu li { float: left; padding: 5px; border: 1px solid; list-style: none; margin-right: 5px; } #bottom-menu li { float: left; padding: 0 10px; border-right: 1px solid; list-style: none; } div.navigation { clear: left; font-family: arial,sans-serif;} address { clear: left; text-align: right; padding-top: 36px;} </style> </head> <body> <div id="header"> <!-- Logo and main menu --> <div id="logo"> <img src="../images/logo.gif" alt="Logocorp Inc."/> <h1>Welcome to Logocorp</h1> </div> <div class="navigation"> <ul id="top-menu"> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="what.html">...</a></li> </ul> </div> </div> <hr/> <div id="content"> <!-- content division --> <h2>News</h2> <p>We are doing good things... </p> <p>Logos are everywhere... </p> </div> <hr /> <div id="footer"> <!-- page footer --> <div class="navigation"> <ul id="bottom-menu"> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="what.html">...</a></li> </ul> </div> <address>copyright © 2010, , Inc.</address> </div> </body> <html>
Two boxes with div tags
<html> <head> <title></title> <style type="text/css" media="all"> body {margin: 2em 10%;} div.wrap {height: 20em; width: 20em; margin: 6em 2em 0; float: left; border: 2px dashed red;} div.wrap div {height: 20em; width: 20em; color: #FFF; background: hsla(0,0%,0%,0.75);} div.wrap div p {text-align: center; margin: 0; padding-top: 7em; font: italic 1.33em Georgia, serif;} </style> </head> <body> <div class="wrap"> <div class="box1"> <p>box1.</p> </div> </div> <div class="wrap"> <div class="box2"> <p>box2</p> </div> </div> </body> </html>
Grouping Elements Using the div Element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A Demonstration of the <div> Element</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> body { font-family:arial, verdana, sans-serif; font-size:14px; background-color:#d6d6d6;} div.page { border:solid 1px #000000; background-color:#ffffff; margin:30px; padding:15px;} div.background { padding:20px; font-style:italic; font-size:smaller;} </style> </head> <body> <div class="page"> <h1>Grouping Elements Using the <div> Element</h1> <p>The first <div> element is used to create the effect of a page border around the content of the page.</p> <div class="background"> <h2>Background Notes</h2> <p>You can nest <div> elements inside each other.</p> <p>The second <div> element is used to create an area of background notes that is presented differently than the rest of the page. </p> </div> </div> </body> </html>
div for header and body
<html> <head> <title>Title</title> <style type='text/css'> body { background-color: #000000; font-family: arial, verdana, sans-serif; } div.page { width: 650px; border-style: solid; border-width: 1px; border-color: #666666; } div.heading { background-color: #999999; padding: 10px; } div.body { background-color: #EFEFEF; padding: 10px; } h1 { font-size: 22pt; color: #000066; } h2 { font-size: 18pt; color: #000066; } p { font-size: 14pt; color: #000000; } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> </head> <body> <div class="page"> <div class="heading"> <h1>Header</h1> </div> <div class="body"> <h2>Abstract</h2> <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p> <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p> ... </div> </div> </body> </html>
The dialogue div element is aligned vertically and horizontally, no matter what the size of the browser window.
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <title>Vertical and Horizontal Alignment</title> <style type='text/css'> body { background: lightyellow; font: 16px sans-serif; } div#dialogue { position: absolute; width: 200px; height: 100px; background: yellow; border: 1px solid gold; top: 50%; left: 50%; margin: -56px 0 0 -106px; padding: 5px; } p { margin: 0; } </style> </head> <body> <div id='dialogue'> <p> The dialogue <div> element is aligned vertically and horizontally, no matter what the size of the browser window. </p> </div> </body> </html>
Default layout for div tags
<html> <head> <title>positioning</title> <style type='text/css'> body { background: lightyellow; font: 12px sans-serif; } div { width: 100px; height: 100px; border: 1px solid rgb(200, 200, 200); } div#one { background: pink; } div#two { background: lightblue; } div#three { background: yellowgreen; } div#four { background: orange; } </style> </head> <body> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada magna. Quisque ac est et nibh porta nonummy. Cras pede tortor, lacinia et, eleifend quis, consequat vel, odio. Proin urna mi, facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis. Vestibulum sed felis. </p> <div id='one'></div> <div id='two'></div> <div id='three'></div> <div id='four'></div> </body> </html>
Nested div box
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <title>box model</title> <style type='text/css'> body { margin: 0; padding: 0; } div#box-wrapper { background: #ff0; border: 1px solid #fff; } div#box { border: 20px solid #f6c; margin: 20px; padding: 20px; background: #f90; } div#box-inner { background: #fff; color: rgb(244, 244, 244); } </style> </head> <body> <div id='box-wrapper'> <div id='box'> <div id='box-inner'> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer neque ac eros. Vivamus vel nibh. Vestibulum aliquam neque a nisi. Nullam eu turpis. Proin mi. Cras dictum semper felis. Maecenas porttitor neque at dolor. Integer vel libero vitae ante lobortis tristique. Morbi sapien diam, tristique sed, placerat pharetra, luctus eget, neque. Pellentesque leo mauris, sollicitudin a, malesuada vitae, varius vitae, quam. Cras eget tellus vel nunc dapibus pharetra. Phasellus varius tincidunt quam. Maecenas viverra mattis orci. Etiam porttitor luctus ligula. Ut ac nibh. In commodo imperdiet sapien. Nulla vel sapien sed mauris euismod pharetra. Quisque eu ante eget pede tristique tincidunt. Curabitur eu erat eu libero aliquam placerat. Pellentesque felis erat, cursus </div> </div> </div> </body> </html>
DIV color: #505050;<head>
<title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> #leftside .announce { background: url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom: 1px solid #d8d8d8; border-left: 4px solid #ccc; border-right: 1px solid #d8d8d8; border-top: 1px solid #d8d8d8; clear: left; color: #505050; line-height: 1.3em; margin: 10px 0; padding: 5px 5px 5px; width: 134px; } #leftside p,.announce p { font-size: 0.9em; } </style> </head> <body> <div id="leftside"> <h2 class="hide">Site menu:</h2> <div class="announce"> <h2>Latest news:</h2> <p><strong>Jan 29, 2007:</strong><br /> This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p> <p class="textright"><a href="">Sample link »</a></p> </div> </div> </body> </html>
DIV color: #9D9C6A;
<head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> .news { border-bottom: 1px dashed #ddd; padding: 5px; color: #9D9C6A; font-size: 0.9em; margin-top: 10px; margin-bottom: 10px; } </style> </head> <body> <div class="news"> <h1>News</h1> <p>This is some extra content, it can be used for news, links, updates, or anything else. </p> </div> </body> </html>
Using two Nested DIV to do the layout
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style rel="stylesheet" type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { margin: 0 auto; width: 922px; } #content { width: 900px; color: #333; border: 1px solid #ccc; background: #F2F2E6; margin: 10px 0px 10px 0px; padding: 10px; height: 500px; } </style> </head> <body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Content --> <div id="content"> </div> <!-- End Content --> </div> <!-- End Wrapper --> </body> </html>
DIV as container
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style rel="stylesheet" type="text/css"> * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { margin: 0 auto; width: 922px; } #header { width: 900px; color: #333; padding: 10px; border: 1px solid #ccc; height: 100px; margin: 10px 0px 0px 0px; background: #BD9C8C; } #content { width: 900px; color: #333; border: 1px solid #ccc; background: #F2F2E6; margin: 0px 0px 10px 0px; padding: 10px; height: 350px; } </style> </head> <body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Header --> <div id="header"> This is the Header </div> <!-- End Header --> <!-- Begin Content --> <div id="content"> </div> <!-- Begin Content --> </div> <!-- End Wrapper --> </body> </html>
DIV overflow: hidden;
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style rel="stylesheet" type="text/css"> #items { padding: 15px 0 0 196px; } .item { width: 226px; float: left; overflow: hidden; background-image: url(images/dots2.gif); background-position: top left; background-repeat: repeat-y; font-family: Tahoma, sans-serif; font-size: 11px; color: #6C6C6C; margin: 0 7px 0 0; padding: 0 0 2px 0; } .item strong { color: #516496 } .item div { width: 185px; padding: 20px 0 0 25px; } .item span,.news span { display: block; font-family: Tahoma, sans-serif; font-size: 11px; color: #FEE8B7; font-weight: bold; background-color: #D0361B; line-height: 17px; width: 74px; padding: 0 0 0 10px; } .item p { padding: 10px 0 5px 0 } .item .more { padding: 10px 0 0 12px; background-position: left 14px; } .item ul { list-style-type: none; line-height: 15px; padding: 10px 0 3px 0 } .item li a { color: #056EC1; text-decoration: underline } .item li a:visited,.copy a:visited { text-decoration: underline } .item li a:hover,.copy a:hover { text-decoration: none } </style> </head> <body> <div class="item"> <div> <p><strong>Dolor sit amet</strong> consectetuer adiscing Etiam sem lorem vestibulum: </p> <ul> <li><a href="#">consectetuer adiscing</a></li> <li><a href="#">massa dapibus diam</a></li> <li><a href="#">tristiquelacus</a></li> <li><a href="#">viverra augue ipsum</a></li> <li><a href="#">conubia nostra, per inceptos</a></li> <li><a href="#">magna a luctus lacinia</a></li> </ul> <a href="#" class="more">read more</a> </div> </div> </body> </html>
Div color: #FEF9ED;
<!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" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style rel="stylesheet" type="text/css"> .date { font-family: Arial; font-size: 12px; font-weight: bold; color: #FEF9ED; float: left; line-height: 17px; padding: 0 18px 0 8px; margin-top: -1px; border-top: 1px solid #9E6E2E; background-image: url(images/date.gif); background-position: right -1px; background-repeat: no-repeat; background-color: #C58A3B; } </style> </head> <body> <div class="date">July 25th, 2008</div> </body> </html>
Div color: red;
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title></title> <style rel="stylesheet" type="text/css"> #search { width: 500px; float: left; margin: 60px 0 0 115px; display: inline; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: red; line-height: 23px; } #search input { height: 20px; width: 329px; float: left; border-top: 1px solid #700303; border-left: 1px solid #700303; border-bottom: 0px; border-right: 0px; margin: 0 5px 0 11px; padding: 2px 0 0 2; background-color: red } #search span { display: block; float: left; } </style> </head> <body> <div id="search"> <span>Search the web:</span> <input type="text" /> <a href="#"><img src="images/search.jpg" alt="" width="57" height="26" /></a><br /> </div> </body> </html>
Div based multi-column
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title></title> <style rel="stylesheet" type="text/css"> .main_part { float: left; width: 600px; margin: 41px 0 0 120px; } .block { width: 120px; float: left; margin: 0 0 30px 0 } .block .title { font-family: Arial; font-size: 12px; color: #02579F; text-decoration: underline; font-weight: bold; margin: 0 0 3px 0 } .block a { display: block; font-size: 10px; color: #474747; text-decoration: none } </style> </head> <body> <div class="main_part"> <div class="block"> <a href="#" class="title">Arts</a> <a href="#">Animation</a> <a href="#">Bodyart</a> <a href="#">Design</a> <a href="#">Entertainment</a> <a href="#">Illustration</a> <a href="#">Movies</a> <a href="#">Music</a> </div> <div class="block"> <a href="#" class="title">Business</a> <a href="#">Classifieds</a> <a href="#">Directories</a> <a href="#">Employment</a> <a href="#">Financial Services</a> <a href="#">Real Estate</a> <a href="#">Small Business</a> <a href="#">Trade</a> </div> <div class="block"> <a href="#" class="title">Computers</a> <a href="#">Companies</a> <a href="#">Computer Science</a> <a href="#">Consultants</a> <a href="#">Electronic Books</a> <a href="#">Multimedia</a> <a href="#">Open Source</a> <a href="#">Security</a> </div> <div class="block"> <a href="#" class="title">Free</a> <a href="#">Audio</a> <a href="#">Games</a> <a href="#">Graphics</a> <a href="#">Interface</a> <a href="#">Security</a> <a href="#">Software libraries</a> <a href="#">Web Templates</a> </div> <div class="block"> <a href="#" class="title">Games</a> <a href="#">Board Games</a> <a href="#">Card games</a> <a href="#">Computer_Games</a> <a href="#">Dice</a> <a href="#">Internet</a> <a href="#">Roleplaying</a> <a href="#">Video Games</a> </div> <div class="block"> <a href="#" class="title">Health</a> <a href="#">Animal</a> <a href="#">Beauty</a> <a href="#">Dentistry</a> <a href="#">Medicine</a> <a href="#">Mental Health</a> <a href="#">Pharmacy</a> <a href="#">Surgery</a> </div> <div class="block"> <a href="#" class="title">Kids & Teens</a> <a href="#">Arts</a> <a href="#">Directories</a> <a href="#">Entertainment</a> <a href="#">Health</a> <a href="#">News</a> <a href="#">Pre-School</a> <a href="#">Your Family</a> </div> <div class="block"> <a href="#" class="title">News</a> <a href="#">Alternative</a> <a href="#">Chats and Forums</a> <a href="#">Current Events</a> <a href="#">Media</a> <a href="#">Online Archives</a> <a href="#">Politics</a> <a href="#">Sports</a> </div> <div class="block"> <a href="#" class="title">Recreation</a> <a href="#">Antiques</a> <a href="#">Audio</a> <a href="#">Boating</a> <a href="#">Collecting</a> <a href="#">Guns</a> <a href="#">Humor</a> <a href="#">Photography</a> </div> <div class="block"> <a href="#" class="title">Science</a> <a href="#">Agriculture</a> <a href="#">Biology</a> <a href="#">Chemistry</a> <a href="#">Earth Sciences</a> <a href="#">Economics</a> <a href="#">Physics</a> <a href="#">Technology</a> </div> <div class="block"> <a href="#" class="title">Shopping</a> <a href="#">Autos</a> <a href="#">Beauty Products</a> <a href="#">Books</a> <a href="#">Computers</a> <a href="#">Flowers</a> <a href="#">Jewelry</a> <a href="#">Music</a> </div> <div class="block"> <a href="#" class="title">Society</a> <a href="#">Advice</a> <a href="#">Disabled</a> <a href="#">Economics</a> <a href="#">Future</a> <a href="#">Holidays</a> <a href="#">Organizations</a> <a href="#">Politics</a> </div> <div class="block"> <a href="#" class="title">Sports</a> <a href="#">Airsoft</a> <a href="#">Badminton</a> <a href="#">Basketball</a> <a href="#">Boxing</a> <a href="#">Football</a> <a href="#">Hockey</a> <a href="#">Soccer</a> </div> <div class="block"> <a href="#" class="title">WWW</a> <a href="#">Abuse</a> <a href="#">Chat</a> <a href="#">Consultants</a> <a href="#">Domain Names</a> <a href="#">Internet Marketing</a> <a href="#">Programming</a> <a href="#">Software</a> </div> </div> </body> </html>
Div color: #676767;
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title></title> <style rel="stylesheet" type="text/css"> #content { background: url(images/bg.gif) top left repeat-y; width: 1001px; float: left; font-family: Tahoma, sans-serif; font-size: 11px; color: #676767; } .inside { background: url(images/main_bg.jpg) top left no-repeat; padding: 30px 0 0 0; float: left; } #sidebar { width: 328px; float: left; padding: 0 38px 45px 29px; } </style> </head> <body> <div id="content"> <div class="inside"> <div id="sidebar"> <div class="order"> <form action="#"> <h3>Reservation</h3> <div class="button"><a href="#"><img src="images/button.gif" alt="" width="134" height="21" /></a></div> <div class="inner_copy"><a href="http://www.beautifullife.info/">beautiful</a><a href="http://www.grungemagazine.com/">grunge</a></div> </form> </div> <div class="block"> <h4>Locations</h4> <p>Magna a luctus lacinia, sem Lorem vestibulum neque ac onsectetuer Donec fermentum varius erat. Sed sit amet tellus. Duis tristique, lacus vel nonummy lobortis, nibh massa dapibus diam a viverra augue ipsum et diam. </p> <img src="images/map.jpg" alt="" width="304" height="207" class="map" /><br /> <a href="#" class="more">more info</a> <a href="#">ZOOM</a> </div> </div> </div> </div> </body> </html>
Div element
<html> <head> <title>A Demonstration of the <div> Element</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> body { font-family:arial, verdana, sans-serif; font-size:14px; background-color:#d6d6d6;} div.page { border:solid 1px #000000; background-color:#ffffff; margin:30px; padding:15px;} div.background { padding:20px; font-style:italic; font-size:smaller;} </style> </head> <body> <div class="page"> <h1>Grouping Elements Using the <div> Element</h1> <p>The first <div> element is used to create the effect of a page border around the content of the page.</p> <div class="background"> <h2>Heading 2</h2> <p>You can nest <div> elements inside each other.</p> </div> </div> </body> </html>
Using div to layout table elements
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Table-free form layout</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> input.txt { color: #00008B; background-color: #E3F2F7; border: 1px inset #00008B; width: 200px; } input.btn { color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; } form div { clear: left; margin: 0; padding: 0; padding-top: 0.6em; } form div label { float: left; width: 40%; font: bold 0.9em Arial, Helvetica, sans-serif; } </style> </head> <body> <h1>User Registration Form</h1> <form method="post" action="tablefree.html"> <div> <label for="fullname">Name:</label> <input type="text" name="fullname" id="fullname" class="txt" /> </div> <div> <label for="email">Email Address:</label> <input type="text" name="email" id="email" class="txt" /> </div> <div> <label for="password1">Password:</label> <input type="password" name="password1" id="password1" class="txt" /> </div> <div> <label for="password2">Confirm Password:</label> <input type="password" name="password2" id="password2" class="txt" /> </div> <div> <label for="level">Membership Level:</label> <select name="level"> <option value="silver">silver</option> <option value="gold">gold</option> </select> </div> <div> <input type="submit" name="btnSubmit" id="btnSubmit" value="Sign Up!" class="btn" /> </div> </form> </body> </html>
div content: "This string is placed inside of all div elements.";
<html>
<head>
<title> The content property </title>
<style type='text/css' media='all'>
div {
content: "This string is placed inside of all div elements.";
border: thick solid black;
background: skyblue;
color: black;
font-size: xx-large;
padding: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>This div stretches across the whole window.
<html>
<head>
<title></title>
<style type='text/css' media='all'>
body {
margin: 0;
}
div {
width: 100%;
color: white;
background: black;
}
</style>
</head>
<body>
<div>
This div stretches across the whole window.
</div>
</body>
</html>Using div as img tag
<html> <head> <title></title> <style type="text/css"> div.slide { width: 500px; height: 468px; background-image: url(http://domain.com/style/logo.png); background-repeat: no-repeat; } .slide img { width: 500px; height: 468px; } </style> </head> <body> <div class="slide"> </div> </body> </html>
div with id selector
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Pixels to Inches</title> <style type='text/css'> div { background: #000; border: 1px solid rgb(128, 128, 128); color: white; font: 9px monospace; margin: 15px; text-align: center; } div#inches { width: 1in; height: 1in; } div#pixels { width: 96px; height: 96px; } </style> </head> <body> <div id='inches'><-- 1 Inch --></div> <div id='pixels'><-- 96 Pixels --></div> </body> </html>
div::before color: white;
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Generated content</title> <style type='text/css'> div { font-family: sans-serif; } div::before { content: "I said, \"Hello, world!\""; background: black; color: white; margin-right: 25px; } </style> </head> <body> <div>The world said, "Hello, yourself!"</div> </body> </html>
div::before content: "I said, \"Hello, world!\"";
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Generated content</title> <style type='text/css'> div { font-family: sans-serif; } div::before { content: "I said, \"Hello, world!\""; background: black; color: white; margin-right: 25px; } </style> </head> <body> <div>The world said, "Hello, yourself!"</div> </body> </html>
DIV color: white;
<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Auto width on divs</title> <style type='text/css'> div { width: auto; background: black; color: white; } </style> </head> <body> <div>How will this div react to auto width?</div> </body> </html>
A slightly more complex "Hello World" page
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
h1 { text-align: center; }
.intro-text { font: 12pt sans-serif; }
</style>
</head>
<body>
<h1> Hello World Wide Web</h1>
<p class="intro-text">
Welcome to first of many webpages.<br/>
<em>I promise</em> they will get more interesting than this.
</p>
</body>
</html>Style for kbd
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Phrase elements</title> <style type="text/css"> kbd { background-color: #f1e7dd; border: 1px outset #333; color: #333; padding: 2px 5px; } </style> </head> <body> <p>Press <kbd>A</kbd>, then <kbd>B</kbd>, then <kbd>C</kbd>. Finally, press the <kbd>Enter</kbd> key to continue. </p> </body> </html>
LI border top: 1px solid black
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { border-top: 1px solid black; padding: .3em 0; } ul { margin-left: 40px; padding-left: 0px; border-bottom: 1px solid black; list-style: none; width: 36%; } </style> </head> <body> <ul> <li>V</li> <li>S</li> <li>T</li> <li>P</li> </ul> </body> </html>
Border style list
<html>
<head>
<title></title>
<style type='text/css'>
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
<div style='border-style: hidden;'>
border-style: hidden;
</div>
<div style='border-style: dotted;'>
border-style: dotted;
</div>
<div style='border-style: dashed;'>
border-style: dashed;
</div>
<div style='border-style: solid;'>
border-style: solid;
</div>
<div style='border-style: double;'>
border-style: double;
</div>
<div style='border-style: groove;'>
border-style: groove;
</div>
<div style='border-style: ridge;'>
border-style: ridge;
</div>
<div style='border-style: inset;'>
border-style: inset;
</div>
<div style='border-style: outset;'>
border-style: outset;
</div>
<div style='border-style: none;'>
border-style: none;
</div>
</body>
</html>List item with border
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { border-top: 1px solid black; padding: .3em 0; } ul { margin-left: 40px; padding-left: 0px; border-bottom: 1px solid black; list-style: none; width: 36%; } </style> </head> <body> <p>Consectetuer adipiscing elit: <ul> <li>Vivamus purus enim</li> <li>Sollicitudin vitae</li> <li>Tincidunt sit amet</li> <li>Pretium vel, libero</li> </ul> <p>Sed sed nisi. Morbi gravida, odio at aliquam lobortis, urna massa vehicula mi, et posuere tortor elit eget est. Nulla ligula. Etiam pulvinar. Quisque ante quam, ultricies quis, rutrum dignissim, fermentum a, est. Nulla felis dolor, tempor non, posuere ut, ornare ac, eros. Cras in metus. Sed rutrum lectus ut nibh. Pellentesque ipsum.</p> </body> </html>
Shading border for list
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen"> div { padding: 10px; margin-bottom: 15px; border: 2px solid black; } LI { margin-top: 0px; margin-bottom: 10px; padding-right: 5px; background-color: gold; padding-top: 5px; padding-bottom: 5px; border-left: 1px solid gray; border-right: 2px solid black; border-top: 1px solid gray; border-bottom: 2px solid black; } </style> </head> <body> <div> <ul> <li>Normal List</li> <li>Normal List</li> </ul> </body> </html>
li after
<html> <head> <title></title> <style type="text/css"> li:after { content: ", "; } </style> </head> <body> <ul> <li>Database</li> <li>Privacy</li> <li>Best</li> <li>Whatever</li> <li class="last">Make One</li> </ul> </body> </html>
li:after content: ", ";
<html> <head> <title></title> <style type="text/css"> ul, li { display: inline; margin: 0; padding: 0; font-weight: bold; font-style: italic; } li:after { content: ", "; } li.last:after { content: "."; } p { display: inline; } </style> </head> <body> <h3> Table of Contents </h3> <p> As proposed, the contents of the paper will contain the following sections: </p> <ul> <li>I'm not the Same Person I was in the Database</li> <li>Past Breaches of Our Privacy</li> <li>The Best of Intentions</li> <li>Whatever Happened to Automation?</li> <li class="last">The Smart Choice is Not Needing to Make One</li> </ul> <p> If there are any objections to how these sections are divided, please let <a href="nick@heatvision.com">Nicholas</a> know about it. </p> </body> </html>
List counter reset
<html> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> ol { counter-reset: item } li {display:block;} li:before { counter-increment: item ; content: counters(item, ".") " "; } </style> </head> <body> <ol> <li>List Item</li> <li>List Item <ol> <li>List Item</li> <li>List Item <ol> <li>List Item</li> <li>List Item</li> </ol> </li> <li>List Item</li> </ol> </li> <li>List Item</li> </ol> </body> </html>
li.last:after
<html> <head> <title></title> <style type="text/css"> ul,li { display: inline; margin: 0; padding: 0; font-weight: bold; font-style: italic; } li:after { content: ", "; } li.last:after { content: "."; } p { display: inline; } </style> </head> <body> <h3>Heading 3</h3> <p>Text</p> <ul> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> </ul> <p>Text</p> </body> </html>