PDA

View Full Version : Navigation menu... ugh!!!



strawberrykoi
Mar 24th, 2010, 06:14 AM
Hello!

I am playing with CSS and navigation menus... boy, is it hard! I have two examples to share... I am trying to get my menu to look like this one:

http://www.freewebs.com/chaoswinds/thomlennonphotography/info.html

And this is what I have so far:
http://www.freewebs.com/chaoswinds/thomlennonphotography/test.html

Does anyone have any ideas on what I can do/change?

Thanks so much (in advace!)

DJCMBear
Mar 24th, 2010, 07:06 AM
Here You go the html code and search box image as attachment below:


<!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" xml:lang="en-gb" lang="en-gb" >
<head>
<title>Untitled Document</title>
<style type="text/css" media="screen">
body {
color:#B4B4B4;
font-size:0.70em;
font-family: verdana, Arial, sans-serif;
height:100%;
text-align:center; /* Zentrierung IE5+*/
background:#000 ;
}
html, body, form, fieldset {
margin: 0;
padding: 0;
}
.width{
width:920px;
}
.clr{ /* BASIC CLEAR FIX*/
clear:both;
}
div.clear{ /* Special Div for Firefox for background height fix*/
clear: both;
height: 0px;
margin: 0px;
padding: 0px;
font-size: 0;
}
#nav_outer{
position:relative;
margin:0 auto;
width:100%;
background: #222;
height:32px;
border-top:1px solid #333;
z-index:2;
}
#topmenu_outer{
position:relative;
margin:0 auto;
width:100%;
background:#222;
border-bottom:1px solid #333;
}
#topmenu_inner{
margin:0 auto;
padding:4px 0 4px 0;
}
#topmenu{
float:right;
padding:4px 0;
}
#search{
margin-top:2px;
padding:1px 0;
float:left;
background:url(search_bg.gif) no-repeat left;
}
#search .inputbox{
border:none;
color:#999;
font-size:100%;
background:none;
margin-right:20px;
padding-left:24px;
}
#search h3{
display:none}
/* TOPMENU
--------------------------------------------------------- */
#topmenu h3
{
display:none;
}
#topmenu #mainlevel-nav
{
list-style:none;
white-space:nowrap;
font-size:11px;
margin:0;
padding:0;
}
#topmenu #mainlevel-nav li
{
width:auto!important;
float:left;
white-space:nowrap;
font-size:11px;
margin:0 3px 0 0;
}
#topmenu #mainlevel-nav li a
{
color:#B4B4B4;
display:block;
padding-left:8px;
padding-right:8px;
text-decoration:none;
white-space:nowrap;
font-size:11px;
border-left:1px solid #666;
}
#topmenu #mainlevel-nav li a:hover
{
display:block;
padding-left:8px;
padding-right:8px;
white-space:nowrap;
text-decoration:none;
color:#999;
font-size:11px;
}
/* End Topmenu section */
#top_outer{
position:relative;
margin:0 auto;
width:100%;
background:url(images/header_bg.gif) repeat;
}
#top_inner{
position:relative;
margin:0 auto;
padding-top:20px;
padding-bottom:20px;
}
#logo{
float:left;
}
#banner{
float:right;
margin-top:20px;
}
/* End Top section */
</style>
</head>
<body>
<div id="topmenu_outer">
<div id="topmenu_inner" class="width">
<div id="search">
<form action="#" method="post">
<div class="search">
<input name="searchword" id="mod_search_searchword" maxlength="20" alt="Search" class="inputbox" type="text"
size="20" value="search..." onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...')
this.value='';" />
</div>
<input type="hidden" name="task" value="search" />
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="Itemid" value=1 />
</form>
</div>
<div id="topmenu">
<div class="module">
<ul id="mainlevel-nav">
<li><a href="#" class="mainlevel-nav">INFO</a></li>
<li><a href="#" class="mainlevel-nav">GALLERY</a></li>
<li><a href="#" class="mainlevel-nav">PRICES</a></li>
<li><a href="#" class="mainlevel-nav">BLOG</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!--END TOPMENU -->
</body>
</html>