HTML/CSS/Box Model/Div

Материал из Web эксперт
Перейти к: навигация, поиск

Block divider

 
<!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">
<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)

 

<!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">
<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.ru/">
   http://www.a.ru/</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.ru">
   a@r.ru</a>.
   </p>
</div>
</body>
</html>



Click to show or hide DIV section

 

<!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">
<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.ru/">http://www.a.ru/</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.ru">a@r.ru</a>.
This is a test. : </p>
<address>This is a test. <br /></address>
</div>
</body>
</html>



div.className (tag.className)

 
<!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></title>
<style type="text/css">
div.slide {
 width: 500px;
 height: 468px;
 background: red;
}
</style>
</head>
<body>
  <div class="slide">
  </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.wbex.ru/style/logo.png" alt="Photo" /> </div>
    </div>
    <h2>Adipiscing Elit</h2>

</body>
</html>



Division tag

 
<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Division</title>
</head>
<body>
  <div id="main-content"> 
    <h1>About Us</h1> 
    <p>about us</p>
    
  </div>
</body>
</html>



DIV with background

 

<!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></title>
<style type="text/css">
#MainText {
  padding: 10px;
  margin: 5px;
  background-color: #ccc;
}
</style>
</head>
<body>
<div id="MainText">
<p>this is a test. this is a test. this is a test. this is a test. .</p>
</div>
</body>
</html>



div with class name

 
<!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></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.wbex.ru/style/logo.png" alt="" /> 
  </div> 
</body>
</html>



DIV with class name set up for font, size, background color and color

 
<!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></title>
<style type="text/css">
#navsite {
 font-family: Verdana, Helvetica, Arial, sans-serif;
 font-size: 0.7em;
 font-weight: bold;
 width: 12em; 
 border-right: 1px solid #666; 
 padding: 0; 
 margin-bottom: 1em; 
 background-color: #9cc; 
 color: #333; 
}
</style>
</head>
<body>
  <div id="navsite">
   <p>Site navigation:</p>
   <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li> 
    <li><a href="">Archives</a></li>
    <li><a href="">Writing</a></li>
    <li><a href="">Speaking</a></li>
    <li><a href="">Contact</a></li>
   </ul>
  </div>
</body>
</html>



div with id style

 
<!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></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>



Float text with DIV

 

<!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" xml:lang="en">
    <head>
        <title>double margin</title>
        <style rel="stylesheet" type="text/css">
div#container {
    margin: 0 20px;
    background: yellow;
    width: 300px;
    font: 16px sans-serif;
}
div#float {
    margin-left: 50px;
    background: rgb(234, 234, 234);
    float: left;
    border: 1px solid black;
    width: 75px;
    height: 50px;
}        
        </style>
    </head>
    <body>
        <div id="container">
            <div id="float">
                Float text.
            </div>
        </div>
    </body>
</html>



Set border of DIV to 5px double #000000

 
<!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>Set border of <DIV> to 5px double #000000</title>
<style type="text/css">
div {
   border: 5px double #000000;
  }
</style>
</head>
<body>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>R</li>
      <li>A</li>
      <li>S</li>
    </ul>
  </div>
</body>
</html>



Set margin to 25px for DIV

 
<!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>Set margin to 25px for <DIV></title>
<style type="text/css">
div {
   height: 150px;
   width: 150px;
   padding: 10px;
   margin: 25px;
  }
</style>
</head>
<body>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>R</li>
      <li>A</li>
      <li>S</li>
    </ul>
  </div>
</body>
</html>



Set padding to 10px for DIV

 
<!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>Set padding to 10px for <DIV></title>
<style type="text/css">
div {
   height: 150px;
   width: 150px;
   padding: 10px;
  }
</style>
</head>
<body>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>R</li>
      <li>A</li>
      <li>S</li>
    </ul>
  </div>
</body>
</html>



Set position of DIV to absolute, to bottom 50px, to left 100px

 
<html>
<head>
<title></title>
<style type="text/css">
.absolute {
 position: absolute;
 bottom: 50px;
 left: 100px;
}
</style>
</head>
<body>
  <div class="absolute">
  <p> in a div</p>
  </div>
</body>
</html>



Set right border of DIV to 1px solid #000000

 
<!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>Set right border of <DIV> to 1px solid #000000</title>
<style type="text/css">
div {
   height: 150px;
   width: 150px;
   border-right: 1px solid #000000;
  }
</style>
</head>
<body>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>R</li>
      <li>A</li>
      <li>S</li>
    </ul>
  </div>
</body>
</html>



Set right margin to 1px

 
<!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>Set right margin to 1px</title>
<style type="text/css">
div {
   height: 150px;
   width: 150px;
   margin-right: 1px;
  }
</style>
</head>
<body>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>R</li>
      <li>A</li>
      <li>S</li>
    </ul>
  </div>
</body>
</html>



Set right padding to 1px

 
<!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>Set right padding to 1px</title>
<style type="text/css">
div {
   height: 150px;
   width: 150px;
   padding-right: 1px;
  }
</style>
</head>
<body>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>R</li>
      <li>A</li>
      <li>S</li>
    </ul>
  </div>
</body>
</html>



Set width and height to DIV

 
<!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>Set width and height to <DIV></title>
<style type="text/css">
div {
   height: 150px;
   width: 150px;
  }
</style>
</head>
<body>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>R</li>
      <li>A</li>
      <li>S</li>
    </ul>
  </div>
</body>
</html>



Shrinkwrapped DIV by setting both width and height to auto

 
<!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></title>
<style type="text/css">
#block {
  width: auto;
  height: auto;
  background: gold;
}
</style>
</head>
<body>
  <div id="block">Vertically Shrinkwrapped Static Block</div> 
</body>
</html>



Use DIV as wrapper

 

<!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">
<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>



Wrap tags in DIV and set the position

 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Layout Techniques</title>
<style type="text/css">
#left {
    position: absolute;
    left:10px;
    top:50px;
    width:200px;
}
#center {
    margin-left: 200px;
    margin-right: 200px;
}
#right {
    position: absolute;
    right:10px;
    top:50px;
}
</style>
</head>
<body>
<div id="left">
<p>Navigate:</p>
<p><a href="">Home</a><br />
<a href="">News</a><br />
<a href="">About Us</a><br />
<a href="">Get in Touch</a></p>
</div>
<div id="center">
</div>
<div id="right">
<p>Of Interest:</p>
<ul>
<li>H/li>
<li>T</li>
<li>S</li>
</ul>
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/Div&oldid=5278»