Box layout
<!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>
<title>Artificial Intelligence</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style rel="stylesheet" type="text/css">
/*
template: Artificial Intelligence
author: luka cvrk (www.solucija.com)
*/
body {
margin: 0;
padding: 0;
background: #fff url(artificialintelligence-images/bg.gif) repeat-x;
font: normal .7em Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
line-height: 1.6em;
color: #333;
}
/* LINKS AND HEADINGS STYLING */
a {
color: #546F92;
background: inherit;
}
a:hover {
color: #808080;
background: inherit;
}
h1 {
font: bold 2em "Trebuchet MS", Helvetica, Sans-Serif;
margin: 0;
color: #fff;
background-color: transparent;
}
h2 {
font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif;
}
h3 {
clear: both;
font-size: 1.1em;
color: #000;
background: #fff url(artificialintelligence-images/h3bg.gif) no-repeat center left;
padding: 0 14px;
margin: 0;
}
.blue {
color: #546F92;
background: inherit;
}
.image {
float: left;
border: 2px solid #e2e2e2;
padding: 3px;
margin: 0 15px 10px 0;
}
/* CONTENT WRAPPER */
#main {
width: 900px;
margin: 25px auto 0 auto;
}
/* TOP LEFT LOGO */
#logo {
float: left;
padding: 10px 0 10px 10px;
}
#logo h1 {
color: #000;
background: #fff;
}
/* TOP RIGHT HORIZONTAL MENU */
#menu {
float: right;
background: #fff url(artificialintelligence-images/barul.gif) no-repeat bottom right;
color: #808080;
padding: 18px 1px 11px 0;
margin: 0;
}
#menu li {
padding: 14px 18px 14px 18px;
color: #444;
background: #fff url(artificialintelligence-images/bar.gif) no-repeat bottom left;
display: inline;
}
#menu li.active {
background: #fff url(artificialintelligence-images/baractive.gif) no-repeat bottom left;
color: #8D9CAF;
font-weight: bold;
padding: 14px 18px 14px 18px;
margin: 0 1px 0 0;
}
#menu li a {
background: #f8f8f8;
color: #808080;
text-decoration: none;
}
#menu li a:hover {
color: #000;
background: #f8f8f8;
}
.key {
text-decoration: underline;
} /* ACCESKEY UNDERLINED LETTER */
/* LEFT INTRO SIDE */
#intro_left {
clear: left;
float: left;
width: 250px;
background: #8D9CAF url(artificialintelligence-images/leftintrobg.gif) repeat-x;
color: #E5EAF2;
margin: 0 0 1px 0;
}
#intro_left a {
color: #fff;
background: inherit;
}
#intro_left p {
padding: 14px 15px;
margin: 0;
}
/* LEFT VERTICAL MENU */
#menu_left {
float: left;
margin: 0 0 6px 0;
padding: 0 0 1px 0;
border-bottom: 2px solid #e2e2e2;
}
#menu_left li {
list-style: none;
}
#menu_left li a {
display: block;
color: #3F5B7F;
background: #C2CEDE url(artificialintelligence-images/arrow.gif) no-repeat center left;
width: 204px;
padding: 7px 23px 7px 23px;
margin: 0 0 1px 0;
font-weight: bold;
text-decoration: none;
}
#menu_left li a:hover {
background: #9EB1C9 url(artificialintelligence-images/arrow.gif) no-repeat center left;
color: #fff;
}
/* RIGHT INTRO SIDE */
#intro_right {
float: right;
width: 340px;
padding: 25px 280px 0 20px;
background: #BCCEDA url(artificialintelligence-images/intro.jpg) no-repeat;
color: #547592;
margin: 0 0 6px 0;
height: 174px;
border: 2px solid #e2e2e2;
}
#intro_right h1 {
margin: 0 0 20px 0;
}
#intro_right .white {
color: #FFF;
background-color: transparent;
}
/* LEFT SIDE */
#left {
float: left;
width: 250px;
}
.box {
padding: 4px 15px;
border: 1px solid #ccc;
margin: 0 0 10px 0;
}
.note {
padding: 15px 15px 20px 100px;
border: 1px solid #CFCB66;
margin: 0 0 5px 0;
background: #FFFFAD url(artificialintelligence-images/package.gif) no-repeat;
color: #585616;
}
/* RIGHT SIDE */
#right {
float: right;
width: 643px;
}
.leftcol {
float: left;
padding: 12px 15px;
width: 285px;
border: #ccc 1px solid;
text-align: justify;
margin: 0 0 10px 0;
}
.rightcol {
float: right;
padding: 10px 15px;
width: 285px;
border: #ccc 1px solid;
margin: 0 0 10px 0;
}
.special {
clear: both;
margin: 0px 0 20px 0;
padding: 5px 20px;
border: 1px solid #ccc;
background: #eee;
color: #444;
}
/* FOOTER */
#footer {
clear: both;
padding: 5px;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="main">
<div id="logo">
<h1>Artificial <span class="blue">Intelligence</span></h1>
</div>
<ul id="menu">
<li class="active"><span class="key">H</span>ome</li>
<li><a href="" accesskey="f">Intelligence <span class="key">F</span>acts</a></li>
<li><a href="" accesskey="r"><span class="key">R</span>esearch</a></li>
<li><a href="" accesskey="p"><span class="key">P</span>erception</a></li>
<li><a href="" accesskey="o">R<span class="key">o</span>botics</a></li>
<li><a href="" accesskey="m"><span class="key">C</span>ognitive Science</a></li>
</ul>
<div id="intro_left">
<p>The leading textbook in <a href="">Artificial Intelligence</a>. Used in over 1000 universities in 91 countries (over 90% market share) and the 85th most cited publication on Citeseer.</p>
</div>
<div id="intro_right">
<p class="white">Artificial Intelligence</p>
<h1>Term by definition</h1>
<p>A branch of computer science that studies how to endow computers with capabilities of human intelligence. For example, speech recognition is a problem being worked on by AI scientists.</p>
</div>
<ul id="menu_left">
<li><a href="" accesskey="m">AI: A <span class="key">M</span>odern Approach</a></li>
<li><a href="" accesskey="s"><span class="key">S</span>tuart Russell</a></li>
<li><a href="" accesskey="n">Peter <span class="key">N</span>orvig</a></li>
</ul>
<div id="left">
<div class="box">
<h2>Philosophy and the Future</h2>
<p><b><a href="">9th October</a> · Lorem Ipsum</b><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
<p><b><a href="">12th October</a> · Lorem Ipsum</b><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
</div>
<div class="note">
<p><a href="" title="Register Now!">Register now</a> to recieve special promotion packages and bonus features!</p>
</div>
</div>
<div id="right">
<div class="leftcol">
<h3>Philosophical Foundations</h3>
<p><img src="artificialintelligence-images/image.gif" alt="Image" class="image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.</p>
</div>
<div class="rightcol">
<h3>Reinforcement Learning</h3>
<p><img src="artificialintelligence-images/image.gif" alt="Image" class="image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
<h3>Statistical Learning Methods</h3>
<p><img src="artificialintelligence-images/image.gif" alt="Image" class="image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
</div>
<div class="special">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<div id="footer">
<p>© Copyright <a href="">Artificial Intelligence</a> 2006 · Design: <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Luka Cvrk</a> · <a href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a> valid</p>
</div>
</div>
</body>
</html>
Related examples in the same category