How can I stretch the top navigation bar?

http://www.alistapart.com/articles/elastic/

Hi!

I read the article, but I would greatly appreciate some help with fixing my code.

Thank you in advance.

try removing the width and float attributes and use overflow:hidden

see this
http://www.webmasterworld.com/forum83/4764.htm

Hi Archajan!

I do not have a membership for webmasterworld.

Any other ideas?

Replace this style in your CSS:

.topnav {
      MARGIN-TOP: -10px;
      DISPLAY: block;
      PADDING-LEFT: 15px;
      BACKGROUND: url(../web/images/global_bar_bk_r1_c1.gif) no-repeat left top;
      MARGIN-BOTTOM: 5px;
      MARGIN-LEFT: 175px;
      HEIGHT: 44px
}

Hi lombardp:

I tried your suggestions, but it did not seem to change anything.

Here is what I have so far:

Any other ideas?

/* Beginning of Top Navigation Bar */
 
.topnav
{
     margin-top: -10px;
     float: left;
     display: block;
     padding-left: 15px;
     margin-left: 88px;
     margin-bottom: 5px;
     height: 44px;
     background: url("../web/images/global_bar_bk_r1_c1.gif") no-repeat top left;
}

ul.topmenu
{
    /*float: left; */  
     width: 518px;  /* smaller to keep the parent container showing the bar corner on the right*/
     margin: 0;
     padding: 0;
     list-style: none;
     height: 44px;
     background: url("../web/images/global_bar_bk_r1_c3.gif") no-repeat top right;
}

ul.topmenu li
{
     float: left;
     display: block;
}

ul.topmenu li a
{
     background: url("../web/images/global_bar_bk_r1_c2.gif") repeat-x top left;
     display: block;
     overflow: hidden;
     font: bold 12px verdana, sans-serif;
     color: #FFFFFF;
     padding: 14px 6px 14px 4px;
     border-right: 1px solid #016394;
     border-left: 1px solid #5FABE7;
     text-decoration:none;
}

ul.topmenu li a:hover
{
     text-decoration: none;
     color: #000000;
}

ul.topmenu li img
{
     /*float: left; */
       vertical-align: top;   /* float:left or this one */
}

Hi, TrueBlue.

Part of the problem is your topmenu hard-coded width of 518px. Following the example of the bottom navigation, it should instead be a percentage width - I tried 90% and it looked OK, so far as I can tell without your images. :-) For the sake of consistency, you should also switch the ends over: on the bottom nav, the DIV holds the right image and the UL holds the left image, and I recommend you do the same at the top.

This still leaves you with the problem of three images and only two places to put them. Again, you could do things in the same way as the bottom menu. There, the left image of the horizontal menu is actually placed as an image (inside a list item). This releases the UL itself to hold the general background image, and then the DIV holds the right image. Why don't you do the same here?

In your main file, you'd have

<DIV class=topnav>
<UL class=topmenu>
 <LI><IMG height=45 alt=""
              src="/web/images/global_bar_bk_r1_c1"
              width=38>
  <LI>
  <A
  title="Orlando Home Security Monitoring Orlando Business Security Monitoring Top Security Inc Central Florida"
  href="http://www.topsecurityinc.com/monitoring.htm">Security Monitoring</A>....

etc.

In your CSS file, you would then have:

.topnav
{
     float: left;
     display: block;
     margin-left: 88px;
     margin-top: -10px;
     margin-bottom: 5px;
     height: 44px;
     padding-left: 15px;
     background: url("../web/images/global_bar_bk_r1_c3.gif") no-repeat top right;
}

ul.topmenu
{
    /*float: left; */  
     width: 518px;  /* smaller to keep the parent container showing the bar corner on the right*/
     margin: 0;
     padding: 0;
     list-style: none;
     height: 44px;
     background: url("../web/images/global_bar_bk_r1_c2.gif") repeat-y;
}

Or of course, you could use the tables you've already got in the page to do your layout. ;-)

Cheers, hope this helps
Fenric!

Hi Fenric!

If you look at my page now with your suggestions the top navigation bar is stretched. :)

I guess I am missing something on the right image due to it is not being displayed.

Any ideas?

Thank you in advance.

Here is my modified CSS:

.topnav
{
     width: 99%;
     float: left;
     display: block;
     margin-left: 82px;
     margin-bottom: 10px;
     height: 42px;
     padding-left: 15px;
     background: url("../web/images/global_bar_bk_r1_c3.gif") no-repeat top right;
}

ul.topmenu
{
    /*float: left; */  
     width: 80%;  /* smaller to keep the parent container showing the bar corner on the right*/
     margin: 0;
     padding: 0;
     list-style: none;
     height: 42px;
     background: url("../web/images/global_bar_bk_r1_c2.gif") repeat-x;
}

ul.topmenu li
{
     float: left;
     display: block;
}

ul.topmenu li a
{
     background: url("../web/images/global_bar_bk_r1_c2.gif") repeat-x top left;
     display: block;
     overflow: hidden;
     font: bold 12px verdana, sans-serif;
     color: #FFFFFF;
     padding: 14px 6px 14px 4px;
     border-right: 1px solid #016394;
     border-left: 1px solid #5FABE7;
     text-decoration: none;
}

ul.topmenu li a:hover
{
     text-decoration: none;
     color: #000000;
}

