webdesign : Design 8 « Templates « HTML / CSS






webdesign

   

<!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>Webdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 10px;
    text-align: center;
    background: #d9d6cc url(webdesign-images/page_bg.gif) top center repeat-x;
    color: #868686;
    margin: 0;
    padding: 10px;
}

html, #wrapper, h1 {
    margin: 0;
    padding: 0;
}

img { border: 0; }

#wrapper {
    margin: auto;
    text-align: left;
    width: 458px;
    position: relative;
}

h1, h2, h3 {
    font-size: 10px;
}


h1 {
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
}

h2 {
    margin: 0 0 5px 0;
    padding: 0;
}

h3 {
    padding: 4px 0 0 0;
}

.block {
    display: block;
}

.clear {
    clear: both;
    height: 10px;
}

.left {
    float: left;
    margin: 5px 20px 0px 0px;
}

.right {
    float: right;
    margin: 0px 0px 0px 20px;
}

.readmore {
    text-align: right;
}

/* page structure */

#wrapper {
    background: url(webdesign-images/body_t.png) 24px 0px no-repeat;
    height: 40px;
}

h1 {
    position: absolute;
    top: 16px;
    left: 43px;
    margin: 0;
    padding: 0;
    width: 135px;
    z-index: 10;
}

#nav {
    position: absolute;
    top: 31px;
    left: 0;
    width: 31px;
    margin: 0;
    padding: 0;
    z-index: 5;
}

#nav li {
    float: left;
    width: 31px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav img {
    display: block;
}

#body {
    background: url(webdesign-images/body_bg.png) repeat-y;
    position: absolute;
    top: 39px;
    left: 10px;
    width: 448px;
    margin: 0;
    padding: 10px 0 0 0;
    z-index: 2;
}

#body .inner {
    width: 300px;
    margin: 10px 20px 0px 20px;
}

#body .inner #content {
    width: 200px;
    margin-left: 10px;
    margin-top: 1em;
}

#body .inner #content p {
    margin: 1em 0;
    padding: 0;
}

#body .inner #content div {
    padding: 17px;
    border-top: 1px solid #d4d6cf;
    border-bottom: 1px solid #d4d6cf;
}

#body .inner h2 {
    font-size: 12px;
}

#page_title {
    float: left;
    margin: 3px 0 -50px 15px;
    padding: 20px 0 50px 0;
    width: 57px;
    border-right: 1px solid #d4d6cf;
}

* html #page_title {
    margin-left: 7px;
}

#news {
    float: left;
    width: 129px;
    margin: 10px 0 0px 6px;
    background: url(webdesign-images/box_bg.gif) repeat-y;
}

#news div {
    background: url(webdesign-images/box_t.gif) no-repeat;
}

#news div div {
    padding: 12px 12px 7px 12px;
    background: url(webdesign-images/box_b.gif) bottom left no-repeat;
}

#news p {
    margin: 0;
    padding: 0 0 3px 0;
}

#news .readmore {
    padding-top: 4px;
}

#paper {
    position: absolute;
    top: 39px;
    left: 243px;
    width: 196px;
    z-index: 9;
    background: url(webdesign-images/paper_bg.gif) repeat-y;
}

#paper .inner {
    background: url(webdesign-images/paper_b.gif) bottom no-repeat;
    padding: 8px 30px 18px 30px;
}

#paper .readmore {
    text-align: left;
    margin-bottom: 0;
    padding-bottom: 0;
}

#paper p {
    margin: 1em 0;
    padding: 0;
}

#footer {
    text-align: right;
    margin-top: -10px;
}

.footerie {
    display: none;
}

.clear {
  margin-top: -20px;
}

a {
    color: #575e58;
    font-weight: bold;
}

a:hover {
    color: #b31d00;
}

</style>


