Positioning & Alignment Driving Me Mad... Help Please

[DPM]

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/cata...dex&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!

[haredo]

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;}

[DPM]

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

[DPM]

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.

[DPM]

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/cata...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?

[haredo]

http://www.dpmautostyling.co.uk/cata...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
   

[dbltoe]

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.

[DPM]

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/cata...dex&cPath=1462

[DPM]

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/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

[dbltoe]

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.