chic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Chic</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
body {
background: #333 url("chic-images/back.gif") repeat;
text-align: center;
font: normal 11px/18px verdana, arial, tahoma, sans-serif;
color: #333;
padding-top: 40px;
}
a {
color: #666;
text-decoration: none;
}
a:visited {
text-decoration: underline;
}
a:hover {
color: #ccc;
}
#header {
width: 580px;
height: 210px;
background: #000 url("chic-images/header.jpg") no-repeat;
background-position: top right;
}
#wrapper {
width: 580px;
background: #fff url("chic-images/sidebar.gif") repeat-y;
background-position: 0 0;
border: solid 10px #fff;
margin: 0 auto;
text-align: left;
}
h1 {
width: 140px;
height: 30px;
background-color: #333;
margin: 1px 1px 1px 0;
float: left;
font: bold 16px/30px arial, verdana, tahoma, sans-serif;
padding-left: 10px;
color: #fff;
cursor: default;
}
h1:first-letter {
color: #f00;
text-decoration: underline;
}
h2 {
width: 419px;
height: 30px;
background-color: #333;
float: left;
font: bold 16px/30px arial, verdana, tahoma, sans-serif;
padding-left: 10px;
color: #fff;
margin-top: 1px;
cursor: default;
}
#nav {
list-style: none;
z-index: 2;
border-right: 1px solid #fff;
height: 210px;
width: 150px;
}
#nav li a {
color: #fff;
font: normal 11px/24px verdana, arial, tahoma, sans-serif;
display: block;
width: 140px;
height: 24px;
background-color: #000;
border-bottom: 1px solid #fff;
padding-left: 10px;
text-decoration: none;
}
#nav li a:hover {
background-color: #333;
}
#current a {
background-image: url("chic-images/bullet.gif");
background-repeat: no-repeat;
background-position: 100% 50%;
}
#sidebar {
width: 132px;
background-color: #ccc;
float: left;
position: relative;
left: -4px;
margin-left: -147px;
border-top: 1px solid #fff;
font: normal 10px/18px verdana, arial, tahoma, sans-serif;
padding: 8px;
}
img {
border: none;
}
a img {
display: block;
margin-bottom: 20px;
border: 1px solid #fff;
}
a:hover img {
border-color: #f00;
}
#content {
float: left;
width: 400px;
margin: 10px 0 0 10px;
}
p {
margin-bottom: 20px;
}
p:first-line {
font-weight: bold;
}
#footer {
clear: both;
width: 400px;
margin-left: 163px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li id="current"><a href="http://www.free-css.com/">home</a></li>
<li><a href="http://www.free-css.com/">link</a></li>
<li><a href="http://www.free-css.com/">link</a></li>
<li><a href="http://www.free-css.com/">link</a></li>
<li><a href="http://www.free-css.com/">link</a></li>
<li><a href="http://www.free-css.com/">link</a></li>
<li><a href="http://www.free-css.com/">link</a></li>
</ul>
</div>
<h1>CHIC</h1>
<h2>PUT YOUR TITLE HERE</h2>
<div id="sidebar"> <a href="http://www.free-css.com/"><img src="chic-images/image.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="chic-images/image.gif" alt="" /></a> You can put lots of interesting stuff in this side bar. Some suggested uses are: personal images, intro text, links to other sites, or leave it blank to give the layout some breathing room. </div>
<div id="content">
<p>Another layout so soon? I must be really bored :] Anyways, this one looks like it might do well as a business site. The first line of each paragraph will always be bolded (css magic), and the list item marked with id="current" tells the browser where to put the little arrow that shows where you are in the navigation scheme. Unfortunately, ie only does hovers on anchor tags, and not images, so all you explorer people will have to live without the neat hover effect on images, too bad ;] The picture on top comes from sxc.hu, feel free to replace it, but I think it adds to the mood, and as usual, the rest of the page will be filled with greeked passages. Enjoy.</p>
<p> Donec luctus nunc quis dui. Morbi placerat. Sed ut nunc. Aliquam erat volutpat.Donec ante est, congue nec, suscipit sagittis, rutrum a, metus. Vivamus vestibulum leo. Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. Curabitur magna purus, malesuada in, adipiscing eget, facilisis sed, nibh. In a ipsum id neque condimentum rhoncus. Fusce leo nisl, suscipit a, porta sed, nonummy id, neque. Quisque sed leo molestie arcu varius hendrerit. Donec eget erat. Fusce mattis elementum lorem.</p>
<p> Donec luctus nunc quis dui. Morbi placerat. Sed ut nunc. Aliquam erat volutpat.Donec ante est, congue nec, suscipit sagittis, rutrum a, metus. Vivamus vestibulum leo. Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. Curabitur magna purus, malesuada in, adipiscing eget, facilisis sed, nibh. In a ipsum id neque condimentum rhoncus. Fusce leo nisl, suscipit a, porta sed, nonummy id, neque. Quisque sed leo molestie arcu varius hendrerit. Donec eget erat. Fusce mattis elementum lorem.</p>
<p> Donec luctus nunc quis dui. Morbi placerat. Sed ut nunc. Aliquam erat volutpat.Donec ante est, congue nec, suscipit sagittis, rutrum a, metus. Vivamus vestibulum leo. Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. Curabitur magna purus, malesuada in, adipiscing eget, facilisis sed, nibh. In a ipsum id neque condimentum rhoncus. Fusce leo nisl, suscipit a, porta sed, nonummy id, neque. Quisque sed leo molestie arcu varius hendrerit. Donec eget erat. Fusce mattis elementum lorem.</p>
<p> Donec luctus nunc quis dui. Morbi placerat. Sed ut nunc. Aliquam erat volutpat.Donec ante est, congue nec, suscipit sagittis, rutrum a, metus. Vivamus vestibulum leo. Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. Curabitur magna purus, malesuada in, adipiscing eget, facilisis sed, nibh. In a ipsum id neque condimentum rhoncus. Fusce leo nisl, suscipit a, porta sed, nonummy id, neque. Quisque sed leo molestie arcu varius hendrerit. Donec eget erat. Fusce mattis elementum lorem.</p>
<p> Donec luctus nunc quis dui. Morbi placerat. Sed ut nunc. Aliquam erat volutpat.Donec ante est, congue nec, suscipit sagittis, rutrum a, metus. Vivamus vestibulum leo. Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. Curabitur magna purus, malesuada in, adipiscing eget, facilisis sed, nibh. In a ipsum id neque condimentum rhoncus. Fusce leo nisl, suscipit a, porta sed, nonummy id, neque. Quisque sed leo molestie arcu varius hendrerit. Donec eget erat. Fusce mattis elementum lorem.</p>
</div>
<div id="footer"><a href="http://www.free-css.com/">footer link</a> | <a href="http://www.free-css.com/">footer link</a></div>
</div>
</body>
</html>
Related examples in the same category