[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 346
  • Last Modified:

How can I stretch the top navigation bar?

Hi!

How can I stretch the top navigation bar to the far right corner of the main box like the bottom navigation bar does?
It needs to be able to automatically resize like the main box and bottom navigation bar as well.

Here is the link to the page: http://www.topsecurityinc.com

Here is my CSS so far:

/* Beginning of Top Navigation Bar */

.topnav
{
     margin-left: 175px;
     margin-top: -10px;
     margin-bottom: 5px;
     width: 99%;
          height: 44px;
     padding-left: 15px;
     background: url("../web/images/global_bar_bk_r1_c1.gif") no-repeat top left;
}

.topnav img
{
     float:left;
}

ul.topmenu
{
     margin:0;
     padding:0;
     list-style:none;
     height: 44px;
     width: 518px;
     background: url("../web/images/global_bar_bk_r1_c3.gif") no-repeat top right;
}

ul.topmenu li
{
     display: inline;
}

ul.topmenu li a
{
     background: url("../web/images/global_bar_bk_r1_c2.gif") repeat top left;
     float: left;
     font: bold 12px verdana, sans-serif;
     color: #000000;
     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:#ffffff;
}
0
TrueBlue
Asked:
TrueBlue
  • 7
  • 4
  • 3
  • +1
1 Solution
 
TrueBlueAuthor Commented:
Hi!

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

Thank you in advance.
0
 
archrajanCommented:
try removing the width and float attributes and use overflow:hidden
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
archrajanCommented:
0
 
TrueBlueAuthor Commented:
Hi Archajan!

I do not have a membership for webmasterworld.

Any other ideas?
0
 
lombardpCommented:
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
}
0
 
TrueBlueAuthor Commented:
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 */
}


0
 
FenricCommented:
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!
0
 
TrueBlueAuthor Commented:
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 */
}
0
 
TrueBlueAuthor Commented:
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 */
}

0
 
FenricCommented:
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!
0
 
TrueBlueAuthor Commented:
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 */
}
0
 
FenricCommented:
Hmm, that's odd.

The second issue is simple: create your left-hand image as a JPG rather than a GIF. The DIV has the 'centre' image all the way to the left and right edges, and the gif is allowing the underlying image to show through. So replace the gif with a JPG with the cut-out corners being your grey texture, and whilst it won't match exactly it shouldn't be too far off.

As for the first issue, I suspect it's because you've not included the height:42px in the UL.topmenu rule. Have you tried adding this? See if it does the trick.

Cheers
Fenric!
0
 
TrueBlueAuthor Commented:
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 :)
0
 
FenricCommented:
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!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 7
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now