www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] Problems Standardising Website

  1. #1
    Join Date
    Apr 2009
    Location
    Portsmouth, England.
    Posts
    94

    resolved [RESOLVED] Problems Standardising Website

    I've finished the basic website for my first client, but having always worked with HTML formatting and deprecated coding methods, I decided if I'm going to do something and get paid for it, I better make sure it's up to modern standards.

    So I've got rid of the table layout and replaced it with CSS layout features. Unfortunately, not having used CSS layout features before, I inevitably have a few hic-coughs. You can see my most recent version of the site here.

    The problem is, all the pages should be centered. In Safari and Opera, only the index page is centered, and the rest are left aligned. In Firefox and Navigator, all pages are left aligned. Even worse, in IE, the index page is left aligned, and the rest are some crazy distance to the right.

    The contents of style.css are:
    Code:
    body {
    	font-family:arial;
    	text-align:center;
    }
    div {
    
    }
    .center {
    	position:absolute;
    	top:1;
    	left:auto;
    	right:auto;
    	text-align:center;
    }
    .leftcol {
    	position:absolute;
    	top:1;
    	left:1;
    	width:190;
    	max-width:190;
    	height:657;
    	color:ffffff;
    	background-color:652D90;
    	vertical-align:top;
    	padding-left:20;
    	text-align:left;
    }
    .topimg {
    	position:absolute;
    	top:1;
    	left:211;
    	width:325;
    	height:159;
    	padding:5;
    	align:center;
    }
    .main {
    	position:absolute;
    	top:169;
    	left:211;
    	width:325;
    	padding:5;
    	color:550099;
    	vertical-align:top;
    	font-size:11;
    	text-align:left;
    }
    .content {
    	position:absolute;
    	top:1;
    	left:211;
    	color:333333;
    	vertical-align:top;
    	font-size:10;
    	width:325;
    	text-align:left;
    }
    .aboutcontent {
    	position:absolute;
    	top:1;
    	left:211;
    	padding:5;
    	color:333333;
    	vertical-align:top;
    	font-size:10;
    	width:525;
    	text-align:left;
    }
    .bottom {
    	position:absolute;
    	top:493;
    	left:211;
    	padding-top:5;
    	background-color:c1b1d6;
    	width:335;
    	height:160;
    	text-align:center;
    }
    .rightcol1 {
    	position:absolute;
    	top:6;
    	left:551;
    	width:179;
    	height:473;
    	padding:5;
    	color:333333;
    	background-color:e8e2f0;
    	vertical-align:top;
    	font-size:11;
    }
    .rightcol2 {
    	position:absolute;
    	top:6;
    	left:750;
    	width:179;
    	height:473;
    	padding:5;
    	color:333333;
    	background-color:e8e2f0;
    	vertical-align:top;
    	font-size:11;
    	text-align:left;
    }
    .bottomright {
    	position:absolute;
    	top:493;
    	left:546;
    	width:398;
    	height:160;
    	padding-top:5;
    	text-align:center;
    	color:550099;
    	background-color:c1b1d6;
    }
    .contact {
    	position:absolute;
    	top:1;
    	left:211;
    	padding-left:20;
    	width:315;
    	height:492;
    	color:550099;
    	background-color:c1b1d6;
    	text-align:left;
    }
    td.vouchers {
    	width:315;
    	height:155;
    	font-size:11;
    	color:333333;
    	background-image:url(images/vouchers.jpg);
    	background-repeat:none;
    }
    a {
    
    }
    .red {
    	color:ff0000;
    }
    .white {
    	color:ffffff;
    	text-decoration:none;
    }
    img.mainimg {
    	position:static;
    	left:auto;
    	right:auto;
    	width:325;
    	height:159;
    }
    Last edited by JTweedie; 05-01-2009 at 08:12 AM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    No css on the site link???

    No units defined for property values
    Code:
    	padding:5px;
    	color:#550099;
    If you want to center absolutely positioned elements then the parent must be relatively positioned, with defined and margin:auto;
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Apr 2009
    Location
    Portsmouth, England.
    Posts
    94
    Thanks for the reply; I've tried it, but still no change

    I changed the CSS code to
    Code:
    div {
    
    }
    .center {
    	position:relative;
    	top:1px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I can't help unless you give the correct link to the site.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Apr 2009
    Location
    Portsmouth, England.
    Posts
    94
    My link is to the right site; but the index page is not structured the same as the rest of the site.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by JTweedie View Post
    My link is to the right site; but the index page is not structured the same as the rest of the site.
    So give the correct link. You have given a link that has nothing to do with the problem.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Apr 2009
    Location
    Portsmouth, England.
    Posts
    94

  8. #8
    Join Date
    Apr 2009
    Location
    Portsmouth, England.
    Posts
    94
    Can anyone help? I even tried using a table instead of the center div, but that just displayed the page some crazy distance to the right. Once again, the link to the site is http://jtweedie.byethost10.com/D-Squared/main.html, and the content of style.css is:

    Code:
    body {
    	font-family:arial;
    	text-align:center;
    }
    div {
    
    }
    .center {
    	position:relative;
    	top:1px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:left;
    }
    .leftcol {
    	position:absolute;
    	top:1px;
    	left:1px;
    	width:190px;
    	max-width:190px;
    	height:657px;
    	color:#ffffff;
    	background-color:#652D90;
    	vertical-align:top;
    	padding-left:20px;
    	text-align:left;
    }
    .topimg {
    	position:absolute;
    	top:1px;
    	left:211px;
    	width:325px;
    	height:159px;
    	padding:5px;
    	align:center;
    }
    .main {
    	position:absolute;
    	top:169px;
    	left:211px;
    	width:325px;
    	padding:5px;
    	color:#550099;
    	vertical-align:top;
    	font-size:11px;
    	text-align:left;
    }
    .content {
    	position:absolute;
    	top:1px;
    	left:211px;
    	color:#333333;
    	vertical-align:top;
    	font-size:10px;
    	width:325px;
    	text-align:left;
    }
    .aboutcontent {
    	position:absolute;
    	top:1px;
    	left:211px;
    	padding:5px;
    	color:#333333;
    	vertical-align:top;
    	font-size:10px;
    	width:525px;
    	text-align:left;
    }
    .bottom {
    	position:absolute;
    	top:493px;
    	left:211px;
    	padding-top:5px;
    	background-color:#c1b1d6;
    	width:335px;
    	height:160px;
    	text-align:center;
    }
    .rightcol1 {
    	position:absolute;
    	top:6px;
    	left:551px;
    	width:179px;
    	height:473px;
    	padding:5px;
    	color:#333333;
    	background-color:#e8e2f0;
    	vertical-align:top;
    	font-size:11px;
    }
    .rightcol2 {
    	position:absolute;
    	top:6px;
    	left:750px;
    	width:179px;
    	height:473px;
    	padding:5px;
    	color:#333333;
    	background-color:e8e2f0px;
    	vertical-align:top;
    	font-size:11px;
    	text-align:left;
    }
    .bottomright {
    	position:absolute;
    	top:493px;
    	left:546px;
    	width:398px;
    	height:160px;
    	padding-top:5px;
    	text-align:center;
    	color:#550099;
    	background-color:#c1b1d6;
    }
    .contact {
    	position:absolute;
    	top:1px;
    	left:211px;
    	padding-left:20px;
    	width:315px;
    	height:492px;
    	color:#550099;
    	background-color:#c1b1d6;
    	text-align:left;
    }
    td.vouchers {
    	width:315px;
    	height:155px;
    	font-size:11px;
    	color:#333333;
    	background-image:url(images/vouchers.jpg);
    	background-repeat:no-repeat;
    }
    a {
    
    }
    .red {
    	color:#ff0000;
    }
    .white {
    	color:#ffffff;
    	text-decoration:none;
    }
    img.mainimg {
    	position:static;
    	left:auto;
    	right:auto;
    	width:325px;
    	height:159px;
    }

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    body{
    position:relative; 
    width:950px;
    margin:auto;
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  10. #10
    Join Date
    Apr 2009
    Location
    Portsmouth, England.
    Posts
    94
    Thanks Fang. At least I know how to solve the problem next time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles