html box

More info about HTML Box from GoogleSteegle  and from Kirksville Web Design





































































Details Tag

Click the Line below for the details










More Info HERE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.box
{
width:320px;
padding:10px;
border:10px solid green;
margin:0px;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: large;
}
</style>
</head>
<body>
<div class="box">This text in a box example uses css.<br /><b>Note:</b> there is a
DOCTYPE declaration (above the html element), so it displays correctly in all browsers.
</div>
</body>
</html>


<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p><span>T</span>he first letter in ths paragraph is styled
  with CSS to be 400% larger than the rest of the text.
</p>

<html>
<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>
<div class="img">
 <a target="_blank" href="https://sites.google.com/site/k8omsbob/368stjoeheadwaters_5756.jpg"><img src="https://sites.google.com/site/k8omsbob/tn_368stjoeheadwaters_5756.jpg?attredirects=0&d=1
" alt="St. Joe Headwaters" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <img src="https://sites.google.com/site/k8omsbob/open-image-in-new-page/ducks.jpg?attredirects=0&d=1" alt="Ducks" width="110" height="90" />
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="https://sites.google.com/site/k8omsbob/photos-and-other-images/photo-gallery/flea_market.jpg"><img src="https://sites.google.com/site/k8omsbob/photos-and-other-images/photo-gallery/flea_market.jpg?attredirects=0&d=1" alt="Flea Market" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>

DETAILS TAG

<!DOCTYPE html>
<html>
<body>
<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by K8OMS. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of K8OMS.</p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>
</p>
</body>
</html>