NavBar Too Long

[yankeeschick]

I am having issues with my nav bar. I can't figure out how to control the width, and it is too long (wide) at the moment. Here's a screenshot of what I'm talking about:

http://yankees-chick.com/tt/navbar.jpg

I don't want it to hang over the below search bar.

Here's the css:
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:600px;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;font-weight:bold;background:#fff url(http://yankees-chick.com/tt/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(http://yankees-chick.com/tt/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(http://yankees-chick.com/tt/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://yankees-chick.com/tt/dolphin_right-ON.gif) no-repeat top right;height:33px;}

and the html:
<div id="dolphincontainer" align="center">
<div id="dolphinnav">
<ul>
<li><a href="#" title="home" class="current"><span>Home</span></a></li>
<li><a href="#" title="products"><span>Products</span></a></li>
<li><a href="#" title="trade shows"><span>Trade Shows</span></a></li>
<li><a href="#" title="about us"><span>About Us</span></a></li>
<li><a href="#" title="news"><span>News</span></a></li>
<li><a href="#" title="contact us"><span>Contact Us</span></a></li>
</ul>
</div>



-------------
www.yankeeschick.com (http://yankeeschick.com)

[jcdevelopment]

how long is the search bar, you dont have that code up do you?

[Apostropartheid]

A URL would be best, and you've added hooks where you don't need them. It's quite unclean code, but you should give us the search bar too ^^

[yankeeschick]

Here's the info for my search bar:

.searchbar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 900px;
height: 58px;
border: 0px;
background-image: url(tt/searchbar.jpg);
vertical-align: middle;
align: center;
background-repeat: no-repeat;

}

<table class="searchbar"><tr><td class="black" align="center"><form action="">
<input type="text" name="search" size="65">
&nbsp;
<select name="region">
<option value="select">Select Country/Region</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="UK">UK</option>
<option value="China">China</option>
</select>
&nbsp;
<INPUT TYPE="IMAGE" SRC="tt/searchbutton_03.gif" ALT="Submit button">
</form></td></tr></table>
<table class="popularsearches" align="center"><tr><td><b>Popular Searches:</b></td></tr></table>
</div>

[jcdevelopment]

not sure, and maybe Cyan can shed light on it, but it looks like all of the padding thats being added is making the nav bar alot longer.

You may want to wrap both the nav and search bar with a div and a specified width that controlls it.

[yankeeschick]

Cyan - sorry if this is a dumb question (it probably is!) but what do you mean by unnecessary hooks? Thx!

[jcdevelopment]

Cyan - sorry if this is a dumb question (it probably is!) but what do you mean by unnecessary hooks? Thx!

From what i gather and see, you are adding unecassary properties to some of your Elements. A nav bar can be very basic for the look you are going for. I think you have added some things you dont need.

[yankeeschick]

I actually got the navbar code from a free site (13styles.com); I like the look and feel of it. While I'm good with HTML, I'm obviously not the best with CSS, but I'm learning as I go along. I just can't figure out which element is controlling the width of the bar :(

[jcdevelopment]

#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:600px;font-family:Helvetica,Arial,Verdana,sans-serif;}


That looks to be controlling it, but it looks over 600. not sure let me look into it!

[yankeeschick]

Thats what I assumed was controlling it, but when I alter it, nothing happens :(

[Donkey]

Shouldn't

background-image: url(tt/searchbar.jpg);
vertical-align: middle;
align: center;
background-repeat: no-repeat;

be

background-image: url('tt/searchbar.jpg');
background-repeat: no-repeat;
background-position: center center;

or shorthand

background: url('tt/searchbar.jpg') no-repeat center center;


With regard to the length of the search bar you've set it at 900px in your CSS. Could the problem be anything to do with the width of the background image searchbar.jpg? If it is wider than 900px?

[yankeeschick]

worst case scenario, I suppose I could always make the search bar wider to match the navbar...

[jcdevelopment]

^^ well wouldnt css stop that image from being longer then 600 though, even if the BG image is bigger? Not sure either though.

[yankeeschick]

Update: I solved the problem by making the search bar wider :) thank you for your help!