www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Background vertically fills page

  1. #1
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    140

    Background vertically fills page

    Hi,
    I thought this would be simple but it doesn't seem to be.

    I want a coloured block in the background that fills the window vertically. height:100% seems to have done this.

    However, if my content on a page is taller than there is space for on the screen, a scrollbar appears (which is fine), but when you scroll down, it reveals that the coloured background stopped at the '100% of screen height' position and the main background colour then shows through.

    I've attached a couple of screengrabs to explain it better.

    Is there a way of setting the coloured background to be the full 100% of the used space, even when scrolled?

    My code for the coloured block is:
    Code:
    .website {
    	width: 1260px;
    	height: 100%;
    	left: 50%;
    	right: 50%;
    	margin: 0px auto;
    	margin-left: -630px;
    	margin-right: auto;
    	padding: 0px;
    	position: absolute;
    	border: none;
    	text-align: left;
    }
    Thanks,

    Derek
    Attached Images Attached Images

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    When you position something absolutely, it takes the element out of the document flow; meaning, that the container does not stretch to contain it.
    Without seeing the rest of your code (the issue is the container, not the map), it's hard to recommend a solution.

  3. #3
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    140
    Thanks, but I tried changing the image's position to relative and it doesn't seem to make any difference...

    My stylesheet code is
    Code:
    body { font-family: verdana, arial, sans-serif; margin: 0; padding: 0; text-align: center; background-color: #ccc; }
    
    html { overflow: -moz-scrollbars-vertical; }
    html { overflow-x: auto; }
    
    
    .website {
    	width: 1260px;
    	height: 100%;
    	left: 50%;
    	right: 50%;
    	margin: 0px auto;
    	margin-left: -630px;
    	margin-right: auto;
    	padding: 0px;
    	position: absolute;
    	border: none;
    	text-align: left;
    }
    
    a { color: #fff; text-decoration:none; outline: none; }
    
    #colour_01 { background: #ff0080; color: #fff; }
    #colour_02 { background: #bf8080; color: #fff; }
    #colour_03 { background: #ffcc9a; color: #fff; }
    
    #logo { width: 192px; height: 95px; position: absolute; bottom: 20px; right: 20px; }
    
    .text { font-family: verdana, arial, sans-serif; position: absolute; }
    
    #text_body { top: 220px; left: 850px; width: 400px; font-size: 12px; }
    #text_body li { list-style:square; }
    #colour_06 #text_body li { line-height: 150%; }
    #colour_03 #text_body { color: #555; }
    
    .image { position: relative; padding: 10px; }
    And then the html...
    Code:
    <div class="website" id="colour_03">
        	
        	<!-- Image -->
        	<div class="image" id="img_01"><img src="images/page03_mplan.jpg" title="The Masterplan" alt="The Masterplan" /></div>
    
    <div id="logo"><img src="images/logo.png" /></div>
    
    </div>
    Any ideas?!

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Why are you preferring to use positioning, rather than letting the element(s) stay within the document flow?

  5. #5
    Join Date
    Jan 2010
    Posts
    27
    From what I have read I havent been able to get a complete picture of how you are structuring your page, but if I have gotten your intention right this is how I would approach it

    use an overall div for centre'ing the page I tend to use <div id="wrapper"> (width:xxx; margin: 0 auto)

    inside this have 2 more divs:

    <div id="header">
    </div>
    <div id="content">
    </div>
    in the header put all the markup and images related to the top menu
    and what I beleive to be the crux of your problem will now lie in your content area thats getting the logo to appear in the bottom right of this content block.

    two approaches, dependent on whether you need the image as a link or if it can be a background.
    If a background is is a feasible approach then:

    Code:
    #content   {background:url(pathtoimg/img.ext) bottom right no-repeat #peachrgb)
    obviously you will have to put the appropriate width of the page in there aswell.

    If you need the logo as a link or some other actual content then this route should work.

    Code:
    #content   {position:relative;width:xxx;}
    #logo        {width: 192px; height: 95px; position: absolute; bottom: 20px; right: 20px;}

  6. #6
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    140
    Quote Originally Posted by KDLA View Post
    Why are you preferring to use positioning, rather than letting the element(s) stay within the document flow?
    Hmm - I'm self-taught and have just always done CSS this way! It seems more intuitive, I guess!

    Cheers, tjedgar - I'll give that a go. That's basically the approach I usually take - I've just never needed the height of the wrapper to extend to fit the content before. As I'll have more than one image on some pages, probably the second option is better.

    I'll let you know how it goes...

  7. #7
    Join Date
    Jan 2010
    Posts
    27
    The trick with the second route is you need to shift the focus of the absolute position from being the browser window to being the containing div, that's what the position:relative on the #content does, in laymans terms putting the relative on the container means the absolute position of the logo is absolute from the top left of the #content instead of the browser window

  8. #8
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    140
    So how come when I changed the position to relative for my image before, it didn't work? It's sitting inside the 'website' wrapper div... Surely that's essentially the same principle?

  9. #9
    Join Date
    Jan 2010
    Posts
    27
    not quite changing the position type on the logo isn't working, the thing that makes it work is changing the position type on the parent div so the absolute position of the logo isn't working off the browser window but rather the parent div this way it is the height of the parent div that matters and thus scrolling will not be a problem

  10. #10
    Join Date
    Jan 2010
    Posts
    10

    Similar problem

    Just me again.

    I have PRETTY much finished coding my new wordpress site. It is all xhtml and css validated which is great AND I have a working copy up online at http://discipleoftheway.aussiegreenthumb.com/

    Only problem? For NOW I've had to settle for a sidebar with a background that doesn't extend the full length of the window (it stops when content stops) while the blog entries go WELL down. I was able to get it to go all the way down but ONLY by sacrificing my 10px light blue border around the outside which i don't want to do. Any idea's?

    CSS
    Code:
    /*
    Theme Name: Special blue
    Version: 1.0
    Author: James Middleton
    Author URL: http://discipleoftheway.aussiegreenthumb.com/
    */
    
    body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
    	margin: 0;
    	padding: 0;
    }
    
    body{
    	font-family: georgia, serif;
    	font-size: 14px;
    	vertical-align: top;
    	text-align: center;
    	color: #333333;
    }
    
    table{
    	font-family: georgia, serif;
    	font-size: 14px;
    }
    
    h1, h2, h3, h4, h5, h6{
    	font-family: "trebuchet ms", verdana;
    	font-weight: bold;
    }
    
    h1{
    	font-size: 24px;
    }
    
    h2{
    	font-size: 22px;
    }
    
    h3, h4, h5{
    	font-size: 18px;
    }
    
    h6{
    	display: none;
    }
    
    a{
    	text-decoration: underline;
    	color: #5C76A2;
    }
    
    a:hover{
    	text-decoration: none;
    }
    
    a img{
    	border: 0;
    }
    
    p{
    	padding: 10px 0 5px 0;
    }
    
    blockquote{
    	margin: 10px 10px 0 0;
    	border-top: 2px solid #ddd;
    	border-bottom: 2px solid #ddd;
    	background: #f5f5f5;
    }
    
    blockquote p{
    	padding: 10px;
    }
    
    blockquote blockquote{
    	float: none;
    	width: auto;
    	margin: 0 10px;
    	background: #fff;
    	border-bottom: 2px solid #ddd;
    }
    
    dd{
    	padding: 0 0 0 20px;
    }
    
    form, input, textarea{
    	font-family: georgia, serif;
    	font-size: 14px;
    }
    
    p img{
    	max-width: 100%;
    }
    
    img.centered{
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    img.alignright{
    	margin: 0 0 10px 10px;
    	padding: 0 10px 0 0;
    	display: inline;
    }
    
    img.alignleft{
    	margin: 0px 10px 10px 0px;
    	padding: 0px;
    	display: inline;
    }
    
    small{
    	font-size: 12px;
    }
    
    .alignleft{
    	margin: 0px 10px 10px 0px;
    	float: left;
    }
    
    .alignright{
    	margin: 0px 0px 10px 10px;
    	float: right;
    }
    
    .clear{
    	margin: 0;
    	padding: 0;
    	clear: both;
    }
    
    #wrapper{
    	width: 880px;
    	margin: 0 auto;
    	padding: 0;
    	text-align: left;
    }
    
    #header{
    	width: 880px;
    	margin: 0;
    	padding: 0;
    	background: #fff;
    	float: left;
    }
    
    #navbarcontainer{
    	width: 880px;
    	margin: 0;
    	padding: 0;
    	background: #1e448a;
    }
    
    #navbar{
    	width: 870px;
    	margin: 0;
    	padding: 0 10px 0 0;
    	background: #1E448A;
    	font-weight: bold;
    	float: left;
    }
    
    #navbar ul{
    	margin: 0;
    	padding: 0;
    }
    
    #navbar ul li{
    	display: inline;
    	float: left;
    }
    
    #navbar ul  li a{
    	display: block;
    	padding: 10px;
    	text-decoration: none;
    	color: #ffffff;
    	border-right: 1px solid #fff;
    }
    
    #navbar ul a:hover{
    	text-decoration: underline;
    	background: #86ACEC;
    }
    
    #title{
    	width: 550px;
    	margin: 10px;
    	padding: 0px;
    	background: #fff;
    	float: left;
    }
    
    #subscribe{
    	width: 290px;
    	margin: 10px 10px 10px 0;
    	padding: 0 5px;
    	background: #e7e7e7;
    	float: left;
    }
    
    #subscribe img{
    	float: right;
    	padding: 5px;
    }
    
    #search{
    	width: 300px;
    	margin: 0 10px 10px 0;
    	padding: 0;
    	background: #fff;
    	float: left;
    }
    
    #body{
    	width: 880px;
    	margin: 0;
    	padding: 0;
    	background: #86ACEC;
    	float: left;
    }
    
    #maincontent{
    	width: 550px;
    	margin: 0;
    	padding: 10px;
    	float: left;
    }
    
    .post{
    	width: 530px;
    	margin: 0 0 10px 0;
    	padding: 10px;
    	background: #fff;
    }
    
    .postheader{
    	width: 530px;
    	margin: 0;
    	padding: 0;
    	float: left;
    }
    
    .postdate{
    	width: 30px;
    	margin: 5px;
    	padding: 0 0 10px 0;
    	background:  url(images/postdatebackground.jpg) no-repeat;
    	float: left;
    }
    
    .month{
    	color: #fff;
    	font-weight: bold;
    	padding: 0 0 0 1px;
    }
    
    .day{
    	font-weight: bold;
    	padding: 0 0 0 2px;
    	font-size: 18px;
    }
    
    .posttitle{
    	width: 450px;
    	margin: 0 5px 5px 5px;
    	padding: 0 10px;
    	float: left;
    } 
    
    .postmetatop{
    	width: 450px;
    	margin: 0 5px 5px 5px ;
    	padding: 0;
    	float: left;
    }
    
    .postbody{
    	width: 530px;
    	margin: 0;
    	padding: 0;
    	float: left;
    }
    
    .postfooter{
    	width: 530px;
    	margin: 0px;
    	padding: 0px;
    }
    
    .postnavigation{
    	width: 550px;
    	margin: 10px;
    	padding: 10px;
    	background: #1E448A;
    	float: left;
    }
    
    .postnavigation a{
    	color: #fff;
    	font-weight: bold;
    }
    
    #sidebar{
    	width: 300px;
    	margin: 10px 10px 10px 0px;
    	background: #1E448A;
    	float: left;
    	font-family: georgia, serif;
    	color: #fff;
    }
    
    #sidebar h4{
    	margin: 10px;
    }
    
    #sidebar ul li, dd, select, p{
    	margin: 0 10px;
    }
    
    #sidebar ul li, #sidebar ul li a{
    	list-style-type: square;
    	color: #ffffff;
    	font-size: 14px;
    }
    
    #footer{
    	width: 880px;
    	margin: 0;
    	padding: 0;
    	background: #86ACEC;
    	float: left;
    	color: #000;
    	font-weight: bold;
    }
    
    #footer a{
    	color: #000;
    	font-weight: bold;
    }
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    
    	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    
    	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />		
    	<meta name="generator" content="WordPress<?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    
    	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    	<?php wp_get_archives('type=monthly&format=link'); ?>
    	<?php //comments_popup_script(); // off by default ?>
    	<?php wp_head(); ?>
    </head>
    
    <body style="background: #cccccc;">
    
    <div id="wrapper">
    
    	<div id="header">
    		
    		<div id="navbarcontainer">
    		<div id="navbar">
    			<ul>
    			<?php wp_list_pages('depth=1&title_li='); ?> 
    			</ul>
    		</div>
    		</div>
    		
    		<div id="title">
    			<h6><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h6>
    			<?php if ( !function_exists('dynamic_sidebar')
    			|| !dynamic_sidebar('title') ) : ?>
    			<?php endif; ?>
    		</div>
    		
    		<div id="subscribe">
    		<?php if ( !function_exists('dynamic_sidebar')
    			|| !dynamic_sidebar('subscribe') ) : ?>
    			<?php endif; ?>
    		</div>
    		
    		<div id="search">
    		<?php if ( !function_exists('dynamic_sidebar')
    				|| !dynamic_sidebar('searchbox') ) : ?>
    			<?php endif; ?>
    		</div>
    			
    	</div>
    	
    	<div id="body">
    	
    		<div id="maincontent">
    			<?php if(have_posts()):?><?php while(have_posts()):the_post(); ?>
    			<div class="post">
    				
    				<div class="postheader">
    				
    					<div class="postdate">
    						<div class="month"><?php the_time("M") ?></div>
    						<div class="day"><?php the_time("d") ?></div>
    					</div>
    					
    					<div class="posttitle">
    						<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    					</div>
    					
    					<div class="postmetatop">
    						| Categories: <?php the_category(',') ?> | Leave a comment:
    						<?php comments_popup_link('Be First!', '1 Comment', '% Comments'); ?> |
    					</div>
    				
    				</div>
    				
    				<div class="postbody">
    					<?php the_content(); ?>
    					<?php wp_link_pages(); ?>
    					<?php edit_post_link('Edit','<p>','</p>'); ?>
    				</div>
    				
    				<div class="postfooter">
    					| Posted on <?php the_time('F jS, Y'); ?> by <?php the_author(); ?> | Leave a comment: <?php comments_popup_link('Be First!', '1 Comment', '% Comments'); ?> |
    				</div>
    				
    			</div>
    			<?php endwhile; ?>
    			
    			<div class="postnavigation"><?php posts_nav_link(); ?>
    			</div>
    			<?php endif; ?>
    			
    		</div>
    		
    		<div id="sidebar">
    			<?php if ( !function_exists('dynamic_sidebar')
    			|| !dynamic_sidebar('sidebar') ) : ?>
    			<?php endif; ?>
    		</div>
    	
    	</div>
    	
    	<div id="footer">
    		<?php if ( !function_exists('dynamic_sidebar')
    		|| !dynamic_sidebar('footer') ) : ?>
    		<?php endif; ?>
    	</div>
    		<?php wp_footer(); ?>
    </div>
    
    </body>
    </html>

  11. #11
    Join Date
    Mar 2007
    Posts
    946
    Quote Originally Posted by middo1985 View Post
    Just me again.

    I have PRETTY much finished coding my new wordpress site. It is all xhtml and css validated which is great AND I have a working copy up online at http://discipleoftheway.aussiegreenthumb.com/

    Only problem? For NOW I've had to settle for a sidebar with a background that doesn't extend the full length of the window (it stops when content stops) while the blog entries go WELL down. I was able to get it to go all the way down but ONLY by sacrificing my 10px light blue border around the outside which i don't want to do. Any idea's?

    CSS
    Code:
    /*
    Theme Name: Special blue
    Version: 1.0
    Author: James Middleton
    Author URL: http://discipleoftheway.aussiegreenthumb.com/
    */
    
    body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
    	margin: 0;
    	padding: 0;
    }
    
    body{
    	font-family: georgia, serif;
    	font-size: 14px;
    	vertical-align: top;
    	text-align: center;
    	color: #333333;
    }
    
    table{
    	font-family: georgia, serif;
    	font-size: 14px;
    }
    
    h1, h2, h3, h4, h5, h6{
    	font-family: "trebuchet ms", verdana;
    	font-weight: bold;
    }
    
    h1{
    	font-size: 24px;
    }
    
    h2{
    	font-size: 22px;
    }
    
    h3, h4, h5{
    	font-size: 18px;
    }
    
    h6{
    	display: none;
    }
    
    a{
    	text-decoration: underline;
    	color: #5C76A2;
    }
    
    a:hover{
    	text-decoration: none;
    }
    
    a img{
    	border: 0;
    }
    
    p{
    	padding: 10px 0 5px 0;
    }
    
    blockquote{
    	margin: 10px 10px 0 0;
    	border-top: 2px solid #ddd;
    	border-bottom: 2px solid #ddd;
    	background: #f5f5f5;
    }
    
    blockquote p{
    	padding: 10px;
    }
    
    blockquote blockquote{
    	float: none;
    	width: auto;
    	margin: 0 10px;
    	background: #fff;
    	border-bottom: 2px solid #ddd;
    }
    
    dd{
    	padding: 0 0 0 20px;
    }
    
    form, input, textarea{
    	font-family: georgia, serif;
    	font-size: 14px;
    }
    
    p img{
    	max-width: 100%;
    }
    
    img.centered{
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    img.alignright{
    	margin: 0 0 10px 10px;
    	padding: 0 10px 0 0;
    	display: inline;
    }
    
    img.alignleft{
    	margin: 0px 10px 10px 0px;
    	padding: 0px;
    	display: inline;
    }
    
    small{
    	font-size: 12px;
    }
    
    .alignleft{
    	margin: 0px 10px 10px 0px;
    	float: left;
    }
    
    .alignright{
    	margin: 0px 0px 10px 10px;
    	float: right;
    }
    
    .clear{
    	margin: 0;
    	padding: 0;
    	clear: both;
    }
    
    #wrapper{
    	width: 880px;
    	margin: 0 auto;
    	padding: 0;
    	text-align: left;
    }
    
    #header{
    	width: 880px;
    	margin: 0;
    	padding: 0;
    	background: #fff;
    	float: left;
    }
    
    #navbarcontainer{
    	width: 880px;
    	margin: 0;
    	padding: 0;
    	background: #1e448a;
    }
    
    #navbar{
    	width: 870px;
    	margin: 0;
    	padding: 0 10px 0 0;
    	background: #1E448A;
    	font-weight: bold;
    	float: left;
    }
    
    #navbar ul{
    	margin: 0;
    	padding: 0;
    }
    
    #navbar ul li{
    	display: inline;
    	float: left;
    }
    
    #navbar ul  li a{
    	display: block;
    	padding: 10px;
    	text-decoration: none;
    	color: #ffffff;
    	border-right: 1px solid #fff;
    }
    
    #navbar ul a:hover{
    	text-decoration: underline;
    	background: #86ACEC;
    }
    
    #title{
    	width: 550px;
    	margin: 10px;
    	padding: 0px;
    	background: #fff;
    	float: left;
    }
    
    #subscribe{
    	width: 290px;
    	margin: 10px 10px 10px 0;
    	padding: 0 5px;
    	background: #e7e7e7;
    	float: left;
    }
    
    #subscribe img{
    	float: right;
    	padding: 5px;
    }
    
    #search{
    	width: 300px;
    	margin: 0 10px 10px 0;
    	padding: 0;
    	background: #fff;
    	float: left;
    }
    
    #body{
    	width: 880px;
    	margin: 0;
    	padding: 0;
    	background: #86ACEC;
    	float: left;
    }
    
    #maincontent{
    	width: 550px;
    	margin: 0;
    	padding: 10px;
    	float: left;
    }
    
    .post{
    	width: 530px;
    	margin: 0 0 10px 0;
    	padding: 10px;
    	background: #fff;
    }
    
    .postheader{
    	width: 530px;
    	margin: 0;
    	padding: 0;
    	float: left;
    }
    
    .postdate{
    	width: 30px;
    	margin: 5px;
    	padding: 0 0 10px 0;
    	background:  url(images/postdatebackground.jpg) no-repeat;
    	float: left;
    }
    
    .month{
    	color: #fff;
    	font-weight: bold;
    	padding: 0 0 0 1px;
    }
    
    .day{
    	font-weight: bold;
    	padding: 0 0 0 2px;
    	font-size: 18px;
    }
    
    .posttitle{
    	width: 450px;
    	margin: 0 5px 5px 5px;
    	padding: 0 10px;
    	float: left;
    } 
    
    .postmetatop{
    	width: 450px;
    	margin: 0 5px 5px 5px ;
    	padding: 0;
    	float: left;
    }
    
    .postbody{
    	width: 530px;
    	margin: 0;
    	padding: 0;
    	float: left;
    }
    
    .postfooter{
    	width: 530px;
    	margin: 0px;
    	padding: 0px;
    }
    
    .postnavigation{
    	width: 550px;
    	margin: 10px;
    	padding: 10px;
    	background: #1E448A;
    	float: left;
    }
    
    .postnavigation a{
    	color: #fff;
    	font-weight: bold;
    }
    
    #sidebar{
    	width: 300px;
    	margin: 10px 10px 10px 0px;
    	background: #1E448A;
    	float: left;
    	font-family: georgia, serif;
    	color: #fff;
    }
    
    #sidebar h4{
    	margin: 10px;
    }
    
    #sidebar ul li, dd, select, p{
    	margin: 0 10px;
    }
    
    #sidebar ul li, #sidebar ul li a{
    	list-style-type: square;
    	color: #ffffff;
    	font-size: 14px;
    }
    
    #footer{
    	width: 880px;
    	margin: 0;
    	padding: 0;
    	background: #86ACEC;
    	float: left;
    	color: #000;
    	font-weight: bold;
    }
    
    #footer a{
    	color: #000;
    	font-weight: bold;
    }
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    
    	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    
    	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />		
    	<meta name="generator" content="WordPress<?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    
    	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    	<?php wp_get_archives('type=monthly&format=link'); ?>
    	<?php //comments_popup_script(); // off by default ?>
    	<?php wp_head(); ?>
    </head>
    
    <body style="background: #cccccc;">
    
    <div id="wrapper">
    
    	<div id="header">
    		
    		<div id="navbarcontainer">
    		<div id="navbar">
    			<ul>
    			<?php wp_list_pages('depth=1&title_li='); ?> 
    			</ul>
    		</div>
    		</div>
    		
    		<div id="title">
    			<h6><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h6>
    			<?php if ( !function_exists('dynamic_sidebar')
    			|| !dynamic_sidebar('title') ) : ?>
    			<?php endif; ?>
    		</div>
    		
    		<div id="subscribe">
    		<?php if ( !function_exists('dynamic_sidebar')
    			|| !dynamic_sidebar('subscribe') ) : ?>
    			<?php endif; ?>
    		</div>
    		
    		<div id="search">
    		<?php if ( !function_exists('dynamic_sidebar')
    				|| !dynamic_sidebar('searchbox') ) : ?>
    			<?php endif; ?>
    		</div>
    			
    	</div>
    	
    	<div id="body">
    	
    		<div id="maincontent">
    			<?php if(have_posts()):?><?php while(have_posts()):the_post(); ?>
    			<div class="post">
    				
    				<div class="postheader">
    				
    					<div class="postdate">
    						<div class="month"><?php the_time("M") ?></div>
    						<div class="day"><?php the_time("d") ?></div>
    					</div>
    					
    					<div class="posttitle">
    						<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    					</div>
    					
    					<div class="postmetatop">
    						| Categories: <?php the_category(',') ?> | Leave a comment:
    						<?php comments_popup_link('Be First!', '1 Comment', '% Comments'); ?> |
    					</div>
    				
    				</div>
    				
    				<div class="postbody">
    					<?php the_content(); ?>
    					<?php wp_link_pages(); ?>
    					<?php edit_post_link('Edit','<p>','</p>'); ?>
    				</div>
    				
    				<div class="postfooter">
    					| Posted on <?php the_time('F jS, Y'); ?> by <?php the_author(); ?> | Leave a comment: <?php comments_popup_link('Be First!', '1 Comment', '% Comments'); ?> |
    				</div>
    				
    			</div>
    			<?php endwhile; ?>
    			
    			<div class="postnavigation"><?php posts_nav_link(); ?>
    			</div>
    			<?php endif; ?>
    			
    		</div>
    		
    		<div id="sidebar">
    			<?php if ( !function_exists('dynamic_sidebar')
    			|| !dynamic_sidebar('sidebar') ) : ?>
    			<?php endif; ?>
    		</div>
    	
    	</div>
    	
    	<div id="footer">
    		<?php if ( !function_exists('dynamic_sidebar')
    		|| !dynamic_sidebar('footer') ) : ?>
    		<?php endif; ?>
    	</div>
    		<?php wp_footer(); ?>
    </div>
    
    </body>
    </html>
    What you want is a small image like the one I made and add it to your id that you have called body. Then you just have it repeat all the way down.
    Attached Images Attached Images

  12. #12
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    140
    Hi there,
    I've had chance to implement your suggestions, and although it's getting there, it's not quite working.

    Although the coloured background extends vertically to fill the page, if the image is larger than will fit on the screen, then you need to scroll to see the rest of the image (which is fair enough) However, the coloured background doesn't extend beyond the part of the screen which was initially visible. Is there a way of setting it to fill 100% vertically, even when the scrollbars are being used?

    A simplified version of my code is:

    HTML:
    Code:
    <HTML>
    <HEAD>
    	<link rel="stylesheet" type="text/css" href="teststyles.css" />
    </HEAD>
    <BODY>
    
    <DIV ID="wrapper">
    	<DIV ID="content">
    		<DIV ID="image"><IMG SRC="images/page03_mplan.jpg" /></DIV>
    	
    	</DIV>
    </DIV>
    </BODY>
    </HTML>
    And the CSS:
    Code:
    #wrapper {width:800px; margin: 0 auto;}
    #content {position: relative; width: 600px; height: 100%; background: #f00; }
    #image {width: 410px; height:510px; position: absolute; top: 10px; left: 10px; }
    You can see it working (or not) at http://www.lsiarchitects.co.uk/colney/test.html - make the screen smaller than the image and scroll to see the issue.

    Any ideas? Or is just not possible without explicitly defining the dimension of the screen?

    Thanks,

    Derek

  13. #13
    Join Date
    Mar 2007
    Posts
    946
    Remove the height and position css from #content and for the #id remove height, left, position and top.

  14. #14
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    140
    That seems to be mostly it - thanks very much!

    One final issue - trying to get the logo to sit bottom right is proving fun. Not defining the position or putting it to relative means it just sits below the last thing defined.

    With position absolute, it moves to bottom right of the whole screen (not the wrapper div). I tried using relative and defining its location using minus values, but then that seemed to affect the overall width of the page...

    I would have thought this would be simple (or maybe it is for some people!)
    Last edited by derekjackson; 01-19-2010 at 09:30 AM.

  15. #15
    Join Date
    Mar 2007
    Posts
    946
    For the css id logo remove "bottom, position and right" and then add float: right. Try to stay away from using top, left, right and position. There are cases where it should be used, but you should try to steer clear.

    After you added the float right then take a look at this because you will need to clear the float right so it stays in the green box.

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