Positioning & Alignment Driving Me Mad... Help Please

Just using this Saturday morning to do a few changes and there's a few that i'm wanting to do that i just can't. Can anyone help?

First one is the main area down the middle where the pictures are on the homepage, http://www.dpmautostyling.co.uk/catalogue/ has the same margin along the top and sides but because of the margin on the left handside it's pushing it too far away from the side boxes which has a knock on effect for these pages aswell...

http://www.dpmautostyling.co.uk/catalogue/index.php?main_page=index&cPath=1151

Is there anyway i can take away the margin on the left hand side only so it lines up and looks like it has the same gap from the sideboxes to the pictures as around the top?

Next one is i'm wanting to move the text in the main nav bar, home, log in, my account to the left so it lines up with the edge of the side boxes below.

Can anyone tell me how to do both?

Thanks in advance!

D,
Question 1

includes/ templates/ your_template_name/ css/ stylesheet.css

Make a backup of the stylesheet.css before these changes, so if you do not like just change..

1. .centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
   padding: 0.8em;
   }
2. Change to:
3. .centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
   padding: 0em;
   }
4. .leftBoxContainer {
   margin-top: 1em;
   }
5. change to:
6. delete this declaration, you have a duplicate below in the .css
7. This is cosmetic to me only
8. .leftBoxHeading, .rightBoxHeading {
   margin: 0 0 3px 0;
   border: 1px solid #000000;
   background-color: #3399FF;
   padding: 0.5em 0.2em;
   }
9. change to:
10. .leftBoxHeading, .rightBoxHeading {
    margin: 0em 0em 0em 0em;
    border: 1px solid #000000;
    background-color: #3399FF;
    padding: 0.5em 0.2em;
    }
11. Now you have a duplicate again here:
12. .leftBoxContainer {
    margin-top: 1em;
    }
13. change to:
14. .leftBoxContainer {
    margin-top: .5em;
    }
15. Add this declaration to the bottom of the sheet
16. #indexDefault {margin-top: -.7em;}

That's changed the part i wanted changing but also changed all the spacing above the boxes aswell.

I've put it back to what it was now. Basically it's just the gap between the left sideboxes and the main pictures needs to be the same as the gap at the top of the sideboxes to the mainnavbar. The other one is the wording on the mainnavbar needs to be moved to the left slightly.

By changing...

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;

to...

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0em;
margin-top: 0.8em;

It's solved the homepage problem but now these pages...

http://www.dpmautostyling.co.uk/catalogue/index.php?main_page=index&cPath=69

have not got the gap at the top and they've moved up.

Just need to get them back to match the rest again now. Anyone know how?

DPM:

http://www.dpmautostyling.co.uk/catalogue/index.php?main_page=index&cPath=69

have not got the gap at the top and they've moved up.

Just need to get them back to match the rest again now. Anyone know how?

includes/ templates/ your_template_name/ css/ stylesheet.css

Add the following declaration to the bottom of the .css

1. #indexCategoriesHeading {margin-top: 1.2em;}
2. the highlighted red text above is what you change
   

Not meaning to get off subject but, could the fact that you are using some "interesting" code be causing some of the problems.

W3C and xhtml do not like <nobr> </nobr>. You might want to move it to the stylesheet by adding a nobreak class to the div and adding the following to the css:

.nobreak {
white-space: nowrap;
}

Also, if you don't have firefox with the firebug addon, I'd suggest you get it and familiarize yourself with its use. A MOST valuable tool in adjusting sites. Also, adding html tidy will show you the code(s) that W3C and XHTML don't like.

I have Firefox but for a newbie like me i still get confused.

As for the coding, i basically taking over with no advise or guidence from the person who was originally doing the site.

That has solved the problem but these pages havn't changed with it...

http://www.dpmautostyling.co.uk/catalogue/index.php?main_page=index&cPath=1462

Right all the top margins are solved, thanks everyone.

Now its where the right hand side stops as on the following pages...

http://www.dpmautostyling.co.uk/catalogue/index.php?main_page=index&cPath=379_388_520_1650_1464

the prices and buy now go beyond the end of the Paypal/ZenCart box above them at the top which is where i'm wanting them to stop and line up with. Can anyone tell me how to alter this?

The same goes for the text on the product pages...

http://www.dpmautostyling.co.uk/catalogue/index.php?main_page=product_info&cPath=1462&products_id=3716

In that situation, you're going to find several spots where the code is "unique."

Get the addon HTML Validator for firefox and use it on each page in the site. It will put a little triangle in the lower right corner of firefox. Clicking on it will reveal the things that need fixing for the code to get "up to speed". I called it HTML tidy before

Once you have all those done, it will be simpler to fix the leftovers with the stylesheet. And, for that, use the Firebug.

Thanks, i'll download that now.

For a quick fix before i iron out all the bugs can anyone help with the following as mentioned above...

Where the right hand side stops as on the following pages...

http://www.dpmautostyling.co.uk/cata..._520_1650_1464

the prices and buy now go beyond the end of the Paypal/ZenCart box above them at the top which is where i'm wanting them to stop and line up with. Can anyone tell me how to alter this?

The same goes for the text on the product pages...

http://www.dpmautostyling.co.uk/cata...oducts_id=3716

The other one is the wording on the mainnavbar home, log in..... needs to be moved to the left slightly.

Can anyone help me with the 3 changes in the post above as i've looked and changed a few things with no success.

Thanks

Well i've managed to do 2 of the changes but still can't work out how to move the writing in the mainnavbar slightly to the left though.

Also can't seem to get the problem code tidy up to work either.

DPM:

Well i've managed to do 2 of the changes but still can't work out how to move the writing in the mainnavbar slightly to the left though.

Also can't seem to get the problem code tidy up to work either.

D,
Look at this:

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.1em 0.4em;
list-style-type: none;
text-align: left;
line-height: 1.5em;
}

The highlighted red text above is the change... go to: .1

Thanks Haredo, the site is slowly starting to look how i want it to.

Just need to sort this Flyout Menu problem which you may also be able to solve... :blush:

http://www.zen-cart.com/forum/showthread.php?t=95587&page=2