Jump to content

some pages go left and some go right, how to get all to be centered in browser


Recommended Posts

I have been going through the code over and over and added in borders and still can not find where the problem is.

 

This is a shortlink to the site.. http://bit.ly/rU0SOl

 

I am trying to get all pages to be in the center of the browser, but they are not doing this right now some display on the left a bit and some go right a bit, or it could be that only the few that are going right should not be and the ones on the left are ok, or visa-versa.

 

Is there anyone willing to check the pages out and see if they can spot what I have wrong.

Is it that your slider bar on the right is displayed on some pages but not others?

 

To me it worked better in ie7 than ie8 or firefox. Also as a note I didn't see your front page logo in ie but I see it in firefox.

as I think the person before me said, if some pages are long enough that require scrolling, then the width for the page to be centred within will be smaller by the width of the slider. I was having this problem with my site too, and took forever to figure out that the slight movement was due to the need for the slider on the right of the page. I can't remember if I fixed mine or not.. I think I just left it.. But hopefully that will get you started to figuring out a solution..

 

Denno

I see what you mean, but if I make the browser window full screen and click the menu link the pages are either to the left a little or right a little.  Nearly all the pages have the scroll bar to the right of the browser window.

 

Not had this before with any other pages I created in the past.

 

As far as I can see all pages are set using body tag at 800px wide and then every div or otherwise is set to with below this width or to 100%.

 

But I can not understand why some of them are moving left or right like they do.

As far as I can tell, the scrollbar is exactly what is causing your problem. I have a large monitor, so none of your pages require vertical scrolling for me to see the content, and no page was shifting when loaded. Try making the window really small, so that every single page will require scrolling. Then see if any pages shift when loaded. Also, your contact us page links to your about us page. Might want to fix that up.

 

Denno

Well, when I make the window smaller it works for me in both ie 7&8. I see from firebug you have your body set to

 

body {

    border: 0 solid #000000;

    margin: 0 auto;

    width: 800px;

}

 

The body is everthing in the monitor. You don't have any style for the class "topMenu" which most people name wrapper or allcontant.

 

Play a little and use

 

body {

    margin: 0;

    padding: 0;

}

 

.topMenu { /* AKA allcontent, AKA wrapper */

    border: 0 solid #000000;

    margin: 0 auto;

    width: 800px;

}

 

Also ck for different padding and margin settings between elements on different pages

I shall look at the margins and padding.

 

also another strange thing is the vehicles and register pages have a gap below the header.

 

caused by I think..

 

<h1>Registration</h1>

 

the h1 tag is within the content div and would have thought it would not cause a white bar to show above the content div.

 

 

heading tags have margin and padding added to them by the browser. You need to overwrite this in your stylesheet, effectively 'resetting' the margin and padding.

 

Might also want to try giving your content div a margin-top or 0px..

 

Denno

I have moved the start of the content div the above the header images and this seems to have fixed the extra gap issue.

 

I did also try out the suggestion of making the browsers content smaller so it fits one page and the page does not move left or right.  I may just leave this alone and not mess around with fixing the moving issue.  Although there is not a problem as I see that you are right that the scroll bar is what is causing the page to move.

 

Thank you all for your help on this.

Always happy to help :).

 

Could I suggest you have a look at the design of your site though. As I said before, it looks rather messy and confusing. There doesn't really seem to be a theme with it, just lots of colours. If this is for a company, then I feel it doesn't really give a great impression of that company.. This is just my opinion and I know you didn't ask for it, but I just couldn't help myself..

 

Denno

Oh ok.. This is different to the page you linked to in your original post?

 

I'm using Chrome and your header seems to be stuck to the left, whilst everything else is centred.. Not sure if this is the desired effect.. Looks a bit odd.

 

Also, the header on the vehicles page is different. You might want to change that to be the same as the other pages for consistency.

 

As for the vehicle photo's that have been cut out.. if I were you I'd try and apply some sort of fading around the edges, so it's not just a straight cut with the square pixels being visible.. So in Photoshop if you marquee a few pixels outside the actual car, and apply a feather to it.. Might look a bit better than what you have now.

 

Hope that helps mate.

 

Denno

Sorry one more thing.. I'm not a fan of the animated gif showing the payment methods that you take.. It's much more common with web design nowadays to not use animated gifs at all. So for your situation, just a simple graphic with the logo's of all payment methods shown in a row, next to each other.. Will appear much more professional.

I have read this in a number of web design blogs, and I have to agree with them..

sorry i mean the link http://alturl.com/8k37e is what the site currently looks like and the first link http://bit.ly/rU0SOl is the new site layout and rebranded site.  I only gave the old site link to show what the old site looks like.  As this one I think has less colour going on. But who am I to argue tha boss wants it like this so the boss shall have it like that !! lol 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.