SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot greeneye's Avatar
    Join Date
    Apr 2006
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    please tell me what you see!

    the website I've been making looks fine to me but on my clients he says all of the text is like 200px to left. I think I've fixed the problem but as I can't check it on my browsers I can't tell! I used CSS to do it and used a small fix.

    Can you guys tell me if the page you are looking at is aligned please? So at least I know if I've solved the problem or need to try again.

    http://www.rogerbloxham.co.uk

    Thank you!

    greeneye
    Hello

  2. #2
    SitePoint Zealot greeneye's Avatar
    Join Date
    Apr 2006
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I can see this is not a popular thread. That's OK.. I promise I am not trying to like sell you anything or get you to review the site, I'm just totally stuck 'cos I can't see the problem.

    I've been told by someone the problem is still there. Here is my CSS. Any suggestions?

    HTML Code:
    /*this contains all the other divs on the page*/
    #rbbg {
    	height: 410px;
    	width: 740px;
    	position: relative;
    	text-align: left;
    	margin-top: 9px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    
    }
    body {
    	background-color: #14265E;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	width: 768px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-align: center;
    
    
    }
    /*here is an example of one of the divs which goes left on some IE browsers*/
    }
    #editright {
    	height: 284px;
    	width: 533px;
    	position: absolute;
    	left: 461px;
    	top: 123px;
    	z-index: 5;
    	text-align: left;
    
    
    } /*below is a fix I was told would help and hasn't*/
    .clearfix:after {
      content: ".";
      clear: both;
      height: 0;
      visibility: hidden;
      display: block;
    }
    .clearfix {
      display: inline-block; /* Fixes IE/Mac */
    }
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    
    }
    Thanks for your help in advance
    Hello

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The problem is that you're absolutely positioning your main content, but you're doing it relative to the browser rather than to your container, and you're keeping the container in the normal flow. This causes the main content to always be 461px from the left edge of the browser window, while the container auto-centers. Try resizing your browser window and you'll see the effect.

    To fix this, set the container element (#rbbg) to "position: relative;" in your CSS. This will make any absolutely positioned elements like your main content position itself within the container. Then tweak the values you have for your absolutely positioned elements (like #editright) so they are where you want them to be.

  4. #4
    SitePoint Zealot greeneye's Avatar
    Join Date
    Apr 2006
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that you're absolutely positioning your main content....
    ....set the container element (#rbbg) to "position: relative;" in your CSS
    The thing is that it already is position:relative.

    However that explanation was really helpful and has helped me understand in general positioning a little bit more. But I'm still stuck for now...
    Hello

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Okay, if you cut your header image down to just the part above the line and use the following stylesheet you should be in better shape.
    Code:
    body {
    	background-color: #14265E;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-align: center;
    }
    #rbbg {
    	width: 740px;
    	position: relative;
    	text-align: left;
    	margin: 9px auto 0;
            background: #deeefe;
            overflow: visible;
    }
    p {
    	font-size: 0.7em;
    	color: #14265E;
    }
    #contact {
    	height: 93px;
    	width: 291px;
    	position: absolute;
    	z-index: 2;
    	left: 432px;
    	top: 22px;
    
    
    }
    a:link {
    	color: #0099FF;
    	text-decoration: underline;
    }
    a:visited {
    	color: #0099FF;
    	text-decoration: underline;
    }
    a:hover {
    	color: #0099FF;
    	text-decoration: none;
    }
    #navbar {
       float: left;
       width: 160px;
       background: #deeefe;
    }
    
    #editright {
    	width: 575px;
            float: left;
    	text-align: left;
    }
    #editleft {
    	width: 307px;
    	text-align: right;
    }
    h1 {
    	font-size: 1.4em;
    	text-align: right;
    	color: #003366;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    
    }
    h2 {
    	color: #003366;
    	font-weight: normal;
    	font-size: 1em;
    }
    li {
    	color: #003366;
    	font-size: 0.7em;
    }
    h3 {
    	font-size: .8em;
    	font-weight: normal;
    	color: #003366;
    }
    h4 {
    	font-weight: normal;
    	color: #003366;
    	text-align: center;
    	font-size: .8em;
    
    }
    h5 {
    	font-weight: normal;
    	color: #003366;
    	font-size: .7em;
    	text-align: right;
    }
    
    #editlefter {
    	height: 72px;
    	width: 249px;
    	z-index: 4;
    
    }
    h6 {
    	font-size: 1.4em;
    	color: #14265e;
    	text-align: left;
    	margin: 0px;
    }
    You might have a few little things to clean up but this should get you on the right track

  6. #6
    SitePoint Zealot greeneye's Avatar
    Join Date
    Apr 2006
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ack.....it looks like someone dropped a bomb in the middle of the page and ran....

    Well its friday night, the weather is nice and I'm agonising over this thing in a dark room.....

    I will play with your css a bit more but then if I can't work it out, back to the drawing board either over the weekend or monday.

    Thanks Vinnie, you are a
    Hello


Bookmarks

Posting Permissions

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