Single column layout with top menu bar : Menu « CSS Controls « HTML / CSS

HTML / CSS » CSS Controls » Menu 
Single column layout with top menu bar
  
<!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" lang="en">

<!-- this template was designed by http://www.tristarwebdesign.co.uk - please visit for more templates & information - thank you. -->

<head>

<meta http-equiv="Content-Language" content="en-gb" />

<title>enter page title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
body
{
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
  font-family: arial, helvetica, verdana, tahoma, sans-serif;
  font-size: 80%;
  color: #000;
  background-color: #EEEEEE;
  line-height: 180%;
}

a
{
  color: #4B6400;
  text-decoration: none;
}

a:hover
{
  color: #000000;
  text-decoration: none;
}

#headercontainer
{
  width: 100%;
  background: #242424;
}

#header
{
  margin: auto;
  width: 760px;
  height: 125px;
  border: 1px solid #6F6F6F;
  border-top: 0px;
  border-bottom: 0px;
  background: #242424 url('tri-star-images/header-background.jpg');
}

#header h1
{
  margin: 0;
  color: #EEEEEE;
  font-family: helvetica, arial, verdana, tahoma, sans-serif;
  font-size: 275%;
  padding-left: 10px;
  letter-spacing: -3px;
  padding-top: 50px;
}

#menucontainer
{
  width: 100%;
  height: 28px;
  background: #A0C80E;
  background-image:url('tri-star-images/menu-background.jpg');
  background-repeat:repeat-x;
}

#menu
{
  margin: auto;
  width: 760px;
  background: #A0C80E;
  border-right: 1px solid #95BC0E;
}

#content
{
  margin: auto;
  width: 740px;
  padding: 20px 10px;
  border: 1px solid #B5B5B5;
  border-top: 0px;
  border-bottom: 0px;
  background: #FFF;
  
}

#content h2
{
  color: #666;
  padding-bottom: 3px;
  border-bottom: 1px solid #A0C80E;
  font-family: helvetica, arial, verdana, tahoma, sans-serif;
  font-size: 200%;
  letter-spacing: -1px;
}

#footer
{
  margin: auto;
  width: 740px;
  text-align: right;
  color: #FFFFFF;
  letter-spacing: 2px;
  background: #A0C80E url('tri-star-images/menu-background.jpg') repeat-x;
  border: 1px solid #A0C80E;
  font-family: helvetica, arial, verdana, tahoma, sans-serif; 
  padding: 3px 10px;
}
#navcontainer ul
{
  padding: 0;
  margin: 0;
  background-image:url('tri-star-images/menu-background.jpg');
  background-repeat:repeat-x;
  color:#FFFFFF; 
  float:left; 
  width:100%;
  border-left: 1px solid #95BC0E;
  letter-spacing: 1px;
}

#navcontainer ul li
{
  display: inline;
}

#navcontainer ul li a
{
  padding: 0.2em 1.5em;
  background-image:url('tri-star-images/menu-background.jpg');
  background-repeat:repeat-x;
  color: #FFF;
  text-decoration: none;
  float: left;
  border-right: 1px solid #95BC0E;
}

#navcontainer ul li a:hover
{
  background-image:url('tri-star-images/menu-hover.jpg');
  background-repeat:repeat-x;
  color: #485B06;
}
</style>



</head>

<body>

<div id="headercontainer">
  <div id="header">
    <h1>website.name.here.</h1>
  </div>
</div>

<div id="menucontainer">
  <div id="menu">
    <div id="navcontainer">
      <ul id="navlist">
        <li><a title="link one" href="index.html">link one</a></li>
        <li><a title="link two" href="index.html">link two</a></li>
        <li><a title="link three" href="index.html">link three</a></li>
        <li><a title="link four" href="index.html">link four</a></li>
        <li><a title="link five" href="index.html">link five</a></li>
      </ul>
    </div>
  </div>
</div>

