Hello and welcome to our community! Is this your first visit?
Register
Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Well then

  1. #1
    Fanatic Enthusiast

    Join Date
    Oct 2007
    Location
    UK
    Posts
    4,598

    Well then

    It's been a while since I've properly coded a website so I figured I'd give it a go, though I've ran into a problem that's had me stumped for the past hour. When the content of the page gets long enough to need a scrollbar, it shunts about 10px to the left.

    As I say, I've been editing away to find out what the solution may be for the past hour and I'm stuck. I'm sure it'll end up being something stupidly obvious, so go easy on me >_>


    Code:
    /*********************MAIN*********************/
    /**********************************************/
    
    body {
    	height: auto;
    	width: 900px;
    	margin: auto;
    	background-color: #FFFFFF;
    	font-family: Ariel, sans-serif;
    	color: #2F2F2F;
    }
    
    h1 {
    	font-family: sans-serif;
    	font-weight: 200;
    	color: #1757FF;
    	font-size: 150%;
    }
    
    h2 { 
    
    	font-family: sans-serif;
    	font-weight: 300;
    	color: #555555;
    	font-size: 130%;
    }
    
    div#container {
    	height: auto;
    	width: 900px;
    	padding: 3px 0px 3px 0px;
    	margin: 5px 0px 0px 0px;
    }
    
    /*********************LINKS********************/
    /**********************************************/
    
    a {
    	color: #6892FF;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #86A7FF;
    	text-decoration: underline;
    }
    
    /*********************HEAD*********************/
    /**********************************************/
    
    div#header {
    	background-image: url('images/header.png');
    	background-repeat: no-repeat;
    	width: 900px;
    	height: 115px;
    	margin: auto;
    }
    
    #header p {
    	padding-top: 80px;
    	padding-left: 178px;
    	margin: auto;
    	font-style: italic;
    	color: #6795FE;
    }
    
    /*********************NAV**********************/
    /**********************************************/
    
    div#nav {
    	background-image: url('images/nav.png');
    	background-repeat: repeat-x;
    	height: 28px;
    	width: 900px;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #1757FF;
    	word-spacing: 30px;
    	text-align: center;
    	padding-top: 2px;
    }
    
    #nav a {
    	font-family: Ariel, sans-serif;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    
    #nav a:hover {
    	color: #D5E1FF;
    	text-decoration: underline;
    }
    
    /*********************POST*********************/
    /*********************AREA*********************/
    
    
    div#textarea {
    	margin: auto;
    	width: 800px;
    	padding-bottom: 30px;
    }
    div#textarea p {
    	font-size: 90%;
    	}
    
    div#textarea img{
    	float: none;
    	border: none;
    }
    
    div#textarea img.FP {
    	float: left;
    	border: solid;
    	border-width: 1px;
    	border-color: #1757FF;
    	margin-right: 30px;
    }
    
    div#textarea img.read{
    	float: right;
    	border: none;
    }
    /*********************FOOT*********************/
    /**********************************************/
    
    div#footer {
    	background-image: url('images/footer.png');
    	width: 900px;
    	height: 70px;
    	margin: auto;
    }
    
    div#footer p {
    	padding-top: 20px;
    	font-size: 80%;
    	text-align: center;
    	color: #666666;
    }
    
    div#footer a {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    
    div#footer a:hover { 
    	color: #D5E1FF;
    	text-decoration: underline;
    }
    
    /*********************CRUMB********************/
    /*********************TRAIL********************/
    
    div#crumbtrail {
    	font-size: 80%;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    
    #crumbtrail a {
    	color: #6892FF;
    	text-decoration: none;
    }
    
    #crumbtrail a:hover {
    	color: #86A7FF;
    	text-decoration: underline;
    }
    /*******************************/
    /*******************************/
    /*******************************/
    /*******************************/

  2. #2
    Obsessed Veteran Adam's Avatar



    Join Date
    Nov 2004
    Location
    UK / England
    Posts
    17,271

    Re: Well then

    You should post the page markup. Just having the CSS isn't that useful.

  3. #3
    Fanatic Enthusiast

    Join Date
    Oct 2007
    Location
    UK
    Posts
    4,598

    Re: Well then

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Page  FAQ</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="shortcut icon" href="images/favicon.png" />
    </head>
    <body>
    <div id="container">
    	<div id="header">
    	
    
    <?php include('motto.txt') ?></p>
    	</div>
    		<div id="nav">
    			
    			<?php
    			include('nav.txt');
    			?>
    		
    		</div>
    			<div id="textarea">
    				<div id="crumbtrail"> 
    				<?php
    				include_once('class.breadcrumb.inc.php');
    				$breadcrumb = new breadcrumb;
    				echo $breadcrumb->show_breadcrumb();
    				?> 
    				</div>
    				
    				<h1>Site 1.0</h1>
    				
    				<table width="600px" border="0">
    				
    				<td width="200px">
    				<ul>
    				[*]FAQ #1
    				[*]FAQ #2
    				[*]FAQ #3
    				[*]FAQ #4
    				[*]FAQ #5
    				[*]FAQ #6
    				[*]FAQ #7
    				[*]FAQ #8
    				[*]FAQ #9
    				[*]FAQ #10
    				[/list]</td>
    				
    				<td width="400px" valign="top">
    				<h2>Freqeuntly Asked Questions</h2>
    
    Here you should find all the answers to any questions you may have.</p>
    				</td>
    				
    				</table>
    				
    				<hr color="#1757FF" />
    				
    				<a name="one"><h2>FAQ #1</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				<a name="two"><h2>FAQ #2</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				<a name="three"><h2>FAQ #3</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				<a name="four"><h2>FAQ #4</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				<a name="five"><h2>FAQ #5</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				<a name="six"><h2>FAQ #6</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				<a name="seven"><h2>FAQ #7</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				<a name="eight"><h2>FAQ #8</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				<a name="nine"><h2>FAQ #9</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				<a name="ten"><h2>FAQ #10</h2></a>
    				
    
    THIS TEXT ANSWERS THE QUESTION FAQ ASKS</p>
    				
    
    				
    				
    				
    			
    			
    			</div>
    				<div id="footer">
    				<?php include('foot.txt') ?>
    				</div>
    
    </div>
    
    
    
    
    
    </body>
    </html>


    This is the page the problem cropped up on (for obvious reasons >_>), I've tried removing separate parts of the content to see if they were causing the problem, which they aren't. So I figured it would be a problem with my CSS.

  4. #4
    Obsessed Veteran Adam's Avatar



    Join Date
    Nov 2004
    Location
    UK / England
    Posts
    17,271

    Re: Well then

    This is what I'm seeing,

    http://yourimg.in/i/sezbifym.png

    Can you clarify the problem.

  5. #5
    Veteran Enthusiast LeadingManNigel's Avatar


    Join Date
    May 2005
    Location
    New York City
    Posts
    6,213

    Re: Well then

    http://pastebin.com/
    Its a good site to share long code easier.

  6. #6
    Obsessed Veteran Adam's Avatar



    Join Date
    Nov 2004
    Location
    UK / England
    Posts
    17,271

    Re: Well then

    Quote Originally Posted by LeadingManNigel
    http://pastebin.com/
    Its a good site to share long code easier.
    For this, it's not useful.

  7. #7
    Fanatic Enthusiast

    Join Date
    Oct 2007
    Location
    UK
    Posts
    4,598

    Re: Well then

    The page is centered for me, weird. Anyhow.
    I've two pages, the index, and a faq page, the index page is dead center with little content in it, though in the faq page there's a list of hypothetical FAQs. It seems when there is content long enough to need a scroll bar, the whole page moves around 10px to the left. Though when I delete the content the page moves back to its original placement.

    If you still don't get what I mean I'll throw some screenshots together.

  8. #8
    Obsessed Veteran Adam's Avatar



    Join Date
    Nov 2004
    Location
    UK / England
    Posts
    17,271

    Re: Well then

    I think I understand. I noticed this on a layout I was working on yesterday. It's due the scroller bar size affecting the page contents.

    A good example I guess is on usercake;

    http://usercake.com/
    http://usercake.com/faq.php - content shift

    As far as I'm aware (and my field isn't really CSS based) there isn't any easy / clean way to resolve the content from being pushed. It's a minor bug bare which is present on small layouts.

    This might be of interest

    http://www.communitymx.com/content/arti ... ?cid=528a0

    - Also a tip, kudos for using % on fonts but set a font-size: value here em, on the body.

  9. #9
    Fanatic Enthusiast

    Join Date
    Oct 2007
    Location
    UK
    Posts
    4,598

    Re: Well then

    I'll read through that article now, thanks very much for all the help Adam.

  10. #10
    Regular Member

    Join Date
    Oct 2009
    Location
    . Hai
    Posts
    204

    Re: Well then

    Quote Originally Posted by Adam
    I see no difference in the centering, but my monitor is widescreen, so on the main page it has a scrollbar.
    [center:1anagt1t]NickWilsonMusic.NET[/center:1anagt1t]


 
Page 1 of 2 12 LastLast

Posting Permissions

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