a_bit_modern_bigBlue
<!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=iso-8859-1" />
<title>a bit modern</title>
<!-- I linked to the stylesheet using two methods, the @import method as well as the link rel method, to ensure maximum accessibility -->
<style type="text/css" media="all">
<!--
@import url(styles.css);
-->
</style>
<style type='text/css'>
/* CSS version 2.0, by Boris Cherny. */
/*Many thanks to Andreas, NickyD, ditchCrawler, TomW, whowrotewhat, hash bar, and Sanden Cottongame */
* {
border: 0;
margin: 0;
padding: 0;
}
body {
background: #6183ad url(a_bit_modern_bigBlue-Images/background_big.gif) center repeat-y;
color: #616161;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 69%;
text-align: center;
}
a {
color: #6799b1;
text-decoration: underline;
}
a:hover {
color: #838f96;
text-decoration: none;
}
acronym {
border-bottom: 1px dashed #999999;
cursor: help;
}
h1 {
border-bottom: 1px solid #aec4de;
border-top: 1px solid #aec4de;
border-right: 20px solid #6183ad;
color: #6183ad;
font-size: 130%;
font-weight: normal;
margin: 5px 0;
background: #d7e5ef;
}
h1:hover {
border-bottom: 1px solid #7f9fc6;
border-top: 1px solid #7f9fc6;
background: #c9dcea;
}
input {
background: #385585;
margin: 2px 20px;
width: 140px;
}
#column2 ul {
margin: 10px 0;
}
#column2 li {
color: #999999;
list-style: square inside;
text-indent: 10px;
}
.login {
border: 1px solid #c9dcea;
color: #999;
}
.login_hover {
border: 1px solid #999;
color: #ccc;
}
#submit {
border: 1px solid #c9dcea;
color: #999;
cursor: pointer;
margin: 2px 20px;
text-decoration: none;
width: 140px;
text-align:center;
}
#submit_hover {
border: 1px solid #999;
color: #ccc;
cursor: pointer;
margin: 2px 20px;
text-decoration: none;
text-align:center;
}
/* The background-image's for the #wrap below are for preloading all the page's images, just add your own images to the pattern */
#wrap {
background-image: url(a_bit_modern_bigBlue-Images/arrow.gif);
background-image: url(a_bit_modern_bigBlue-Images/arrow_outline.gif);
background-image: url(a_bit_modern_bigBlue-Images/background.gif);
background-image: url(a_bit_modern_bigBlue-Images/camera1.gif);
background-image: url(a_bit_modern_bigBlue-Images/camera2.gif);
background-image: url(a_bit_modern_bigBlue-Images/camera3.gif);
background-image: url(a_bit_modern_bigBlue-Images/header_big.gif);
background-image: url(a_bit_modern_bigBlue-Images/selector.gif);
background-image: url(a_bit_modern_bigBlue-Images/selector_sub.gif);
background-repeat: no-repeat;
background-position: -5000px -5000px;
margin: 0 auto;
text-align: left;
width: 800px;
}
#header {
background: url(a_bit_modern_bigBlue-Images/header_big.gif) center no-repeat;
color: #e0e0e0;
font-size: 327%;
font-weight: bold;
height: 100px;
line-height: 120px;
text-indent: 150px;
}
#nav {
padding-bottom: 40px;
width: 179px;
}
/* leave the padding-bottom in the #nav if you want some space between the navigation and the photos in the left column */
#nav ul li {
display: inline;
line-height: 16px;
list-style: none;
}
#nav ul li a {
border-bottom: 1px solid #c9dcea;
color: #fff;
display: block;
padding: 5px;
text-decoration: none;
width: 169px;
}
/* remove the 'text-decoration: underline;' in #nav li a:hover if you don't want the links in the left nav menu to be underlined when the user hovers over them with their mouse */
#nav li a:hover {
background: #c9dcea url(a_bit_modern_bigBlue-Images/selector.gif) center right no-repeat;
color: #000;
}
/* the following 3 rules are for the submenu, if you removed the submenu remove these rules as well */
#nav ul ul li {
line-height: 10px;
border-bottom: none;
}
#nav ul ul li a {
color: #d7e5ef;
text-indent: 10px;
}
#nav ul ul li a:hover {
color: #000;
background-image: url(a_bit_modern_bigBlue-Images/selector_sub.gif);
}
#column1 {
float: left;
width: 180px;
}
#column1 img {
border: 1px solid #c9dcea;
margin: 5px 20px;
padding: 10px 20px;
}
/* in the tag below, #column2, I used the Underscore Hack to give the column2 div the correct margins in Firefox 1 */
#column2 {
float: none !important;
float: right;
margin-left: 192px !important;
margin-left: 0;
padding: 12px 40px 30px 9px;
}
#column2 p {
line-height: 190%;
}
#links div {
float: left;
width: 140px;
}
#links div li {
list-style: none;
}
#links div li a {
background: url(a_bit_modern_bigBlue-Images/arrow_outline.gif) left no-repeat;
padding-left: 15px;
text-decoration: none;
}
#links div li a:hover {
background-image: url(a_bit_modern_bigBlue-Images/arrow.gif);
color: #ac835c;
text-decoration: underline;
}
#footer {
clear: both;
color: #999;
font-size: 9px;
padding: 30px 0 10px 0;
text-indent: 185px;
}
#footer a {
color: #999999;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrap">
<!-- start of container -->
<div id="header">a bit modern - bigBlue</div>
<div id="content">
<!-- left column, contains navigation and photos -->
<div id="column1">
<div id="nav">
<ul>
<li><a href="#" accesskey="a">About Us</a></li>
<li>
<ul>
<li><a href="#" accesskey="1">A submenu</a></li>
<li><a href="#" accesskey="2">A submenu item</a></li>
<li><a href="#" accesskey="3">Another item</a></li>
</ul>
</li>
<li><a href="#" accesskey="p">Portfolio</a></li>
<li><a href="#" accesskey="h">History</a></li>
<li><a href="#" accesskey="r">Resources</a></li>
</ul>
</div>
<img src="a_bit_modern_bigBlue-Images/camera1.gif" alt="" width="100" height="60"/> <img src="a_bit_modern_bigBlue-Images/camera2.gif" alt="" /> <img src="a_bit_modern_bigBlue-Images/camera3.gif" alt="" />
<form action="#">
<input type="text" class="login" value="username" onfocus="this.value=''" onmouseover="this.className='login_hover'" onmouseout="this.className='login'" />
<input type="password" class="login" onfocus="this.value=''" onmouseover="this.className='login_hover'" onmouseout="this.className='login'" />
<div id="submit" onmouseover="this.id='submit_hover'" onmouseout="this.id='submit'" onclick="location.href='#'">log
in</div>
</form>
</div>
<!-- end of left column -->
<!-- right column, this is the main content area, and where the links are -->
<div id="column2">
<h1>The modified version by Petros (Text by Petros)</h1>
<p>I liked the design which Boris made! But for my needs it was to narrow, so I
made the main part 200 pixel bigger. And the other thig was the colour scheme. I like blue
very much, so I changed the colour scheme into blue.
That's all from my side.</p>
<h1>The Original Design by Boris (Text by Boris)</h1>
<p>This design I tried to make very minimalistic, yet I wanted it to have
some advanced design features, so there you go: Advanced CSS navigation,
a sophisticated yet beautiful layout, a pleasing color scheme, and all
without a single table. This design is created with standards-compliant <acronym title="Extensible Hypertext Markup Language">XHTML</acronym> 1.0
Transitional and <acronym title="Cascading Style Sheets">CSS</acronym>.
The images you find on this page are either created by me or taken from <a href="http://www.sxc.hu">the
stock xchng</a>. The navigation is inspired by <a href="http://torchbox.com/">Torchbox</a>,
and the site that first opened me up to the low-sat brown color scheme
was <a href="http://www.aqualung.net">Aqualung.net</a>. Design tested
in Internet Explorer 6, Firefox 1, Opera 8, and K-Meleon 0.9. You can
use this template with no restrictions: sell it, reskin & resubmit
it, claim it as your own, etc. Feel free to contact me at <a href="mailto:bcherny@gmail.com">bcherny
at gmail dot com</a> with any questions or comments.</p>
<h1>The Artists</h1>
<p>
<b>Petros</b><br />
I am a Software Developer specified in developing Web-Based Applications.
<br />
<b>Boris:</b><br />My name is Boris Cherny and I'm a freelance web designer, as well as
a huge fan of the open-source design community. I've submitted many designs
to <a href="http://www.oswd.org">OSWD.org</a>, and I believe that each
design I submit is better than the last. I constantly reform my style,
and learn to be a better coder through experience and inspiration.</p>
<h1>Version Two</h1>
<p>After a few complaints and many bugs, here is version 2 of A Bit Modern.
Updates include:</p>
<ul>
<li>Menu Items can now be added or removed without damaging the layout</li>
<li>The footer no longer appears in the center of the screen in Firefox</li>
<li>There is a login area in the left column</li>
<li>I added comments to the code for the sake of readability and useability</li>
<li>All images are now preloaded, using CSS and NO Javascript</li>
</ul>
<p>I really want to thank Andreas, NickyD, ditchCrawler, TomW, whowrotewhat,
hash bar, Sanden Cottongame, Nish Vamadevan, and Astor, they're the ones
who pointed out bugs and helped me fix them :). I'd like to give a bit
more credit to Andreas for allowing me to pester him with coding questions,
and for answering all those questions with knowledge and expertise.</p>
<h1>Some Links</h1>
<div id="links">
<div>
<ul>
<li><a href="http://www.hicksdesign.co.uk/">hicksdesign</a></li>
<li><a href="http://www.im-visions.com/start/">Intuitivmedia</a></li>
<li><a href="http://www.jeremy-fields.com/">Jeremy Fields</a></li>
<li><a href="http://solardreamstudios.com/">solarDreamStudios</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="http://www.stopdesign.com/">Stopdesign</a></li>
<li><a href="http://www.studiotwentyeight.com/">StudioTwentyEight</a></li>
<li><a href="http://www.t26.com/fonts.php">T.26</a></li>
<li><a href="http://torchbox.com/">torchbox</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- end of right column -->
<!-- remove my name from the footer if you want, this is open source ;) -->
<div id="footer">
Original design by <a href="http://www.bcdesignplace.com">Boris Cherny</a>. (c) 2005 your corporation.
Modified version by <a href="http://www.peman.de">Petros Dolaschjan </a>
</div>
<!-- end of container -->
</div>
</body>
</html>
Related examples in the same category