Box layout : Size and Layout « Layout « HTML / CSS

HTML / CSS » Layout » Size and Layout 
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.gifrepeat-x;
  font: normal .7em Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
  line-height: 1.6em;
  color: #333;
}

/* LINKS AND HEADINGS STYLING */
{
  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.gifno-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 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.gifno-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.gifno-repeat bottom left;
  display: inline;
}

#menu li.active {
  background: #fff url(artificialintelligence-images/baractive.gifno-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.gifrepeat-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.gifno-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.gifno-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.jpgno-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.gifno-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 shareand 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> &middot; 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> &middot; 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>&copy; Copyright <a href="">Artificial Intelligence</a> 2006 &middot; Design: <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Luka Cvrk</a> &middot; <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
1.Sized Absolute center aligned
2.width and height inline style
3.width height and absolute positioning
4.Stretched Absolute center aligned
5.Sized Absolute center offset
6.Stretched Absolute centered
7.Top Aligned Shrinkwrapped Static Block
8.Shrinkwrapped Absolute Top Aligned
9.Sized Static Block top offset
10.Response layout with avatar image
11.About page layout
12.About page layout 2
13.Daliy post layout
14.Quotation layout
15.Day by day post layout
16.Fixed Box Layout
17.Using Fixed height and width to create layout
18.Layout input controls with css
19.Using table to layout form controls
20.Form Layout with HTML Example
21.Site map layout
22.Poem layout
23.Nested style layout
24.Liquid Layout
25.Fixed Width Layout
26.Column span for four column layout
27.How tables linearize for layouts
28.Centering a layout horizontally
29.Creating a maximum-width layout
30.Nested Layout Example
31.Gallery layout
32.Link navigation layout
33.Link topic layout
34.Post layout
35.Three link layout
36.Center content layout
37.Card layout page
38.Even column layout
39.Two column layout, 1024 pixel width
40.Content area layout
41.Code layout
42.Page layout with position:absolute;
43.Two-column layout with fixed width and height
44.Using margin to create offset for layout
45.Layout with three layers
46.position:fixed; layout
47.Layout with position:absolute;
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.