HTML/CSS/Box Model/Div

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

Block divider

   <source lang="html4strict">

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

this is a test.

this is a test.

</body> </html> 

</source>


Click to show and hide DIV content (IE only)

   <source lang="html4strict">

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

</style> <script type="text/javascript" language="javascript">

</script> </head> <body>

<a href="tour.html">t</a>

click me

click me

click me

click me

</body> </html> 

</source>


Click to show or hide DIV section

   <source lang="html4strict">

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

</script> </head> <body onload="closeall()">

Click me to show or hide content

This is a test.

  • <a href="">This is a test. </a>
  • <a href="">This is a test. </a>
  • <a href="">This is a test. </a>This is a test.
  • <a href="">This is a test. </a>
  • <a href="contact.html">Contact Us</a>

Click me to show or hide content

<a href=".html">This is a test. </a>.

This is a test.

Click me

This is a test. <a href="mailto:a@r.ru">a@r.ru</a>. This is a test. :

<address>This is a test.
</address>

</body> </html> 

</source>


div.className (tag.className)

   <source lang="html4strict">

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

</body> </html> 

</source>


div in a div with class name

   <source lang="html4strict">

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

<img src="http://www.wbex.ru/style/logo.png" alt="Photo" />

Adipiscing Elit

</body> </html> 

</source>


Division tag

   <source lang="html4strict">

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

About Us

about us

</body> </html> 

</source>


DIV with background

   <source lang="html4strict">

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

  1. MainText {
 padding: 10px;
 margin: 5px;
 background-color: #ccc;

} </style> </head> <body>

this is a test. this is a test. this is a test. this is a test. .

</body> </html> 

</source>


div with class name

   <source lang="html4strict">

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

  <img src="http://www.wbex.ru/style/logo.png" alt="" />

</body> </html> 

</source>


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

   <source lang="html4strict">

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

  1. 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>

</body> </html> 

</source>


div with id style

   <source lang="html4strict">

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

  1. content {
background: red;
height: 400px;
width: 674px;

} </style> </head> <body>

header 2

</body> </html> 

</source>


Float text with DIV

   <source lang="html4strict">

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

               Float text.

   </body>

</html> 

</source>


Set border of DIV to 5px double #000000

   <source lang="html4strict">

<!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
to 5px double #000000</title>

<style type="text/css"> div { 

  border: 5px double #000000;
 }

</style> </head> <body>

  • A
  • B
  • C
  • R
  • A
  • S

</body> </html> 

</source>


Set margin to 25px for DIV

   <source lang="html4strict">

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

<style type="text/css"> div { 

  height: 150px;
  width: 150px;
  padding: 10px;
  margin: 25px;
 }

</style> </head> <body>

  • A
  • B
  • C
  • R
  • A
  • S

</body> </html> 

</source>


Set padding to 10px for DIV

   <source lang="html4strict">

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

<style type="text/css"> div { 

  height: 150px;
  width: 150px;
  padding: 10px;
 }

</style> </head> <body>

  • A
  • B
  • C
  • R
  • A
  • S

</body> </html> 

</source>


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

   <source lang="html4strict">

<html> <head> <title></title> <style type="text/css"> .absolute { 

position: absolute;
bottom: 50px;
left: 100px;

} </style> </head> <body>

in a div

</body> </html> 

</source>


Set right border of DIV to 1px solid #000000

   <source lang="html4strict">

<!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
to 1px solid #000000</title>

<style type="text/css"> div { 

  height: 150px;
  width: 150px;
  border-right: 1px solid #000000;
 }

</style> </head> <body>

  • A
  • B
  • C
  • R
  • A
  • S

</body> </html> 

</source>


Set right margin to 1px

   <source lang="html4strict">

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

  • A
  • B
  • C
  • R
  • A
  • S

</body> </html> 

</source>


Set right padding to 1px

   <source lang="html4strict">

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

  • A
  • B
  • C
  • R
  • A
  • S

</body> </html> 

</source>


Set width and height to DIV

   <source lang="html4strict">

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

<style type="text/css"> div { 

  height: 150px;
  width: 150px;
 }

</style> </head> <body>

  • A
  • B
  • C
  • R
  • A
  • S

</body> </html> 

</source>


Shrinkwrapped DIV by setting both width and height to auto

   <source lang="html4strict">

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

  1. block {
 width: auto;
 height: auto;
 background: gold;

} </style> </head> <body>

Vertically Shrinkwrapped Static Block

</body> </html> 

</source>


Use DIV as wrapper

   <source lang="html4strict">

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

Contact Form

     <form id="form1" name="form1" method="post" action="/">
   
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

quid pro quo

</body> </html> 

</source>


Wrap tags in DIV and set the position

   <source lang="html4strict">

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

  1. left {
   position: absolute;
   left:10px;
   top:50px;
   width:200px;

}

  1. center {
   margin-left: 200px;
   margin-right: 200px;

}

  1. right {
   position: absolute;
   right:10px;
   top:50px;

} </style> </head> <body>

Navigate:

<a href="">Home</a>
<a href="">News</a>
<a href="">About Us</a>
<a href="">Get in Touch</a>

</body> </html>

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/Div&oldid=5279»