www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] Problems Standardising Website

  1. #1
    Join Date
    Apr 2009
    Location
    Leeds, England
    Posts
    101

    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 09: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;

  3. #3
    Join Date
    Apr 2009
    Location
    Leeds, England
    Posts
    101
    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.

  5. #5
    Join Date
    Apr 2009
    Location
    Leeds, England
    Posts
    101
    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.

  7. #7
    Join Date
    Apr 2009
    Location
    Leeds, England
    Posts
    101

  8. #8
    Join Date
    Apr 2009
    Location
    Leeds, England
    Posts
    101
    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;
    }

  10. #10
    Join Date
    Apr 2009
    Location
    Leeds, England
    Posts
    101
    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