5 replies [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 51 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

I am trying to st my nav bar so that if one tab is removed, the rest of the tabs will just enlarge, and continue to take up the full nav bar width. How can I do that?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Where is markup?

Can't answer without seeing your code.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 51 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

HTML <div

HTML

<div id="topnav">
<ul>
<li><a href="<?php echo $siteurl; ?>myprofile" <?php if ($section == 'myprofile') { echo 'class="lion"' ; } ?>>My Profile</a></li>
<li><a href="<?php echo $siteurl; ?>teams" <?php if ($section == 'teams') { echo 'class="lion"' ; } ?>>Family Teams</a></li>
<li><a href="<?php echo $siteurl; ?>mt-tellafriend" <?php if ($section == 'fundraising') { echo 'class="lion"' ; } ?>>Fundraising</a></li>
<li><a href="<?php echo $siteurl; ?>mt-training" <?php if ($section == 'training') { echo 'class="lion"' ; } ?>>Training</a></li>
<li><a href="<?php echo $siteurl; ?>mt-recommit" <?php if ($section == 'recommitment') { echo 'class="lion"' ; } ?>>Recommitment</a></li>
<li><a href="<?php echo $siteurl; ?>forum" <?php if ($section == 'forum') { echo 'class="lion"' ; } ?>>Forum</a></li>
<li class="last"><a href="<?php echo $siteurl; ?>info" class="feedback">Send Us Feedback</a></li>
<div class="clear"></div>
</ul>
</div>

CSS

#pages.profile.letters #topnav{
	margin:-195px 0  0 -49px;
	width:1040px;
}
 
#pages.profile.letters #topnav li{
	display:inline;
	float:left;
	list-style-type:none;
	background:#2765ae;
	/*padding:50px 0px 50px 0px;*/
	padding:50px 25px;
	margin:0 1px 0 0;
	text-transform:uppercase;
	font-family: 'gothambook';
	/*width:100%;*/
	text-align:center;
}
 
#pages.profile.letters #topnav li.last{
	margin:0px;
	background:#000000;
	font-size:28px;
	font-family: 'bebasneue';
	padding:41px 16px 41px 16px;
	/*width:20.8%;*/
}
 
#pages.profile.letters #topnav li:hover{
	background:#ffc90d;
}
 
#pages.profile.letters #topnav li:hover a{
	color:#2765ae;
}
 
#pages.profile.letters #topnav li a{
	color:#FFFFFF;
	text-decoration:none;
}

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 51 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Anyone?

Anyone?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested

The div#topnav is redundant. Give that ID to the ul. The div.clear is used incorrectly, lose it.

Try this:

<ul id="topnav">
  <li><a href="">blah blah</a></li>
  ...
</ul>
==============
#topnav {
  display: table;
  width: 100%;
  }
 
#topnav li {
  display: table-cell;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 51 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Thank you! Thats what i was

Thank you! Thats what i was looking for.