ul.topmenu li img
{
     /*float: left; */
       vertical-align: top;   /* float:left or this one */
}

Hi!

I have made a couple of more changes.

Now FF shows the right image at far right edge of the screen and no image in between.
IE shows the bar and no right image.

Any ideas?

.topnav
{
     width: 90%;
     margin-left: 160px;
     margin-bottom: 10px;
     height: 42px;
     padding-left: 15px;
          min-width: 518px;  /* keeps the navigator on one line */
     background: url("../web/images/global_bar_bk_r1_c3.gif") no-repeat top right;
}

ul.topmenu
{
    /*float: left; */  
     width: 87%;  /* smaller to keep the parent container showing the bar corner on the right*/
     margin: 0;
     padding: 0;
     list-style: none;
     background: url("../web/images/global_bar_bk_r1_c2.gif") repeat-x top left;
}

ul.topmenu li
{  
     float: left;
     margin: 0;
     padding: 0;
     display: block;
       line-height: 42px!important;
}

ul.topmenu li a
{
     background: url("../web/images/global_bar_bk_r1_c2.gif") repeat-x top left;
     display: block;
     font: bold 12px verdana, sans-serif;
     color: #FFFFFF;
     padding: 14px 6px 14px 4px;
     border-right: 1px solid #016394;
     border-left: 1px solid #5FABE7;
     text-decoration: none;
          line-height: 14px; /* move buttons up-down */
}

ul.topmenu li a:hover
{
     text-decoration: none;
     color: #000000;
}

ul.topmenu li img
{
     /*float: left; */
       vertical-align: top;   /* float:left or this one */
}

Hi, TrueBlue.

It seems to work for me with the following CSS rules:

.topnav {
PADDING-LEFT: 15px; BACKGROUND: url(../Orlando_files/topright.jpg) no-repeat right top; MARGIN-BOTTOM: 10px; MARGIN-LEFT: 160px; HEIGHT: 42px; width:80%; min-width: 518px;  /* keeps the navigator on one line */
}
UL.topmenu {
display:block; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(../Orlando_files/top.gif) repeat-x top; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 99%; height:42px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; text-align:left;
}

The chief differences are these:

.topnav - I have width 80%. 90% pushes the edge off the screen.
UL.topmenu - I added a "display:block; removed the "left" from the repeat-x, and changed the width to 99% - this is a relative width, ie. 99% of the width of the containing DIV. I also specified the height and the text-align to be safe.

Why are you using a combination of Padding-left and margin-left to set the location of the DIV, rather than absolutely positioning it using LEFT:? Also, this mixture of relative and absolute lengths, as well as tables, makes the page very messy, and this doesn't help your cross-browser compatability.

See how you go with this.

Cheers
Fenric!

Hi Fenric!

I did not use absolute positioning because it does not seem to move the box down.
The bar floats above or below the box when using absolute positiong.

The only two things I see now is :

1) That in FF that there is no image connecting the buttons in the top bar and the right end image.
2) The left image is distorted (no round corners) in IE (not distorted in FF however).

Any ideas?

Thank you in advance.

Here is my new CSS per your suggestions:

.topnav
{
     width: 80%;
     margin-left: 160px;
     margin-bottom: 15px;
     height: 42px;
     padding-left: 15px;  
     min-width: 518px;  /* keeps the navigator on one line */
     background: url("../web/images/global_bar_bk_r1_c3.gif") no-repeat top right;
}

ul.topmenu
{
     display: block;
     width: 99%;  
     margin: 0;
     padding-right: 0;
     padding-left: 0;
     padding-bottom: 0;
     padding-top: 0;
     list-style-type: none;
     background: url("../web/images/global_bar_bk_r1_c2.gif") repeat-x top;
}

ul.topmenu li
{  
     float: left;
     margin: 0;
     padding: 0;
     display: block;
     line-height: 42px!important;
}

ul.topmenu li a
{
     background: url("../web/images/global_bar_bk_r1_c2.gif") repeat-x top left;
     display: block;
     font: bold 12px verdana, sans-serif;
     color: #FFFFFF;
     padding: 14px 6px 14px 4px;
     border-right: 1px solid #016394;
     border-left: 1px solid #5FABE7;
     text-decoration: none;
}

ul.topmenu li a:hover
{
     text-decoration: none;
     color: #000000;
}

ul.topmenu li img
{
     /*float: left; */
       vertical-align: top;   /* float:left or this one */
}

Hi Fenric!

Any chance if I added a separate question with 500 points you would be interested in created the jpg?

I know very little about creating images.

Thank you in advance.

P.S. Now the bar is working for FF :)

G'day, TrueBlue.

Creating the jpg took about 15 seconds, so this one's for free. :-) I don't think we're able to post binaries here, so you can download from http://www.dialogue.biz/ftp/topleft_rename.jpg - I'll leave it there 24 hours. Hopefully it will look OK on your background.

If you're going to be working with websites for any length of time, I recommend you find and familiarise yourself with an image editing program - you don't need anything as capable and complex (and expensive) as Photoshop, when there are cheaper alternatives such as Paintshop Pro, and free ones such as PhotoPlus or The Gimp. Basic tasks like creating buttons are dead simple. However, this may not be worth your time if you don't expect to be working with images more than once in a blue moon.

Thanks for the grade, and glad to be of service!

Cheers
Fenric!