oswd_blozilla : Design 6 « Templates « HTML / CSS

HTML / CSS » Templates » Design 6 
oswd_blozilla
   

<!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>your title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html {  width: 100}

body {
        font-family: "Trebuchet MS", verdana, arial, "Times New Roman";
        font-size: 90%;
        color: #3D3535;
        background-color: #E4E5E0;
        margin: 20px;
        padding: 0px;
        line-height: 140%;
}

/* Wrapper */
.all {
        text-align: center;
        width: 100%;
}

/* the container */
.box {
        background-color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        text-align: left;
        width: 90%;
}

/*holds the tabs at the top*/
.snazzy {background:transparent;}
.snazzy span {text-align:center; color:#000; margin:0; font-weight:normal;}

.b1, .b2, .b3, .b4 {display:block; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}

.red {background:#c00;}
.orange {background:#f90;}
.yellow {background:#b8b800;}
.green {background:#090;}
.blue {background:#00c;}
.indigo {background:#309;}
.violet {background:#c6c;}

#navigation2 {background:transparent; margin:1em auto; height:3em; background:#fff;font-size:12px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }

#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation2 li {display:block; float:left; margin:0 1px;}

.pad {display:block; height:1em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }

a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}
a.menu2:hover {background:transparent; cursor:pointer;}
a.menu2:hover .boxcontent {padding-bottom:0.8em;}
a.menu2:hover .pad {height:0.2em;}

.header {
        padding: 10px;
        margin-top:3px;
        height: 265px;
        background: #fff url(logo.gifno-repeat;
        border:1px solid #000;
}

/*just a fix, taken from http://www.positioniseverything.net/easyclearing.html*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
        display: inline-table;
}

/* Hides from IE-mac \*/
html .clearfix {
        height: 1%;
}

.clearfix {
        display: block;
}
/* End hide from IE-mac */

/*the container*/
.content {
        margin-right: 255px;
        padding: 20px;
}

.content h1 {
        font-size: 110%;
        margin: 10px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        border-bottom: 2px solid #090;
}

/*this is the right hand bar, news bar, links bar w/e*/
.sidebar {
        margin-top: 40px;
        width: 245px;
        float: right;
}

.sidebar h1 {
        background-color: #090;
        color: #FFFFFF;
        padding: 3px;
        margin: 0px 0px 0px 0px;
        font-size: 100%;
        font-weight: normal;
}

/*the footer, with copyright*/
.footer {
clear:both;
        background-color: #090;
        padding: 4px;
        font-size: 80%;
        text-align: center;
}

/*sets the link colours and style*/
a:link, a:active, a:visited {
        color: #A53512;
}

a:hover {
        color: #A53512;
        text-decoration: none;
}


</style>


</head>
<body>
<div class="all">
        <div class="box">
<!-- The menu, tabs -->
<div id="navigation2">
<ul>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 green"></b><b class="b3 green"></b><b class="b4 green"></b><span class="boxcontent green">Home Page</span></b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 red"></b><b class="b3 red"></b><b class="b4 red"></b><span class="boxcontent red">Curriculum</span></b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 yellow"></b><b class="b3 yellow"></b><b class="b4 yellow"></b><span class="boxcontent yellow">Contact</span></b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 violet"></b><b class="b3 violet"></b><b class="b4 violet"></b><span class="boxcontent violet">Rss</span></b></a>
</li>
</ul>
          </div>
<!-- The header -->
                <div class="header"></div>
<!-- the sidebar, right column -->
                <div class="sidebar">
                <h1>Menu 1</h1>
                <div class="p2">
                <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since
                the 1500s, when an unknown printer took a galley of
                type and scrambled it to make a type specimen book.
                </p>
                </div>
                <h1>Menu 2</h1>
                <div class="p2">
                <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                </div>
                <h1>Valid</h1>
                <p>
    <a href="http://validator.w3.org/check?uri=referer">xhtml</a>
  </p>
  <p>
 <a href="http://jigsaw.w3.org/css-validator/">CSS</a>
</p>
                </div>
<!-- main content area-->
                <div class="content">
                  <h1>Your title here</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
 Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at
 Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a
 Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the
 undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
  (The Extremes of Good and Evilby Cicero, written in 45 BC. This book is a treatise on the theory of ethics,
  very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
  comes from a line in section 1.10.32.
</p>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero
are also reproduced in their exact original form, accompanied by English versions from
the 1914 translation by H. Rackham.
</p>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero
are also reproduced in their exact original form, accompanied by English versions from
the 1914 translation by H. Rackham.
</p>
</div>

                <div class="clearfix"></div>
<!-- footer, copyright -->
                <div class="footer">&copy; from 2006, design by <a href="http://www.sastgroup.com" title="powereb by www.sastgroup.com" >sastgroup.com</a> | <a href="http://www.blozilla.com" title="blozilla.com">blozilla.com</a></div>
        </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.our-work
58.ourhouse
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
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.