logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-23-2007, 03:00 PM   #1
twilightballoons
 
Join Date: Aug 2007
Posts: 24
Default Trouble trying to centre webpage

Hi, I am having a few problems in trying to centre my webpage using css.

I have read throught the forums and read through the 'centered with CSS' tutorial with slight success.

I followed the tutorial and enclosed my content with the <div class="wrapper"> all content goes here </div>, I then followed the instructions and placed the:

body {
text-align : center ;
min-width : 770px ;
}



in my stylesheet. The page then centres in dreamweaver and when I move the page around it moves OK.

But, the problem I have is when I preview the site in Firefox it does not quite centre in the middle, and if I resize the page then the site moves to the left just a little bit not as it does in dreamweaver when I test in there.

If I then test the site using internet explorer, then the site centers fine, but the same problem occues when I resize the window.

If I then try to correct the problem with the:

body {
text-align : center ;
min-width : 770px ;
}
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}

as it says in the tutorial, the same problem occurs with Firefox, but with internet explorer the page is not centred and it goes the same as Firefox.

I am designing the site to use oscommerce so put the xss in the stylesheet so this should not make much difference. The stlyesheet is listed below if that is any help and I have highlighted where I have entered the code.

I would be grateful if anyone can help, cheers.

http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Released under the GNU General Public License
*/

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
background: #58c9fd;
color: #000000;
margin: 0px;
}

body {
text-align : center ;
min-width : 770px ;
}



div.wrapper {
margin-left : 10%;
margin-right : 10%;
}

A {
color: #000000;
text-decoration: none;
}

A:hover {
color: #AABBDD;
text-decoration: underline;
}

FORM {
display: inline;
}

TR.header {
background: #ffffff;
}

TR.headerNavigation {
background: #bbc3d3;
}

TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #bbc3d3;
color: #ffffff;
font-weight : bold;
}

A.headerNavigation {
color: #FFFFFF;
}

A.headerNavigation:hover {
color: #ffffff;
}

TR.headerError {
background: #ff0000;
}

TD.headerError {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #ff0000;
color: #ffffff;
font-weight : bold;
text-align : center;
}

TR.headerInfo {
background: #00ff00;
}

TD.headerInfo {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
}

TR.footer {
background: #bbc3d3;
}

TD.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #bbc3d3;
color: #ffffff;
font-weight: bold;
}





TD.infoBox, SPAN.infoBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
background: #f8f8f9;
}

TABLE.productListing {
border: 1px;
border-style: solid;
border-color: #b6b7cb;
border-spacing: 1px;
}

.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #b6b7cb;
color: #FFFFFF;
font-weight: bold;
}

TD.productListing-data {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

A.pageResults {
color: #0000FF;
}

A.pageResults:hover {
color: #0000FF;
background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #9a9a9a;
}

TR.subBar {
background: #f4f7fd;
}

TD.subBar {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
}

TD.main, P.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

TD.accountCategory {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #aabbdd;
}

TD.fieldKey {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}

TD.fieldValue {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}

TD.tableHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}

SPAN.newItemInCart {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}

TEXTAREA {
width: 100%;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}

SPAN.greetUser {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #f0a480;
font-weight: bold;
}

TABLE.formArea {
background: #f1f9fe;
border-color: #7b9ebd;
border-style: solid;
border-width: 1px;
}

TD.formAreaTitle {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}

SPAN.markProductOutOfStock {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #c76170;
font-weight: bold;
}

SPAN.productSpecialPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}

SPAN.errorText {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

twilightballoons is offline   Reply With Quote
Old 11-24-2007, 12:03 PM   #2
twilightballoons
 
Join Date: Aug 2007
Posts: 24
Default

Can anyone help with this issue?

I have been looking through tutorials around the web but I am still having the same issue. Whatever I seem to try, the page does not quite centre with firefix but centres with internet explorer, but when I resize the window the page does not go all the way to the left as it should.

I have designed the page using photoshop and sliced it using imageready, could this be causing the fault in some way??

I hope someone can help as I am really stuck!!

Cheers.
twilightballoons is offline   Reply With Quote
Old 11-24-2007, 02:43 PM   #3
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

It's probably due to the scrollbar, but since I can't see it I'm only guessing. The scrollbar will make things move a little and no-one considers this an issue.
domedia is offline   Reply With Quote
Reply


Thread Tools
Display Modes

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

Forum Jump


All times are GMT. The time now is 02:02 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com