ourhouse : Design 6 « Templates « HTML / CSS






ourhouse

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Our House</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {margin: 0; padding: 0;}

body {margin: 0 0 20px 0; font: 90% Verdana, sans-serif; color: #e8e8e8; background-color: #6a816f;}
a, a:visited { text-decoration: underline; color: #44ccdd; }
a:hover, a:active { text-decoration: none; color: #63C91E; }

#container {width: 760px; margin: 0 auto; background: #e8e8e8 url(ourhouse-images/bg.png) repeat-y; color: #333;}

#header {width: 760px; height:170px; background: transparent url(ourhouse-images/header.png) no-repeat; margin: 0 auto;}
#header h1 {width: 285px; height: 170px; background: url(ourhouse-images/callout.gif) no-repeat; position: absolute; top: 15px; left: auto; margin-left: 10px; font-size: 1.80em; color: #333; padding: 55px 0 0 0; text-align: center;}
#header span { position: absolute; top: 110px; left: auto; text-align: center; width: 285px; }

#main { float:left; padding: 20px 10px; width: 530px; font-size: 0.95em; }
#main h1 { font-size: 1.4em; color: #63C91E; padding-bottom: 10px; }
#main h2 { font-size: 1.1em; color: #63C91E; padding-bottom: 10px; }
#main p {padding-bottom: 10px;}
blockquote { margin: 10px 10px; padding: 10px; background: #C7DEB6; color: #333; border-right: 2px solid #63C91E; border-left: 2px solid #63C91E; font-size: 0.85em; }

#right {float:left; padding: 20px 10px; width: 180px; font-size: 0.85em;}
#right h2 { font-size: 1.2em; color: #63C91E; padding-bottom: 10px; }
#nav {width : 180px; margin : 0 0 10px 0;}
ul#menu {margin-left : 0; padding-left : 0; list-style-type : none;}
#menu a {display : block; padding : 3px; width : 169px; margin-bottom : 1px; background : #63C91E; color : #e8e8e8; border-left: 4px solid #44ccdd; font-weight: normal !important;}
#menu a:link, #menu a:visited {color : #e8e8e8; background : #63C91E; text-decoration : none; }
#menu a:hover, #menu a:active { background : #44ccdd; color : #333; border-left: 4px solid #63C91E;}
#current { background : #C7DEB6 !important; color : #333 !important; border-left: 4px solid #63C91E !important;} 

#footer { clear:both; width: 760px; height: 60px; font-size: 0.75em; margin: 0 auto; background: transparent url(ourhouse-images/footer.png) no-repeat; text-align: center; }
#footer p { padding: 10px; }

img {float: left; margin: 5px; padding: 2px; border: 1px solid #C7DEB6;}

</style>


</head>
<body>
<div id="container">
  <div id="header">
    <h1>Our House...</h1>
    <span>is a very, very, very fine house</span> </div>
  <div id="main">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat semper dolor. Vivamus rutrum arcu vel turpis. Donec elit. <a href="http://www.free-css.com/">Integer volutpat tellus</a> consequat quam auctor congue.</p>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat semper dolor. Vivamus rutrum arcu vel turpis. Donec elit. Integer volutpat tellus consequat quam auctor congue.</p>
    </blockquote>
    <h2>Photos</h2>
    <p><img src="ourhouse-images/lroom.png" alt="Living Room" /><img src="ourhouse-images/lroom.png" alt="Living Room" /></p>
  </div>
  <div id="right">
    <h2>Navigation</h2>
    <div id="nav">
      <ul id="menu">
        <li><a href="http://www.free-css.com/" id="current">Home</a></li>
        <li><a href="http://www.free-css.com/">Link two</a></li>
        <li><a href="http://www.free-css.com/">Link three</a></li>
        <li><a href="http://www.free-css.com/">Link four</a></li>
        <li><a href="http://www.free-css.com/">Link five</a></li>
      </ul>
    </div>
    <h2>News</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat semper dolor. Vivamus rutrum arcu vel turpis. Donec elit. Integer volutpat tellus consequat quam auctor congue. <a href="http://www.free-css.com/">Read More &raquo;</a></p>
  </div>
  <div id="footer">
    <p>Copyright&copy;2007 You XHTML template by <a href="http://karenblundell.com">Karen Blundell</a></p>
  </div>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.online-edu
46.onlinemoviestore
47.oodles
48.openyourwindows
49.opposed
50.optimal-touch
51.orchidaceae
52.ordinaire
53.ormeggiare
54.ornamental
55.ornate
56.OrngBlu
57.oswd_blozilla
58.our-work
59.outdoorv1.0
60.outliers
61.outoftheblue
62.outtabox
63.oxidation
64.package
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination