nebuladog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Nebula Dog</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"/>
<style type='text/css'>
/* ------------
Design: Nebula Dog 1.0
Date: 2007-05-19
Author: Lukasz Sobek
URL: http://lukasz.sobek.pl
------------ */
/* ------------
global things
------------ */
* {
margin: 0;
padding: 0;
}
body {
background: #333 url(nebuladog-img/bg.gif) repeat-x fixed left bottom;
color: #666;
margin: 25px 0px;
text-align: center;
font: normal 1em sans-serif,Arial;
}
/* ------------
main wrapping container
------------ */
#container {
border: 1px solid #111;
margin: 20px auto 4px auto;
text-align: left;
width: 700px;
background-color: #000;
}
/* ------------
header-graphics part
------------ */
.header-{
background: #000 url(nebuladog-img/darkside.jpg) no-repeat;
height: 266px;
}
.header-h1 {
color: #ccc;
font: normal 2em Tahoma,sans-serif;
padding: 0px 25px;
}
/* ------------
content part
------------ */
.entry {
background: #fff url(nebuladog-img/bg_item.gif) repeat-x;
padding: 8px 10px;
border-left: 5px solid #900;
}
.entry p {
margin: 0px 10px 10px 10px;
text-align: justify;
line-height: 150%;
padding-right: 10px;
}
.entry h1 {
margin: 30px 10px 10px;
font: bold 1.1em sans-serif,Arial;
color: #666;
}
.entry h2 {
margin: 20px 10px 10px;
font: bold 1.1em sans-serif,Arial;
color: #c00;
}
.entry a {
color: #444;
text-decoration: none;
border-bottom: 1px solid #ccc;
}
.entry a:hover {
color: #c00;
text-decoration: none;
border-bottom: 1px solid #666;
}
/* ------------
right menu part
------------ */
#menu {
float: right;
padding:0px;
margin-left: 20px;
width: 200px;
background-color: #999;
color: #000;
}
* html #menu {
margin-left: 10px;
}
#menu p {
margin: 5px 10px 10px 10px;
line-height: 150%;
font: normal 0.7em "Lucida Sans Unicode",serif;
text-align: justify;
}
/* ------------
right menu part links
------------ */
.menu_list {
list-style-type: none;
margin: 0px;
padding: 0px;
}
* html #menu li{
margin-bottom:-3px;
}
#menu li {
margin:0px;
border-bottom:1px solid #000;
font-size: 1em;
text-decoration: none;
padding:0px;
width:200px;
}
#menu li a {
display: block;
color: #ccc;
font-size: 1em;
text-decoration: none;
border-left:5px solid #900;
border-bottom: none;
padding:5px;
background: #000 url(nebuladog-img/bg_menu_grey.gif) bottom center repeat-x;
}
#menu li a:hover {
text-decoration: none;
border-left:5px solid #666;
color: #fff;
border-bottom: none;
background: #000 url(nebuladog-img/bg_menu.gif) bottom center repeat-x;
}
/* ------------
footer information part
------------ */
#footer {
padding: 5px;
text-align: right;
color: #666;
font-size: 0.8em;
background: #000 url(nebuladog-img/bg_menu_grey.gif) bottom center repeat-x;
}
/* ------------
other
------------ */
#menu a,#footer a {
color: #666;
text-decoration: none;
border-bottom: 1px solid #900;
}
#menu a:hover,#footer a:hover {
color: #eee;
text-decoration: none;
border-bottom: 1px solid #f00;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul class="menu_list">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Item #4</a></li>
<li><a href="http://www.free-css.com/">Item #5</a></li>
<li><a href="http://www.free-css.com/">Item #6</a></li>
<li><a href="http://www.free-css.com/">Item #7</a></li>
<li><a href="http://www.free-css.com/">Item #8</a></li>
<li><a href="http://www.free-css.com/">Item #9</a></li>
<li><a href="http://www.free-css.com/">Item #10</a></li>
</ul>
<img src="nebuladog-img/cest.jpg" alt="" /><br />
<p>J.V-ce World Winner, J.Ch.PL, J.Ch.DE, Ch.PL Dark Side Tak Wiele Milosci</p>
</div>
<div class="header">
<h1>Nebula Dog</h1>
</div>
<div class="entry">
<h1>Your sub header</h1>
<h2>Your main header</h2>
<p>This Design was actually supposed to be applied to the page of our Staffordshire Bull Terrier Dark Side. However, it turned out that we were heading towards registering a kennel and the theme would not fit its name. The full name of our staffy is "DARK SIDE Tak Wiele Milosci" with "Tak Wiele Milosci" meaning <i>so much love</i>. That was the reason for the heart and the nebula and the starship look.</p>
<p>The Design features a fixed 2 column layout. In this example the content part is about 500px and the sidebar 200px wide. You can change these without having the layout suffer. Another interesting point is that as the sidebar expands the text wraps around it - which you can see in this example. The Design also allows multiple seperated entries in the content part.</p>
</div>
<div class="entry">
<h1>Another sub header</h1>
<h2>Another main header</h2>
<p>Changing the width of the "main" div should also allow you to add a 3rd column to the Design whether on the left or right side. The photo added on the menu bar just serves as example of what you can do with the sidebar.</p>
<p>Have fun with the Design and please remember to leave the credits intact and change the "yoursite" to the actual name of your site. This Design is valid XHTML 1.0 Strict and CSS.</p>
</div>
<div id="footer">© 2007<a href="http://www.free-css.com/">yoursite</a>. Design by <a href="http://lukasz.sobek.pl">Lukasz Sobek</a></div>
</div>
</body>
</html>
Related examples in the same category