CSS styling help needed

[KeriMorgret]

I'm hoping that to someone experienced this is a quick fix, but it may be a pain and a rat's nest of code.

Five or so years ago, I designed my brother's website at https://www.argentdata.com/index.html. I built it off of the Mollio theme (http://www.mollio.org/), and used templates in Dreamweaver, so it's not in a CMS. It's not a work of art, and there are some issues with it, but it's served him fairly well. Longer-term it needs a redesign, but right now I'm asking about just one aspect of the existing design.

There are two parts to the site - the plain HTML site, and the osCommerce store that's under the purchase tab. If you go to http://www.argentdata.com/catalog/ you'll see that the osCommerce store is full width, while the navigation header copied over from the main site is 1200 pixels wide and centered. If you're on a wide monitor, it looks weird.

What he'd like to do:

Make the main site align to the left, both the content and navigation, and make the navigation left aligned for the osCommerce portion. He figures this is the easier way to do things, rather than try to muck with osCommerce CSS (that also has some merged CSS from the Mollio theme) and get it to center.

Does anyone have a fairly simple solution that can make the navigation bar look good on osCommerce? Either the above of making everything left aligned, or some other solution simple we haven't thought of?

Thanks!

[KeriMorgret]

It looks like he did get what he wanted done for now. Thanks everyone!

[Anthony_NorthSEO]

Hi Keri,

Just wanted to check on this and make sure you got everything worked out.

Thanks!

Anthony

[KeriMorgret]

Thanks everyone! I'll forward this to my brother and see if that does the trick (then come back and mark helpful answers).

Keri

[Anthony_NorthSEO]

Totally forgot about the index updates! (Gotta learn to finish reading posts.)

Edit "argentdata.com/css/main.css" (changes in italics):

Line 107

#header #site-name a, #header #site-name a:link, #header #site-name a:visited,

#header #site-name a:hover, #header #site-name a:active {

text-decoration: none;

color: #CCC;

position: relative;

_ left: 100px; _}

Line 111

#nav {

font: bold 96% arial;

height: 2.09em;

margin: 0 105px 0 40px;

position: relative;

_left: 100px; _}

Line 151

#wrap {

min-width: 770px;

max-width:none !important;

margin: 0 auto;

position: relative; }

Line 152

#content-wrap {

position: relative;

max-width: 1200px;

_left: 100px; _}

This should match the root pages to the osCommerce pages.

-Anthony

[Anthony_NorthSEO]

Hi Keri,

This isn't a perfect fix but it should do the trick.

On line 377 of "argentdata.com/catalog/stylesheet.css" change

max-width: 1200px   to   max-width: none !important

#wrap {

min-width: 770px;

_max-width: none !important; _

margin: 0 auto;

position: relative;

}

You could also just delete the max-width value altogether, but just in case there's another width value somewhere else... might as well change it.

On line 348 add

position: relative; left: 100px;

#header #site-name a, #header #site-name a:link, #header #site-name a:visited,

#header #site-name a:hover, #header #site-name a:active {

text-decoration: none;

color: #CCC;

_position: relative; _

left: 100px;

}

Same thing on line 352... add** position: relative;left: 100px;**

#nav {

font: bold 96% arial;

height: 2.09em;

font: bold 96% arial;

margin: 0 105px 0 40px;

position: relative;

_ left: 100px;_

}

/* Hope this helps!

• Anthony */

[RyanKent]

Please view the attachment. Is that the result you desire? I am not entirely sure based on the question.

EDIT - actually, I prefer the 2nd image as a solution.

If you like the second image, simply change #wrap margin value to:

margin: 0;

Please note I am not a CSS expert by any means. I simply know enough to get by.

PlDFo qngtw

[adriandg]

not waht you're asking for, but the fastest solution i can think of.

wrap the os commerce page with a div that is 90% width. give it margin: 0 auto; so that it centers.  The tables inside should auto adjust because they are all set to be 100% width.