<!--[if IE]>
<style type="text/css" media="all">
@import "ie.css";
</style>
<![endif]-->
</head>
<body>
<div id="ie"></div>
<div id="wrapper">
  <ul id="nav">
    <li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_1.gif" width="31" height="70" alt="home" /></a></li>
    <li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_2.gif" width="31" height="70" alt="portfolio" /></a></li>
    <li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_3.gif" width="31" height="70" alt="designs" /></a></li>
    <li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_4.gif" width="31" height="70" alt="client" /></a></li>
    <li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_5.gif" width="31" height="69" alt="contact" /></a></li>
  </ul>
  <h1><a href="http://www.free-css.com/"><img src="webdesign-images/logo.gif" width="135" height="30" alt="logo" /></a></h1>
  <div id="body">
    <div class="inner">
      <div id="content">
        <div>
          <h2>Content,</h2>
          <p>Please replace this text with the original one. Please replace this font with the customised one. please replase this font. This is demo text please replase this with your text.</p>
        </div>
      </div>
      <!-- end content -->
      <div id="page_title"> <img src="webdesign-images/title_main_page.gif" width="47" height="148" alt="main page" /> </div>
      <!-- end page_title -->
      <div id="news">
        <div>
          <div>
            <h2><img src="webdesign-images/title_latest_news.gif" width="78" height="5" alt="latest news" /></h2>
            <img src="webdesign-images/picture_3.jpg" width="96" height="56" alt="picture 3" />
            <p>05-20-2005</p>
            <p>This is a demo text please replase this text with the original one please replase this text.</p>
            <p class="readmore"><a href="http://www.free-css.com/"><img src="webdesign-images/btn_learn_more.gif" width="68" height="7" alt="learn more" /></a></p>
          </div>
        </div>
      </div>
      <!-- end news -->
      <div class="clear"></div>
    </div>
    <!-- end .inner -->
    <div id="footer"> <img src="webdesign-images/footer.gif" width="435" height="196" alt="tortoise" class="footer" /> <img src="webdesign-images/footer_ie.gif" width="435" height="196" alt="tortoise" class="footerie" /> </div>
    <!-- end footer -->
  </div>
  <!-- end body -->
  <div id="paper">
    <div class="inner">
      <h2><img src="webdesign-images/title_latest_designs.gif" width="90" height="5" alt="latest designs" /></h2>
      <a href="http://www.free-css.com/"><img src="webdesign-images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a> <a href="http://www.free-css.com/"><img src="webdesign-images/btn_zoom.gif" width="130" height="22" alt="zoom in" /></a> <a href="http://www.free-css.com/"><img src="webdesign-images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a> <a href="http://www.free-css.com/"><img src="webdesign-images/btn_zoom.gif" width="130" height="22" alt="zoom in" /></a>
      <p>This is a demo text please replase the text with the original one. Please replase the text.</p>
      <p class="readmore"><a href="http://www.free-css.com/"><img src="webdesign-images/btn_more.gif" width="52" height="6" alt="see more" /></a></p>
    </div>
    <!-- end .inner -->
  </div>
  <!-- end paper -->
</div>
<!-- end wrapper -->
<div style="clear:both;position:relative;display:block;margin-top:530px;" > Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a> </div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.sprayedstrokes
2.Square
3.squarely
4.st-valentines-day
5.stacko
6.stamp
7.standardissue
8.standardized
9.starburst
10.stardust
11.stargazer
12.stark
13.steppingstone
14.stichy
15.stickybud
16.stickynotes
17.Stock
18.streetclock
19.strict
20.strockes
21.students-site
22.stygian
23.stylevantage1-0
24.stylish
25.stylized
26.subdued
27.subordinate
28.substance
29.substantial
30.superior
31.supplementary
32.surpris
33.surreal
34.sweatbee
35.swift
36.switchr
37.sworm
38.Symisun_01
39.symphonic
40.symphonyofhorror
41.synchronize
42.Synergy
43.systematized
44.tabbed
45.tangular
46.tardy
47.tcm
48.tealzine
49.team_three
50.templatika
51.Tenebrific
52.terje1_winter
53.terrafirma
54.terrafirma2
55.The-Carbon
56.the-dark-one
57.the-island
58.the-mmozine
59.the-music-studio
60.the-new-audi
61.the-synopsis
62.the-themepod
63.the-web-news
64.theacmegroup
65.thechosenone
66.thelatest
67.themanor
68.tinytemplate
69.themissing-piece
70.thermal
71.thesite
72.thetechies
73.thewall
74.the_gig
75.thisistext
76.throughout
77.thunder
78.ticktocklight
79.time
80.Timeless Template
81.timeless
82.timemanager
83.toolkit
84.tooplain
85.topbusiness
86.topgadgets
87.topworks
88.tornpaperdocom
89.totaltouch
90.towers
91.traditionalist
92.transient
93.transition
94.transport
95.trialservices
96.trikea-static
97.trinityinstitute
98.tropical-evening
99.tropical
100.truenature
101.turn-out-mag
102.Turnesol
103.turnitup
104.turrion-development
105.tv-archade
106.twirling
107.twisted
108.Typography
109.ultimateweb
110.unbound-1.0
111.uncomplicated
112.undefined
113.Underground
114.undertaking
115.UnderWraps
116.undiscovered
117.unembellished
118.unilluminated
119.uniq
120.unite
121.universal
122.unknown
123.unlink
124.unnamed
125.unqualified
126.urbanartist
127.usabilityreport
128.variety
129.vectorlover1-0
130.vegetable
131.veggie
132.ventix
133.vertical
134.verticals
135.vertigo
136.VeryGreen
137.VIBE
138.vibrant
139.Village
140.vintage-style
141.violetrays
142.visioninc
143.visions
144.vitruvius
145.vivid
146.Viziora
147.voodoo-dolls
148.voodoodollyv2.0
149.voyage
150.WaiveLive
151.walls
152.wanderer
153.warmblue
154.warped
155.watchthis
156.watercolored-portfolio
157.waterfactory
158.waterfall
159.waterfalls
160.WaterPool
161.we think
162.web-application
163.web-design-studio
164.web-design
165.web-hosting
166.web-shop
167.web2
168.webdesigninfo
169.webmob
170.websitedesignx
171.webvision
172.Web_Application
173.wellness
174.whatsyoursolution
175.wickedred
176.widecommerce
177.widget
178.widgetlike
179.wildgoose
180.wing-the-air
181.winglobal
182.wiremesh
183.world-of-warcraft
184.xenlog
185.xgallery
186.xhtmldesign
187.xhtmldev_rainbow
188.xhtmldev_RealEstate
189.xodafields0.2
190.ynt
191.yosemite
192.your-blazing-app
193.yourhost
194.yourministry
195.zillanine