Just cant work it out..

[devinej1]

Hi all,

Just wondering how i would change the top part of my page, the part i wish to change is the top Grey colored part with my category links in it, which is directly under our logo.

I need it so the Grey section shows its margin at the top of the box like it does on this non Zen-cart page. And if you check out this page, which is the page i am having problems with you will see what i mean. We have tried for hours to fix it but i just cant seem to work it out. It's like the header is covering it up.
Any suggestions/advice is always highly appreciated

Thanks in advance.

[kobra]

Both links appear to be ZenCart???

[schoolboy]

BOTH seem to be running under zencart.

Compare the two stylesheets using WINMERGE, to see differences.

[devinej1]

Hi there,

Thanks for both of your replies. The first page(index.html that was created in a web design program) is not a zencart page it is just using the same stylesheet as the second page(main page of zencart) I searched through both stylesheets for page one and two, which should be 100% indentical but i could not find any errors/differences to affect the specific box i am having problems with. I will locate winmerge and see if that helps thank you again for your quick reply's.

[schoolboy]

Here are some pointers...

If I make the following edits to your stylesheet, I get a better result:


#logoWrapper {
width: 100%;
height:173px;

#navMainWrapper {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
font-weight: bold;
font-size: 10px;
height: 32px;
color: #445A6A;
vertical-align: middle;
padding-left: 3px;
}

#navEZPagesTop {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
height: 14px;
}

[schoolboy]

And also...

#navCatTabsWrapper {
margin: 0em;
background-color: #D0D0D0;
font-weight: bold;
color: #63859D;
height: 20px;
width: 974px;
border: 3px double #63859D;
}

#navMain ul, #navCatTabs ul {
margin: 0;
padding: 0.1em 0em;
font-size: 12px;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

[devinej1]

Here are some pointers...

If I make the following edits to your stylesheet, I get a better result:


#logoWrapper {
width: 100%;
height:173px;

#navMainWrapper {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
font-weight: bold;
font-size: 10px;
height: 32px;
color: #445A6A;
vertical-align: middle;
padding-left: 3px;
}

#navEZPagesTop {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
height: 14px;
}

Hi schoolboy,

That helped me out a bunch thanks heaps for that! just one more thing, what part do i change to adjust the height of the grey bar ?

Thanks once again

[devinej1]

Here are some pointers...

If I make the following edits to your stylesheet, I get a better result:


#logoWrapper {
width: 100%;
height:173px;

#navMainWrapper {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
font-weight: bold;
font-size: 10px;
height: 32px;
color: #445A6A;
vertical-align: middle;
padding-left: 3px;
}

#navEZPagesTop {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
height: 14px;
}

Hi schoolboy,

That helped me out a bunch thanks heaps for that! just one more thing, what part do i change to adjust the height of the grey bar ?

Thanks once again

Nevermind i got it all fixed thanks for your help its highly appreciated its perfect now! your a lifesaver!

[schoolboy]

Use the FIREFOX browser with the Web Developer Toolbox plugin.

This will help you identify and analyse page elements, and then do off-line edits to a web page, (and see the result in real-time) which you can then commit to your web page(s) on the actual server.