4 Replies - 1149 Views - Last Post: 18 May 2011 - 10:20 AM

#1 D.Mulroy   User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Having trouble sizing nav bar

Posted 17 May 2011 - 04:51 PM

I'm having trouble getting my nav bar to stretch the wholeway across the div.

The links are block elements filling each <li> the <li> and <a> tags have no margins or padding on them. There are a total of five links in a wrapper with a set width of 960. There will be 4 borders each 1px wide. (960-4)/5 = 191.2. My dilema is that 191px is not wide enough leaving that small gap and 192 cause the contact link to float beneath the home link

Picture of the problem:


Posted Image
Posted Image

CSS:
#navBar {
	clear: both;
	width: 100%;
	height: 45px;
}
#navBar ul {
	list-style: none;
	padding-left: none;
	margin-left: none;
}
#navBar ul li {
	display: inline;
	float: left;
}
#navBar ul a {
	display: block;
	width: 191px;
	height: 44px;
	background-color: #d34b4b;
	color: #fff;
	border-right: 1px solid #fff;
	font-size: 2.4em;
	line-height: 44px;
	text-decoration: none;
	text-align: center;
	zoom: 1; /*IE6 Hack*/
}
#navBar ul a:hover {
	color: #fca5a5;
	background: #a72d2d;
}
#navBar ul li a.lastLink {
	border-right: none;
}




Html
            <!--Open navBar/-->
            <div id="navBar">
            	<ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Floral Design</a></li>
                    <li><a href="#">Party Planning</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#" class="lastLink">Contact</a></li>
                </ul>
            </div>
            <!--Close navBar/-->



edit: changed the lastLink class. Was being over written due to specificity but the problem still persists

This post has been edited by D.Mulroy: 17 May 2011 - 06:18 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Having trouble sizing nav bar

#2 D.Mulroy   User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: Having trouble sizing nav bar

Posted 17 May 2011 - 06:27 PM

EDIT: My fix didn't work

This post has been edited by D.Mulroy: 18 May 2011 - 10:12 AM

Was This Post Helpful? 0
  • +
  • -

#3 chinchang   User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 727
  • Joined: 22-December 08

Re: Having trouble sizing nav bar

Posted 18 May 2011 - 12:25 AM

oops..wrong post.

This post has been edited by chinchang: 18 May 2011 - 12:26 AM

Was This Post Helpful? 0
  • +
  • -

#4 D.Mulroy   User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: Having trouble sizing nav bar

Posted 18 May 2011 - 10:12 AM

Officially fixed it: made each a tag 192px wide and added a 1px by 44px line as a background image to each link except the last one.

This post has been edited by D.Mulroy: 18 May 2011 - 10:31 AM

Was This Post Helpful? 0
  • +
  • -

#5 souptoy   User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Having trouble sizing nav bar

Posted 18 May 2011 - 10:20 AM

Looking at that lastLink border, have you tried to set the border-right color to the same as that gray border?

Nevermind...that won't work...just zoomed in and read your calculations.

This post has been edited by souptoy: 18 May 2011 - 10:30 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1