Top tab menubar
<!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>
<meta name="author" content="Luka Cvrk (www.solucija.com)" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<style type='text/css'>
/* project: internet market
design: luka cvrk (www.solucija.com)
framework: Concept Nova (www.conceptnova.com) */
body {
padding: 0;
margin: 0;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
background: #F0F0F0;
color: #454545;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a,h2 a {
text-decoration: none;
}
h1 a:hover,h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
margin: 0 0 0px 0;
line-height: 1.5em;
}
form {
margin: 0;
}
input.search {
width: 199px;
border: none;
background: #FFF url(Solucija-images/input.gif);
padding: 4px;
color: #808080;
}
input.submit {
height: 24px;
font-weight: bold;
width: 53px;
border: none;
background: #D96855 url(Solucija-images/button.gif);
padding: 3px;
color: #FFF;
}
/* layout
------ */
.content {
margin: 10px auto;
width: 768px;
background: #FFF url(Solucija-images/big_middle.gif) repeat-y;
color: #454545;
}
.logo {
padding: 18px 0 0 3px;
}
/* header */
.header_top {
background: #FEFEFE url(Solucija-images/big_top.gif) no-repeat;
color: #FFF;
height: 15px;
}
.header {
padding: 0px 10px 0 10px;
}
.header_bottom {
clear: both;
background: #FEFEFE url(Solucija-images/big_bottom.gif) no-repeat;
color: #FFF;
height: 15px;
}
/* navigation */
#nav {
width: 100%;
float: left;
}
#nav ul {
margin: 0;
list-style: none;
padding: 0;
}
#nav a,#nav strong,#nav span {
float: left;
display: block;
color: #fff;
padding: 7px 20px 4px 10px;
background: #C43219 url(Solucija-images/nav.gif) no-repeat 100% 0px;
text-decoration: none;
font-weight: bold;
}
#nav a {
float: none;
}
#nav li {
float: left;
color: #FFF;
background: #C43219 url(Solucija-images/nav.gif) no-repeat 0px 0px;
margin: 0;
padding: 0 0 0 9px;
}
#nav #current {
background: #1995C2 url(Solucija-images/nav.gif) no-repeat 0 -41px;
color: #FFF;
}
#nav #current a {
background: #1995C2 url(Solucija-images/nav.gif) no-repeat 100% -41px;
padding: 7px 20px 4px 11px;
color: #FFF;
}
#nav a:hover {
color: #BFE1ED;
background: #C43219 url(Solucija-images/nav.gif) no-repeat 100% 0px;
}
.sf_left {
float: left;
width: 203px;
height: 77px;
background: #5BB2D1 url(Solucija-images/logobg.gif) repeat-x;
color: #FFF;
border-top: 1px solid #137DA2;
border-bottom: 1px solid #000;
padding: 10px 0 0px 7px;
}
.sf_right {
width: 537px;
float: right;
}
.sf_search {
clear: both;
background: #CA090D url(Solucija-images/searchbg.gif) repeat-x bottom
left;
color: #FFE4E0;
border-top: 1px solid #AA1717;
border-bottom: 1px solid #000;
padding: 18px 0 17px 15px;
margin-top: -2px;
}
.subheader {
padding: 8px;
background: #f0f0f0;
color: #808080;
}
/* left side
--------- */
.left {
float: left;
width: 595px;
margin: 0 0 10px 0;
}
.box_top {
background: #F0F0F0 url(Solucija-images/leftbox_top.gif) no-repeat;
color: #808080;
height: 40px;
width: 159px;
}
.box_top h2 {
color: #808080;
background: inherit;
padding: 7px 0 0 5px;
margin: 0;
}
.box {
border-left: 2px solid #F0F0F0;
border-right: 2px solid #F0F0F0;
padding: 0 4px 0 7px;
margin: 0;
width: 144px;
color: #595959;
background: #FFF;
}
.box_bottom {
background: #FFF url(Solucija-images/leftbox_bottom.gif) no-repeat;
color: #000;
height: 13px;
width: 160px;
margin: 0 0 7px 0;
}
/* left and central column */
.left_side {
float: left;
width: 159px;
padding: 0px 5px 8px 8px;
}
.right_side {
float: right;
width: 405px;
margin: 0 5px 0 0;
text-align: justify;
}
.article {
padding: 0 5px 0 0px;
margin-bottom: 20px;
}
.grey_top {
clear: both;
width: 382px;
background: #EDEDED url(Solucija-images/grey_top.gif) no-repeat;
color: #000;
height: 5px;
padding: 0;
margin: 0px 0 0 6px;
}
.grey {
width: 362px;
margin: 0 0 0 6px;
padding: 10px;
background: #EDEDED url(Solucija-images/grey_bottom.gif) no-repeat
bottom left;
color: #808080;
}
.grey a {
color: #C83C3C;
background: inherit;
font-weight: bold;
}
.grey a:hover {
color: #000;
background: #EDEDED;
}
.highlight {
padding: 5px 3px 5px 3px;
margin: 0 0 3px 0;
border-bottom: 1px solid #ccc;
}
/* right side
---------- */
.right {
float: right;
width: 170px;
margin: 0 0 10px 0;
}
img {
float: left;
margin: 0 9px 3px 0;
}
/* footer
------ */
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
</style>
<title>Internet Market</title>
</head>
<body>
<div class="content">
<div class="header_top"></div>
<div class="header">
<div class="sf_right">
<div id="nav">
<ul>
<li><a href="#">Market</a></li>
<li id="current"><a href="#">Offers</a></li>
<li><a href="#">Inquiry</a></li>
<li><a href="#">Job Ranking</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="sf_search">
<form method="post" action="?">
<p><b>Search:</b> <input type="text" name="search" class="search" /> <input type="submit" value="Go" class="submit" /> Explore the possibilities!</p>
</form>
</div>
</div>
<div class="sf_left">
<h1><a href="#">Internet Market</a></h1>
</div>
</div>
<div class="header_bottom"></div>
<div class="subheader">
<p><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy <a href="#">nibh euismod tincidunt ut laoreet</a> dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
</div>
<div class="header_top"></div>
<div class="left">
<div class="left_side">
<div class="box_top">
<h2>Fresh Advice:</h2>
</div>
<div class="box">
<p><b>Lorem ipsum</b> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="box_bottom"></div>
</div>
<div class="right_side">
<div class="article">
<h2>What's new?</h2>
<h3>FRESH NEWS FROM THE MARKET</h3>
<p><img src="images/question.gif" alt="Exclamation mark" />Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad <a href="#">minim</a> veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et <a href="#">accumsan</a> et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="article">
<h2>Forgotten things from the past</h2>
<h3>DON'T MAKE THE SAME MISTAKE TWICE</h3>
<p><img src="images/exclamation.gif" alt="Question mark" />Lorem ipsum <a href="#">dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <a href="#">quis nostrud</a> exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="grey_top"></div>
<div class="grey">
<p class="highlight"><a href="http://www.oswd.org/">What's your Market?</a> - Posted on 6/3/2006</p>
<p class="highlight"><a href="http://www.andreasviklund.com/">Getting to know your competitors</a> - Posted on 2/1/2005</p>
<p class="highlight"><a href="#">Show that you're there!</a> - Posted on 6/7/2005</p>
</div>
</div>
</div>
<div class="right">
<div class="box_top">
<h2>Fresh Articles:</h2>
</div>
<div class="box">
<p><b>Lorem ipsum</b> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="box_bottom"></div>
<div class="box_top">
<h2>Links:</h2>
</div>
<div class="box">
<p><a href="http://www.solucija.com/">Solucija</a><br />
<a href="http://snews.solucija.com/">sNews CMS</a><br />
<a href="http://www.conceptnova.com/">Concept Nova</a><br />
</p>
</div>
<div class="box_bottom"></div>
</div>
<div class="header_bottom"></div>
<div class="footer">
<p><a href="#">RSS Feed</a> | <a href="#">Contact</a> | <a href="#">Accessibility</a> | <a href="#">Products</a> | <a href="#">Disclaimer</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
© Copyright 2006 Internet Market, Design: Luka Cvrk - <a href="http://www.solucija.com/" title="What's your solution?">Solucija</a>
| <a href="http://www.cssportal.com/">CSS Portal</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category