top link/navigation bar "splitting" leaving blank space

[Johnnycopilot]

I am using v1.5.0, I have abagon red template. I changed the size of the page view from the original fixed pixels, to a percentage, so that when the site is seen on a larger screen, the it expands. everything looks ok until I go to a high resolution screen (larger than 1200 x 800).. like for example 1600 x 1200 (or pretty much any size larger than 1200 x 800), and then the top navigation bar "SPLITS", just around the center, and my "View Cart" button starts to go away, leaving a huge blank "space".. the larger the screen, the worse the split. I don't know how to define, or tell, that bar to keep "stretching" out with the rest of the page I suppose (that's a guess).. My website is stageandtheaterlighting . com ... Any help fixing this problem would be greatly appreciated!! Thanks!!

[4jDesigns]

Hey,

Just had a quick look... I would first check that 'div#top_nav' has a % sizing to account for the stretching, otherwise have a look at adding the same background to 'div.main_menu_panel' so the white will be filled in...

Hopes this helps a little towards a solution

Jay.

[4jDesigns]

Just a better look... seems you using an image as your background (top_menu_left_bg.gif) with 'no-repeat', if you have the image setup to only accommodate the left side because of the rounded corners, try using 'border-radius' and 'background-gradient' (check W3C site for correct markup)... I'm also assuming you using an image for the right side too.

I would use these properties rather than images on 'div.main_menu_panel' and apply hover effects on your menus li.

[Johnnycopilot]

Thanks, but I don't know enough to follow exactly what you are saying. I understand what you are saying about the code, but I need a little more detail in reference to where to make these changes, and exactly how to enter the code.. exactly-exactly... I'm trying to learn this.... Thanks!!

[4jDesigns]

open up '/templates/CUSTOM/css/stylesheet.css', where 'CUSTOM' is your override template name.

Search for this:

#top_nav
background:url("../images/top_menu_left_bg.gif") no-repeat scroll 0pt 0pt transparent;

Comment out the background rather than delete for now just in case you want it back. This shoud remove the left background image on your menu.

Now search for:

.main_menu_panel
background:url("../images/top_menu_right_bg.gif") no-repeat scroll right 0pt transparent;

Comment out the background rather than delete for now just in case you want it back as well.

Now add this directly under your commented background of .main_menu_panel:

border:1px solid #cc0000;
border-radius: 5px;
background: #ff0000; /* Old browsers */
background: -moz-linear-gradient(top,  #ff0000 0%, #cc0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#cc0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff0000 0%,#cc0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff0000 0%,#cc0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff0000 0%,#cc0000 100%); /* IE10+ */
background: linear-gradient(top,  #ff0000 0%,#cc0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#cc0000',GradientType=0 ); /* IE6-9 */

Change the 'radius', border color' & 'gradient colors' to suit your needs. I have put in as close as I think you have.
Save it and lets see what happens... Let me now how you go.

Remember to either backup your file or comment out what you have changed so you can revert back to it.

Jay

[Johnnycopilot]

Thank you!! What I ended up doing (because of the information that you told me) was bring the bg image into photoshop and make it 1100 pixels wide, it was 600, and it seems to be working great. If you get a chance, check it out and see if it looks ok. The code you gave me worked perfect, and looked great, but I couldn't get the color to match. I would imagine that there is some code somewhere that would give me the color, but I couldn't find it. Once again, Thanks for your help, I had no clue where to even start... I am slowly learing things thanks to this community and people like you.. Have a great day!!!