<div id="content">
  <b>no tables have been used to make this template, its all valid css and 
  valid xhtml.</b>
  
  <h2>header.one.</h2>
  
  <p>this site has been created for personal use only - please do not sell on this 
  template it has been created by
  <a title="derby web design" href="http://www.tristarwebdesign.co.uk">tri-star 
  web design</a> free of charge.</p>
  <p><b>please note:</b> as this is a free template the only thing i ask in return 
  is you leave the bottom link to
  <a title="derby web design" href="http://www.tristarwebdesign.co.uk">tri-star 
  web design</a> as it is, anything else you can chop and change to your hearts 
  content. thank you for downloading this template, i hope it comes in handy.</p>
  <p>this page is created with frontpage but you can edit it with dreamweaver - <b>it 
  utilises CSS and is vaild XHTML STRICT 1.0. it has also been tested in microsoft 
  explorer, mozilla firefox, netscape 8.0 and opera</b> - fingers crossed everything 
  looks ok! if this is not enough it also works in 800x600 screen resolution, 
  but is mainly for 1024x768.</p>
  
  <h2>header.two.</h2>
  
  <p>tri-star web design is devoted to helping you/your company maximise its 
  potential through the internet. are you after web presence at an affordable 
  price? is your current website not generating the interest you think it 
  deserves? tri-star web design can design or help in the development of a new 
  website, giving potential customers a true impression of your business. as i am 
  a freelance web designer i can focus my full attention on each customer to 
  giving that personal touch that i believe is so important.</p>
  
  <h2>header.three.</h2>
  
  <p>i work with clients in the derby (derbyshire), nottingham (nottinghamshire)
  leicester (leicestershireand throughout the united kingdom. if you are from 
  outside the uk please feel free to get in touch for a quote as i am more than 
  happy to expand my services beyond the uk.for a one-off fee with no hidden 
  charges, i can design you a website to your exact specifications. just tell me 
  what you want to say to your customers, send any pictures you would like to show 
  them, and i will turn this basic information into a sleek professional yet 
  effective website.</p>
  
  <p>i don&#39;t only deal with businesses, maybe your after a website for a hobby? or 
  a family website? whatever it is you are after i can help you.</p>
</div>

<div id="footer">
  web design by <a title="derby web design" href="http://www.tristarwebdesign.co.uk">tri-star web design</a>
  | <a href="http://www.ehostinfo.com/">Web Hosting</a>
</div>

</body>

</html>

   
    
  
Related examples in the same category
1.Use show or hide UL with link
2.Horizontal menu
3.CSS only menu with mouse over
4.Left bar menu
5.Menu bar with highlight
6.Menu with highlight
7.fixed width floated menu
8.Mouse hover left bar
9.Left navigation bar
10.Use UL and LI to wrap link menu
11.Tab Menu
12.Left bar menu list
13.Top tab menu bar
14.Navigation menu on the top
15.Wide and tall menu
16.Shading menu bar
17.Top menu bar with arrow icon
18.3D top bar background
19.Left menu bar aligned to the bottom
20.Indented vertical menu
21.Two-level left menu bar
22.Right section bar with shading menu
23.Right menu bar with image background
24.Right menu bar with section
25.Top menu bar
26.Using top arrow to indicate top menu selection
27.Wide and tall top menu bar
28.List menu bar with background image
29.Two level menu bar
30.Top menu with arrow indication
31.Two column, two leve top menu bar
32.List menu with image
33.Menu List item
34.List menu bar
35.Top menu list bar with bold bottom
36.Side menu bar
37.Scrollable section in side menu bar
38.Selected menu item indication
39.Card layout with top menu bar
40.Side menu bar with lot of space in between
41.HTML skeleton code for creating a two-level horizontal drop menu
42.using jQuery to toggle a hidden menu
43.Vertical menu
44.Horizontal menu bar
45.Vertical menu bar
46.sliding door menu
47.horizontal list menu
48.Sub navigation menu
49.Pure css menu
50.Two column layout with menu on the left
51.Navigation menu horizontal
52.Pure CSS drop-down menu
53.Menu item with border
54.Vertical menu on the left
55.LI menu
56.Mouse hover effect for left menu
57.Post item layout with menu
58.Left menu bar with mouse hover effect
59.a:hover background: transparent url(img/menu_arrow.gif) bottom center no-repeat;
60.Menu item with border 2
61.Link menu
62.Left menu bar with thicker border
63.Change border and background with mouse hover for left menu bar
64.Nested left menu bar
65.Vertical menu bar 2
66.Fixed left menu bar
67.Dark background for menu bar
68.Link menu item with side bar
69.Tag like top menu bar
70.Two line top menu bar
71.Menu item separated with border
72.Using arrow image to indicate current menu selection
73.Two level top menu bar
74.Tab menu bar with mouse hover effect
75.Menu bar with background image
76.Two level side menu bar
77.Left bar with news item
78.Continue read link
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.