Centre the page ?

This is a discussion on "Centre the page ?" within the Web Page Design section. This forum, and the thread "Centre the page ? are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page Centre the page ?

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Oct 10th, 2006, 08:49
Reputable Member
Join Date: May 2006
Location: Northampton, UK
Posts: 399
Thanks: 0
Thanked 0 Times in 0 Posts
Centre the page ?
Sorry for making to threads in the same forum so close together.... but I'm having two problems and felt that they were un-related enough to justify a new thread

for reference the website in question is : http://www.cbmgroup.co.uk


Im trying to get the whole page to centre itself on the viewers screen... as you can see, at the moment the content is effectivly left justified.

The only way i can make this work (so far) is by adding 10% left hand padding to the <body> tag ...... this works fine on larger monitors.... but creates the dreaded horizontal scrol bar of death on smaller screens.


Can anyone help please??
Reply With Quote

  #2 (permalink)  
Old Oct 10th, 2006, 11:51
Reputable Member
Join Date: May 2006
Location: Northampton, UK
Posts: 399
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Centre the page ?
Guys i really need some help here..... im going bald as i start to pull ahir out..... heres my css file.... please can anyone help?



Code: Select all
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    line-height: 1.5em;
    margin: 0px;
    color: #000000;
    background-color: #FFFFFF;
    width: 100%;
    background-position: top;
    position: absolute;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0%;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #FFFFFF;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
}
#ulproductlist {
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #000066;
    text-align: center;
    padding-top: 10px;
    margin: 0px;
}

#divHeader {
    border-top-width: 20px;
    border-bottom-width: 3px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    height: 205px;
    width: 975px;
    border-bottom-color: #000000;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url(../images/Art/headernew01.jpg);
    clear: both;
    float: none;
    background-color: #FFFFFF;
    border-right-width: 0px;
    border-right-color: #FFFFFF;
}
#divLeft {
    margin: 0px;
    float: left;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    width: 160px;
    background-color: #FFFFFF;
    border-top-width: 0px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center top;
    line-height: normal;
    clear: right;
    border-right-color: #333333;
    border-bottom-color: #333333;
    border-left-color: #333333;
}
#divRight {
    float: right;
    width: 160px;
    padding-top: 10px;
    padding-right: 7.5px;
    padding-bottom: 0px;
    padding-left: 7.5px;
    background-color: #C4D0E7;
    line-height: 1.7em;
    text-align: center;
    color: #000000;
    border-top-width: 10px;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #FFFFFF;
    border-right-color: #333333;
    border-bottom-color: #000000;
    border-left-color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    clear: right;
}
#divsearch {
    clear: both;
    left: 235px;
    padding-left: 235px;
}

#divCenter {
    background-color: #C4D0E7;
    text-align: justify;
    padding-top: 1em;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: #FFFFFF;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 192px;
    border-right-width: 3px;
    border-left-width: 3px;
    border-right-style: none;
    border-left-style: none;
    border-right-color: #000000;
    border-left-color: #000000;
    border-bottom-width: 2px;
    border-bottom-style: groove;
    border-bottom-color: #FFFFFF;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    font-family: Arial, Helvetica, sans-serif;
    width: 555px;
    color: #000000;
    font-weight: 300;
    position: relative;
    top: auto;
    line-height: 1.7em;
    clear: none;
}
#divContainer {
    width: 975px;
    background-color: #FFFFFF;
    border-right-width: 0%;
    border-right-style: none;
    border-top-width: 0%;
    border-bottom-width: 0%;
    border-left-width: 0%;
    border-top-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

.clearer {
    font-size: 0px;
    line-height: 0px;
    clear: both;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
}
H1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    color: #000000;
    border-bottom-width: 3px;
    border-bottom-style: double;
    border-bottom-color: #93ACD4;
    font-variant: small-caps;
}
#ulmainnav {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: center;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
#ulmainnav li {
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0px;
    margin: 0px;
    background-color: #FFFFFF;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
