portal_blue
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
/*
Author: Fred Chu (id.sonic@gmail.com)
Date: 09.23.2005
Locale: China
Other links:
http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.dezwozhere.com/links.html
*/
body {
font-family: Georgia, "Times New Roman", Times, serif;
background: url(portal_blue-img/top-left.gif) top left no-repeat;
margin: 0;
padding: 0;
font-size: 0.9em;
}
#wrap {
background: url(portal_blue-img/top-right.gif) top right no-repeat;
min-width: 800px;
height: 400px;
}
#header {
background: url(portal_blue-img/top-center.gif) repeat-x;
height: 52px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 22px;
}
#left {
position: absolute;
top: 40px;
left: 50px;
margin: 0;
padding: 0;
width: 181px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 151px;
}
html>body #left {
width: 151px; /* ie5win fudge ends */
}
#middle {
margin: 10px 230px 30px 220px; /* n6.01win n6mac won't recognize top margin for middle box, so it goes in body */
padding: 10px;
}
#right {
position: absolute;
top: 40px;
right: 50px; /* Opera5.02 will show a space at right swhen there is no scroll bar */
margin: 0;
padding: 0;
width: 190px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 160px;
background: url("portal_blue-img/right-body.gif");
}
html>body #right {
width: 160px; /* ie5win fudge ends */
}
/*Start Menu Style*/
#menu ul {
width: 151px;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li{
margin: 0;
padding: 0;
display: block;
}
#menu ul li a#top {
background: url("portal_blue-img/menu-top.gif") no-repeat;
}
#menu ul li a#top:hover {
background: url("portal_blue-img/menu-top-s.gif") no-repeat;
}
#menu ul li a {
margin: 0;
text-decoration: none;
height: 20px;
line-height: 20px;
padding: 5px;
text-align: center;
font-size: 150%;
font-family: georgia;
display: block;
background: url("portal_blue-img/menu-body.gif");
color: #666;
border-bottom: #ececec 1px solid;
}
#menu ul li a:hover {
color: #fff;
background: url("portal_blue-img/menu-body-s.gif");
}
#menu ul li a#bottom {
background: url("portal_blue-img/menu-bottom.gif") bottom no-repeat;
border-bottom: none;
}
#menu ul li a#bottom:hover {
background: url("portal_blue-img/menu-bottom-s.gif") bottom no-repeat;
border-bottom: none;
}
/*End of Menu Style*/
#logo {
text-align: center;
line-height: 100px;
vertical-align: middle;
color: #ccc;
font-size: 150%;
margin-bottom: 10px;
background: url("portal_blue-img/logo.gif") no-repeat;
width: 181px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 151px;
height: 130px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 100px;
}
/*Start right content*/
#right-list-body {
background: transparent url("portal_blue-img/right-top.gif") no-repeat;
}
#right-list-bottom {
background: transparent url("portal_blue-img/right-bottom.gif") bottom left no-repeat;
height: 13px;
}
#right-list-body h4 {
margin: 0;
padding-top: 10px;
padding-left: 10px;
border-bottom: 2px solid #ececec;
font-size: 13px;
}
#design {
text-align: center;
margin: 10px auto;
}
#design img {
border: 1px solid #999;
}
#design a {
text-decoration: none;
color: darkblue;
}
#design a:hover {
color: black;
}
/*End right content*/
.content {
margin: 0;
padding: 0;
clear: both;
}
.entry {
padding: 0;
margin: 0;
background: url("portal_blue-img/entry.gif");
}
.entry1 {
background: url("portal_blue-img/entry-1.gif") top left no-repeat;
padding: 0;
margin: 0;
}
.entry2 {
background: url("portal_blue-img/entry-2.gif") top right no-repeat;
padding: 0;
margin: 0;
}
.entry3 {
background: url("portal_blue-img/entry-3.gif") bottom left no-repeat;
padding: 0;
margin: 0;
}
.entry4 {
background: url("portal_blue-img/entry-4.gif") bottom right no-repeat;
padding: 0;
margin: 0;
}
.entry4 p {
margin: 10px;
padding: 0;
}
#top-news {
margin: 0px;
padding: 0;
background: url("portal_blue-img/entry.gif");
}
#headline h3 {
background: url("portal_blue-img/firefox_bg.gif") bottom left no-repeat;
/* height: 50px;*/
line-height: 50px;
/* vertical-align: middle;*/
color: darkblue;
margin: 0px;
padding-left: 60px;
overflow: hidden;
margin-left: 0px;
display: block;
}
.content h3#linux {
background: url("portal_blue-img/linux_bg.gif") bottom left no-repeat;
/* height: 50px;*/
line-height: 50px;
/* vertical-align: middle;*/
color: #666;
margin: 0px;
padding-left: 65px;
overflow: hidden;
display: block;
}
.content h3#aboutme {
background: url("portal_blue-img/dna_bg.gif") bottom left no-repeat;
/* height: 50px;*/
line-height: 50px;
/* vertical-align: middle;*/
color: #666;
margin: 0;
padding-left: 65px;
overflow: hidden;
display: block;
}
#footer {
clear: both;
display: block;
padding: 10px;
margin-top: 20px;
font-size: 90%;
border-top: 1px solid #ececec;
}
p.hack1 {
height: 5px;
margin-bottom: 0;
padding-bottom: 0;
}
p.hack2 {
height: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="left">
<div id="logo">Your Logo</div>
<div id="menu">
<ul>
<li><a id="top" href="#">Main Menu</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">photos</a></li>
<li><a href="#">Member</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About us</a></li>
<li><a id="bottom" href="#">Help</a></li>
</ul>
</div>
</div>
<div id="middle">
<div id="headline">
<h3>A Portal Blue Design</h3>
<div id="top-news">
<div class="entry1">
<div class="entry2">
<div class="entry3">
<div class="entry4">
<p class="hack1"></p>
<p id="linein">Sorry for my poor english. I link you can put some importent news and photo at here. If you use this theme on you blog, I think put your photo and something about you is a good idea. I make this theme on ubuntulinux and made by bluefish and vim editor. <br />
<br />
The template was tested in the usual, and looks good in all:</p>
<ul>
<li>Firefox 1.0.6</li>
<li>Internet Explorer 6.0</li>
<li>Netscape 8</li>
<li>Opera 8.5</li>
</ul>
<p class="hack2"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<h3 id="linux">Work On Ubuntu</h3>
<div class="entry">
<div class="entry1">
<div class="entry2">
<div class="entry3">
<div class="entry4">
<p class="hack1"></p>
<p>Ubuntu is a free, open source operating system that starts with the breadth of Debian and adds regular releases (every six months), a clear focus on the user and usability (it should "Just Work", TM) and a commitment to security updates with 18 months of support for every release. Ubuntu ships with the latest Gnome release as well as a selection of server and desktop software that makes for a comfortable desktop experience off a single installation CD.</p>
<p>What makes Ubuntu special? Why do people choose Ubuntu as their favourite OS for work and play?</p>
<p class="hack2"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<h3 id="aboutme">Somthing about me</h3>
<div class="entry">
<div class="entry1">
<div class="entry2">
<div class="entry3">
<div class="entry4">
<p class="hack1"></p>
<p>I'm a chinese boy, I live in ChongQing. My major is biotechnology in the college. I like Linux,BSD,music and ...</p>
<p>How to contact me?</p>
<p>Email: id.sonic@gmail.com<br />
MSN: id_sonic@yahoo.com</p>
<p class="hack2"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">Power by Bluefish and Gimp on ubuntulinux. </div>
</div>
<div id="right">
<div id="right-list-body">
<h4>My other Designs</h4>
<div id="design"> <a href="http://www.oswd.org/download.phtml/redcrazycss.zip?id=2230"><img src="portal_blue-img/1.png" alt="RedCrazyCSS v1" /><br />
RedCrazyCSS</a><br />
<br />
<a href="http://www.oswd.org/download.phtml/BabyBlog.zip?id=2308"><img class="imgs" src="portal_blue-img/2.png" alt="Baby Blog v1" /><br />
Baby Blog v1</a> </div>
</div>
<div id="right-list-bottom"></div>
</div>
</div>
</body>
</html>
Related examples in the same category