Image side bar : img « Tags « HTML / CSS
Image side bar
<!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>Artica</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
/* ----- BASIC ELEMENTS ----- */
body {
background-color: #fff;
color: #707070;
font-size: 11px;
font-family: 'Tahoma';
background: url(artica-images/background.gif);
}
.clear {
clear: both;
}
img {
border: 0px;
}
p {
margin: 10px 30px 10px 30px;
}
.yellow_span {
color: #DFBD02;
font-weight: bold;
}
.green {
color: #016001;
}
.date {
color: #016001;
text-decoration: overline;
padding: 10px 0 20px 0;
}
.light_green {
color: #85B285;
}
#content_footer p {
margin: 40px 30px 10px 30px;
font-size: 10px;
text-align: left;
}
#menu_left p {
margin: 25px 0px 0px 25px;
font-size: 9px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.login_box p {
margin: 20px 10px 0 25px;
color: #016001;
}
.login_box_2 p {
padding: 0 10px 0 0;
color: #fff;
}
#top p {
margin: 95px 0px 0px 154px;
font-size: 9px;
}
.content_box p {
margin: 10px 5px 10px 5px;
font-size: 10px;
text-align: left;
}
.content_box_large p {
margin: 10px 30px 10px 15px !important;
margin: 10px 30px 10px 5px;
font-size: 11px;
text-align: justify;
}
.content_box_small p {
margin: 10px 30px 10px 0px;
font-size: 11px;
text-align: left;
}
h1 {
margin: 20px 30px 7px 30px;
font-weight: bold;
font-size: 15px;
color: #fff;
}
h2 {
margin: 0px 30px 10px 30px;
font-size: 12px;
font-weight: bold;
color: #DFBD02;
}
a {
text-decoration: none;
color: #016001;
}
a:hover {
text-decoration: none;
}
/*----- MENU ----- */
#navLeft,#navRight {
margin: 0;
padding: 0;
width: 122px;
list-style: none;
overflow: hidden;
}
#navLeft li,#navRight li {
width: 122px;
overflow: hidden;
text-transform: uppercase;
font-size: 9px;
font-weight: bold;
}
#navLeft a,#navRight a {
color: #fff;
}
.li_nav_header a {
display: block;
width: 122px;
height: 20px;
background: url(artica-images/nav_header.gif) no-repeat;
}
.li_nav_body a {
display: block;
width: 122px;
height: 20px;
background: url(artica-images/nav_body.gif) no-repeat;
padding-left: 25px;
line-height: 20px;
}
.li_nav_footer a {
display: block;
width: 122px;
height: 33px;
background: url(artica-images/nav_footer.gif) no-repeat;
}
.li_nav_body a:hover {
background-position: 0 -20px;
color: #016001;
}
.li_active a:active {
background: url(artica-images/nav_body.gif) no-repeat;
background-position: 0 -40px;
color: #fff;
}
/*----- LAYOUT ----- */
#container {
width: 700px;
margin: 0 auto;
}
#top {
height: 10px;
padding: 10px;
}
#menu_left {
width: 122px;
float: left;
}
.login_box {
width: 122px;
height: 155px;
float: left;
background: url(artica-images/login_box.gif) no-repeat top;
}
.login_box_2 {
width: 122px;
height: 155px;
float: left;
background: url(artica-images/login_box.gif) no-repeat top;
}
#head {
width: 540px;
height: 240px;
float: right;
background: url(artica-images/content_header.gif) no-repeat top;
}
#content {
background: url(artica-images/content_body.gif) repeat-y;
width: 540px;
text-align: justify;
float: right;
}
.content_box_large {
width: 340px;
margin: 10px 0 30px 14px;
float: left;
}
.content_box_small {
width: 140px;
margin: 10px 0 30px 14px;
float: right;
}
#content_footer {
background: url(artica-images/content_footer.gif) no-repeat;
height: 85px;
width: 540px;
float: right;
text-align: center;
margin-bottom: 30px;
}
/*----- IMAGES ----- */
a img {
border: none;
}
img.left,img.center,img.right {
padding: 4px;
border: 1px solid #a0a0a0;
}
img.left {
float: left;
margin: 0px 12px 5px 0px;
}
img.right {
float: right;
margin: 0px 30px 5px 0px;
}
/*----- FORM ----- */
input {
border-top: 1pt solid #cccccc;
border-bottom: 1pt solid #cccccc;
border-right: 1pt solid #cccccc;
border-left: 1pt solid #cccccc;
font: normal 10px tahoma;
width: 70px;
color: #707070;
margin: 5px 10px 5px 25px;
}
input.login {
margin-top: 10px !important;
margin-top: -5px;
}
</style>
</head>
<body>
<div id="container">
<div id="top"> </div>
<div id="menu_left">
<ul id="navLeft">
<li class="li_nav_header"><a href=""></a></li>
<li class="li_nav_body"><a href="">Home</a></li>
<li class="li_nav_body"><a href="">Usage</a></li>
<li class="li_nav_body"><a href="">Contact</a></li>
<li class="li_nav_footer"><a href=""></a></li>
</ul>
<div class="login_box">
<p>Login</p>
<form action="" method="post" enctype="multipart/form-data">
<input class="login" style="" type="text" value="username" name="user" />
<input type="password" value="password" name="pass" />
<input value="Log in" type="submit" />
</form>
</div>
</div>
<div id="head">
<h1>Artica - Simple CSS and xHTML</h1>
<h2>A clean, fresh, green design that is quick to load.</h2>
<p style="color:white;"> <a href="" class="yellow_span" >Author</a> - My names Callum Rimmer and I run a web software company in Bath, <br />
England. We have created a simple content management system and hosting <br />
package for small companies and individuals called <a href="" class="yellow_span">iFrame</a>. iFrame is made to as<br />
easy to use as possible whilst giving you the flexibilty to design your site how <br />
you like. You can use any of the free designs on OSWD.org as an iFrame template.<br />
<br />
<br />
>> Please keep the <a href="" class="yellow_span">backlink</a> in the footer if you use this template. <br />
</p>
</div>
<div id="content">
<div class="content_box_large">
<p><b class="green">Usage</b></p>
<p><b class="light_green">This template could be used for many things</b>.</p>
<p>This design is good for anyone who wishes to display images or photos on the homepage of there site. If you have a blog or photography site then this is a great medium for displaying content. Have fun amending but please keep the <a href="">backlink</a> in the footer. Images are from <a href="">sxc.hu</a> a great site for free imagery.</p>
<p class="date"> »Date or »Comment</p>
<p><b class="green">Contact</b></p>
<p><b class="light_green">Want to contact me?</b></p>
<p>If you would like to contact me for some help using this template or if you would like to known more about iFrame, Email me. </p>
<p class="date"> »Date or »Comment</p>
</div>
<div class="content_box_small">
<p><b class="green">Images</b></p>
<img class="left" src="artica-images/leaf.jpg" alt="" /> <img class="left" src="artica-images/leaf.jpg" alt="" /> <img class="left" src="artica-images/leaf.jpg" alt="" /> </div>
<div style="clear:both;"></div>
</div>
<div id="content_footer">
<p>Designed by <a href="http://www.personal-web-design.com">iFrame</a> | yourname © 2006</p>
</div>
</div>
</body>
</html>