#ulmainnav a:link,#ulmainnav a:visited,#ulmainnav a:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-decoration: none;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    display: block;
    height: 65px;
    width: 100px;
    border: thin ridge #000000;
    top: 30px;
    margin-top: 0px;
    padding: 0px 10px 0px 20px;
    font-weight: bold;
    color: #000000;
    line-height: 60px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-left: 20px;
    float: none;
    clear: both;
    background-color: #95ABD4;
}
#ulmainnav a:hover, #ulmainnav a.current:link,#ulmainnav a.current:visited {
    background-image: none;
    color: #FFFFFF;
    background-color: #999999;
}
#divFooter {
    text-align: center;
    margin: 0px;
    padding: 0em;
    border-top-width: 3px;
    border-top-style: double;
    border-top-color: #000000;
    width: 975px;
    background-color: #FFFFFF;
    color: #000000;
}
h2 {
    font-family: "Lucida Console", "Lucida Sans", "Lucida Sans Unicode";
    font-size: 1.2em;
    color: #333366;
    text-align: center;
    border-bottom-width: 3px;
    border-bottom-style: double;
    border-bottom-color: #FF3333;
    padding-top: 10px;
}
.pcontact {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #000000;
    text-align: center;
}
#divFooter a:link,#divFooter a:visited,#divFooter a:active {
    color: #95ABD4;
    text-decoration: none;
}
#divFooter a:hover {
    color: #0033FF;
}
.buzserv {
    padding: 0%;
    border: 3px double #FF0000;
    margin: 5px;
    text-align: center;
}
.topright {
    background-image: url(../images/Working/form/corner_tr.gif);
    background-repeat: no-repeat;
    background-position: right top;
}
.topleft {
    background-image: url(../images/Working/form/cornermain.gif);
    background-repeat: no-repeat;
    background-position: left top;
}
.bottomright {
    background-image: url(../images/Working/form/corner_br.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
}
.bottomleft {
    background-image: url(../images/Working/form/corner_bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
}
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #9966FF;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #000000;
}
#ulpayrollnav {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: center;
    border: 0px none;
    display: inline;
}
#ulpayrollnav li {
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0px;
    margin: 0px;
    border: 0px none;
    display: inline;
}
#ulpayrollnav a:link,#ulpayrollnav a:visited,#ulpayrollnav a:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-decoration: none;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    display: inline;
    border: none;
    padding: 0px 10px;
    font-weight: bold;
    color: #000000;
    line-height: 10px;
    margin: 0px;
}
#ulpayrollnav a:hover, #ulpayrollnav a.current:link,#ulpayrollnav a.current:visited {
    background-image: none;
    color: #93ACD4;
}
.embed_img_left {
    float: left;
    padding: 0px;
    border-right-style: none;
    margin: 5px;
}
.embed_img_right {
    float: right;
    clear: left;
    margin: 10px;
}
h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: #6699FF;
    text-align: center;
    font-size: 1.9em;
    border-bottom-width: thin;
    border-bottom-style: groove;
    border-bottom-color: #000000;
}
#divBanner {
    height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    float: none;
    clear: left;
    width: 468px;
    left: 235px;
    position: relative;
}
#ulpayroll {
    list-style-type: square;
    clear: none;
    text-align: justify;
}
#divContainer a:link,#divContainer a:visited, #divContainer a:active {
    text-decoration: underline;
    color: #3333FF;
}
#divContainer a:hover,#divContainer a.current:link,#divContainer a.current:visited {
    color: #FFFFFF;
}
#divLeft a:link,#diveLeft a:visited,#diveLeft a:active {
    color: #0033FF;
}
#divLeft a:hover,#divleft a.current:link,#divLeft a.current:visited {
    color: #CBD5EE;
}
h6 {
    font-size: 30px;
    color: #666666;
    text-align: center;
    height: 50px;
}
Reply With Quote
  #3 (permalink)  
Old Oct 10th, 2006, 11:54
Daniel's Avatar
Elite Veteran
Join Date: Sep 2006
Location: The Kingdom of Rabbits
Age: 21
Posts: 2,051
Blog Entries: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to Daniel
Re: Centre the page ?
it looks ok to me - what do you think is wrong with it
Last Blog Entry: Assassin's Creed (Nov 22nd, 2007)
Reply With Quote
  #4 (permalink)  
Old Oct 10th, 2006, 12:03
Reputable Member
Join Date: May 2006
Location: Northampton, UK
Posts: 399
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Centre the page ?
I want everything to be centered on the screen of whoever is viewing it... rather than left justified as it is at the moment .... any idea's?
Reply With Quote
  #5 (permalink)  
Old Oct 10th, 2006, 13:02
moojoo's Avatar
Moderator
Join Date: Aug 2005
Location: Texas
Age: 31
Posts: 1,765
Blog Entries: 1
Thanks: 0
Thanked 18 Times in 18 Posts
Send a message via AIM to moojoo Send a message via MSN to moojoo Send a message via Yahoo to moojoo
Re: Centre the page ?
Code: Select all
body {     
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.5em;
margin: 0px;
color: #000000;
background-color: #FFFFFF;
width: 100%;
background-position: top;
position: absolute;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
should be more like

Code: Select all
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.5em;
background-color:#FFF;
text-align:center;
padding:0;
margin:0;
}
And you should have a wrapper or container div then to control the layout and since it is not a liquid layout you can set the pixel values needed and put a margin:0 auto; on the containing div. Also add text-align:left to compensate for the text-align:center; on the body. That will center the layout in IE pre 6.x since IE 5.x won't recognize margin:0 auto;. You should also consider ditching the tables. This layout would be very simple to do in CSS and would make for amuch cleaner and easier to manage site.

The container could look something like this.

Code: Select all
#container {
width:777px;
margin:0 auto;
text-align:left;
}
Side Notes:

Clean code
Lose the javascript for the image rollovers. This can be done with CSS and since they are links they will work in IE.
Replace the copy on the image links with real copy or provide a text alternative if CSS is disabled.
Ditch the tables
The layout is too wide for what your target demographic will probably be. shoot for 800x600 and above.
It looks like Dreamweaver WYSIWYG code. Do it by hand!

Hope this helps.
__________________
The internet is just a fad.
http://www.mevans76.com
Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Last edited by moojoo; Oct 10th, 2006 at 13:13.
Reply With Quote
  #6 (permalink)  
Old Oct 10th, 2006, 14:05
Reputable Member
Join Date: May 2006
Location: Northampton, UK
Posts: 399
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Centre the page ?
I love you all ...... (well, nearly)

Ive done it !!!!

I had a rougue </div> that was closing my #divwrapper off just after the <body> tag....... point taen about cleaning the code up moojoo ........ once ive got this darn navigation bar sorted ill be spring cleaning my code severely.

Burt sorting the navbar will also remove much cluttered code asell thanks mate
Reply With Quote
Reply

Tags
body

« More IE problems | PNG Transparencies in CSS »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] image to centre page R8515198 Web Page Design 6 Nov 23rd, 2007 04:11
Playpals Childcare Centre urbycoz Free Web Site Critique 12 Aug 19th, 2007 12:41
Web Design Centre centamtom Free Web Site Critique 7 May 12th, 2007 20:30
Display flash window centre screen gbk Flash & Multimedia Forum 5 Oct 5th, 2006 03:39
css to centre flash onlinegamesplayer Web Page Design 6 May 15th, 2006 09:40


All times are GMT. The time now is 03:11.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Midwife Forums :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43