/    Sign up×
Community /Pin to ProfileBookmark

Pages not Centering and Margins not working

Hi,

I have just started a re-development of my existing website and I have two (2) problems that I would like to solve…see my test site which has the Home Page and Services Page working in my new look…

[URL=”http://www.xlautomation.com.au/test”]http://www.xlautomation.com.au/test[/URL]

Both problems are related to how the web site appears on different screen resolutions. I want the site to scale and be positioned in the centre of the browser regardless of whether the user is viewing from 1024×768 or 1280×1024.

Problem 1 – Page not Centered
The pages are displaying in the top left of the browser window. On a 1024×768 browser window this is fine but when viewed on 1280×1024 or higher it does look right…..I have tried using Margins within my stylesheet but this affects how the page rendered in the lower resolutions…

Problem 2 – Margins not working
The Services page has the Main Text displayed to the right of the left navigation. On a 1024×768 browser window the text looks great and is shown in line with the heading banner. But on a 1280×1024 or higher the text extends to the right of the heading banner as the whole page width is utilised. I would like the page just to be centred so that the text was always displayed underneath the heading banner. Again i have tried using Margins to align the text to the heading banner. This works for 1280×1024 and shows the text properly but when you view the page using margins under 1024×768 you see very little text and the whole page is extended downwards.

Apologies for the length of the post…..any assistance would be appreciated.

If you want a copy of my stylesheet let me know

to post a comment
HTML

5 Comments(s)

Copy linkTweet thisAlerts:
@KDLAMar 20.2008 — Problem 1: Set the body to text-align: center, and add a wrapper div the desired width of the page. Make sure to add a margin setting of auto for this block element to center itself.
<i>
</i>&lt;body style="text-align: center;"&gt;
&lt;div style="width: 984px; margin: 0 auto; text-align: left;"&gt;
...
&lt;/div&gt;
&lt;/body&gt;


Answer to problem 1 should cover problem 2, also.

BTW -- your 900+ width isn't user-friendly to 800x600 res. monitors.

KDLA
Copy linkTweet thisAlerts:
@scott56hannahauthorMar 20.2008 — Thanks for that....I have applied the changes to each of the <div> components where I thought they should go.

I have updated the Services page and it almost looks right now.

http://www.xlautomation.com.au/test/Services.html

The only problem is that I cannot get the Left Navigation and the Main Content to centre like the other sections.

Any advice on what to adjust for that...

I will also look to modify it for 800x600 screens

Thanks

Scott
Copy linkTweet thisAlerts:
@KDLAMar 20.2008 — This may have something to do with it (line 38):
&lt;div style="margin: 0pt auto; width: 948px; text-align: left;" id="detailpageMainContent"&gt;
This is close to the same width as the #wrapper div, or your overall width. This width doesn't allow the navigation to fit.

KDLA
Copy linkTweet thisAlerts:
@scott56hannahauthorMar 20.2008 — Ok thats now working for the main content and it looks great.

http://www.xlautomation.com.au/test/Services.html

The only problem I have now is that the Left Nav does not align with the Left Edge of the Header Banner and on larger screens is stuck on the left.

Within the stylesheet for the Left Nav it is set to Float Left so that it appears next to the Main Content and not on a line by itself.

Any suggestions on how I get this to align to the Left Edge of the Header Banner.

Thanks for all your help

Scott
Copy linkTweet thisAlerts:
@scott56hannahauthorMar 21.2008 — Have been able to work out how to get the Left Nav aligned by including it as a <div> within itself

Thanks for your help
×

Success!

Help @scott56hannah spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...