How do I center a website - Post ID...

User 2499354 Photo


Registered User
21 posts

I would be very greatful if someone could let me know how I can get a site to centre its self on all monitor sizes. As an example, this current page appears in the centre of my widescreen monitor with blank space either side and also appears in the centre of the screen when i view it on my regular 15 inch monitor.

I have heard frames and framesets can acheive this but I don't realy want to use them. If i view the source of this current page I can't see any frame tags so how can it be done?

I mainly use dreamweaver 8

Any help would be gratiously appreciated.

Regards mark
User 244141 Photo


Ambassador
1,209 posts

Hi,

Maybe this post would go better under general question since this area of the forum is for Coffecup design software.


There's a lot of good places on the web for html tutorials on this.

I know if your using Visual Site Designer, you only have to check center on the page option. I dont know if its that way in dreamweaver though.
Web Design: https://www.websnoogie.com
Member - BBB: Websnoogie, LLC






User 355448 Photo


Ambassador
3,144 posts

Mark,

You may want to click on profile and change your forum name to something other than your email address. Just a suggestion to help keep your level of spam down.

Are you familiar with CSS? The use of styling can do what you want.

The way I center a page is I have a DIV that starts at the beginning of the body of my page and ends at the end of the body. I use style similar to this to center the content:

margin:0 auto;
width:760px;

The margin statement sets the top and bottom margin to 0 and the left and right margin to auto. The width of 760px is to allow someone with an 800 px wide monitor to see my pages without scrolling left to right.

If you do not use a code editor, there should be some style settings where you set the background color and font colors, etc. That would be the place to look for centering you page.

There is also a possibility that someone here may be familiar with Dreamweaver and can give specific instructions.

Hope this helps you get your pages centered.
User 2499354 Photo


Registered User
21 posts

Many thanks for tour help. The css has done the rick in terms of centering my page but the dont seem to allow me to place items in layers where ever i like which is what i use to do. As long as i had things in lays i could put them anywhere, flash, pgotos text anythng.

Any ideas would be great thanks

mark
User 355448 Photo


Ambassador
3,144 posts

Mark,

Another style feature is z-index. If you give something a z-index of 50, it will be below a z-index item of 100. For z-index to work, you must be using absolute positioning. If it was working previously, then it is likely you changed something when you entered the centering code.

Check the W3Schools site for lots of CSS help. The z-index information is found at http://www.w3schools.com/css/pr_pos_z-index.asp
User 463058 Photo


Ambassador
1,086 posts

Mark,

If you are using a div to center your page as Bill suggested, then you also need to make sure it is "position:relative". This will allow your layers to move with the rest of the page as the content centers within wider or narrower browser windows.
User 502133 Photo


Registered User
12 posts

Worth checking whether using CSS FLOAT rather than positioning would help. I have several sites which have sidebars at the LHS and RHS which contain paid-for display advertising, and - whatever else happens - the sidebars must stay visible on any monitor size. In the HTML body, the two sidebars must be defined (with float:right and float:left respectively) before the central section (which has a margin-left and a margin-right of 'auto') and which then fits between them and expands and contracts to suit the monitor. See e.g. www.cottesmore-hunt.co.uk
User 2733 Photo


Ambassador
426 posts

I'm amazed at the number of people who make things more difficult than they need to be. Use this amazing bit of code to center any page on any browser:
<center>blah</center>
Let's not get all hurt.
User 2499354 Photo


Registered User
21 posts

Smat arse. What would people like you to to feel big if it weren't for forums?
User 166871 Photo


Registered User
185 posts

David
Where exactly in VSD do I add this centering code. Putting it in the header doesnt work. For some reason when I use the center option in VSD pages settings it only centers horizontally not vertically. I tried manipulating the top and bottom margins manually using a text editor ie margin-top: 50px and margin-bottom: 50px and this works in FF and IE and Chrome,to make the site most pleasing, however will have to make this change each time I edit the page in VSD. I am looking for a more permanent solution in VSD without editing each update. Any thoughts.
Cayucostom
Vista Tom



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.