Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2008
    Location
    Manchester, England
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image not covering whole background

    Hi there,

    so i've pretty much finished a design that I came up with last night after a full day of coding, however there is one issue with the site that I am unable to resolve.

    The site currently looks like this http://easycaptures.com/3057465363

    As you can see the background of the main body of text doesn't extend all the way across the page. It is this issue that I was hoping somebody may be able to help me with.

    Due to the layout of the page my code is slightly convoluted, but this is the only way that i could work out to do it, so maybe if anyone knows a better method of achieving the same result (full colour'd backgrounds but text wrapped to a certain width) then please let me know.

    Onto the XHTML and CSS then.

    Code:
    <div id="body_background">
    
                    <div id="body_wrapper">
    
    		        <div id="body_main">
    
    			<h1>Check out my latest work..</h1>
    
    			         <div id="body_text">
    
                                    <h2>The Bricklayers Arms</h2>
    				<h3>March 2009</h3>
    This is the way i have formatted the page, so that there is nothing in the background div, but it is there to colour the background, and thus be used for an image running across the x axis.

    The CSS used is:

    Code:
    /* Body Layout */
    
    #body_background{
    		background: url(images/body_background.jpg) repeat-x;
    		background: #efe7c5;
    		}
    I have done the same thing for the header, where the logo is currently placed you can see a slight gradient in the blue towards the top, and i had no issues. The body however is something else, it just won't work!

    Any help would be greatly appreciated, and if you need to see more code just let me know and ill affix more.

    Tebbott

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Without a link, it's pretty hard to tell, but I'd guess that this would work:

    Code:
    #body_background{
    	background: url(images/body_background.jpg) repeat-x;
    	background: #efe7c5;
            width:100%;
    		}

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Tebbott,
    It's hard to tell from a cap but it seems your background image should not be on #body_background. Should be on whatever div has that background color. That's the only way your image is going to repeat across the full page.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    May 2008
    Location
    Manchester, England
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the speedy responses guys. Much appreciated.

    I have removed the #body_background div so the site currently just has a single colour covering the background. I will post the full code in the hope that you are able to fully see how the site is coded and possibly come up with a solution.

    With response to Excavator; the body colour is specified in the body rule at the top of the css. When i try adding the image here it stays at the top of the page so you are only able to see a small ammount of it in the body area of the page.

    Regards

    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>Floating Island | Website and Graphic Design</title>
    <link href="floating_island.css" rel="stylesheet" type="text/css" />
    
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="robots" content="all" />
    <meta name="Author" content="Andrew Tebbott" />
    <meta name="description" content="Floating Island Design Homepage" />
    <meta name="keyword" content="Floating Island Design Homepage"/>
    
    </head>
    
    <body id="homepage">
    
    <div id="logo_background">
    
    <div id="logo">
    
    	<h1>floating island</h1>
    
    	<img class="island" src="images/side_logo.jpg" width="305" height="163" alt="vector graphic" />
    
    </div>
    
    </div> <!-- end of logo_background div -->
    
    	<div id="menu_background">
    
    	<div id="topmenu">
    
    		<ul>
    	  		<li id="nav-home"><a href="index.htm"><span>Home</span></a></li>
    	   		<li id="nav-portfolio"><a href="portfolio.htm"><span>Portfolio</span></a></li>
    	   		<li id="nav-blog"><a href="blog.htm"><span>Blog</span></a></li>
    	   	</ul>
    
    	</div> <!-- end of topmenu div -->
    
    	</div>
    
    		<div id="headline_wrapper">
    
    		<div id="headline">
    
    			<h2>Welcome to this amazing display of beautiful web design</h2>
    
    			<p>I'm a designer that aims to create vibrant and detailed designs while keeping the webstandards and usability aspects in mind.</p>
    
    		</div> <!-- end of headline div -->
    
    		</div>
    
    		<div id="body_wrapper">
    
    			<div id="body_main">
    
    				<h1>Check out my latest work..</h1>
    
    				<div id="body_text">
    
    					<h2>The Bricklayers Arms</h2>
    					<h3>March 2009</h3>
    
    					<p class="last">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis </p>
    
    					<a href="http://www.theorangetreealtrincham.co.uk/bricklayers/index.htm" title="Click to visit the site">Click here to visit the site</a>
    
    				</div>
    
    				<div id="body_img">
    
    					<img class="web_preview" src="images/bricklayers.jpg" width="250" height="166" alt="the bicklayers arms website preview" />
    
    				</div>
    
    
    
    				<div id="body_text">
    
    					<h2 class="second_site">The Bricklayers Arms</h2>
    					<h3>March 2009</h3>
    
    					<p class="last">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis </p>
    
    					<a href="http://www.theorangetreealtrincham.co.uk/bricklayers/index.htm" title="Click to visit the site"></a>
    
    				</div>
    
    				<div id="body_img">
    
    					<img class="web_preview" src="images/bricklayers.jpg" width="250" height="166" alt="the bicklayers arms website preview" />
    
    				</div>
    
    				<div id="blog_area">
    
    				<h1>and, my latest thoughts.</h1>
    
    				<h4>Creating a fantastic homepage for all my online design</h4>
    				<h5>March 2009 // 22nd</h5>
    
    				<p class="blog_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis molestie metus. Nulla justo. Sed id est sit amet magna venenatis faucibus. Cras vitae lorem. Aenean placerat pharetra ipsum. Mauris sapien justo, rhoncus sed, rutrum in, tristique vitae, nisl. Mauris sem lacus, posuere et, hendrerit sit amet, scelerisque vel, felis. In vitae tortor. Sed lacinia, ligula id tempor porta, ipsum nulla dignissim neque, sed dictum mauris nisl in tellus. Donec adipiscing leo id urna. Donec eu sem sed nisi rhoncus malesuada. Maecenas tincidunt. Donec tincidunt vehicula magna. Vestibulum massa lectus, accumsan et, fermentum eget, eleifend ut, augue. Etiam nec tortor id est congue consequat. Nulla facilisis, sapien eu aliquet</p>
    
    				<h4>Creating a fantastic homepage for all my online design</h4>
    				<h5>March 2009 // 22nd</h5>
    
    				<p class="blog_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis molestie metus. Nulla justo. Sed id est sit amet magna venenatis faucibus. Cras vitae lorem. Aenean placerat pharetra ipsum. Mauris sapien justo, rhoncus sed, rutrum in, tristique vitae, nisl. Mauris sem lacus, posuere et, hendrerit sit amet, scelerisque vel, felis. In vitae tortor. Sed lacinia, ligula id tempor porta, ipsum nulla dignissim neque, sed dictum mauris nisl in tellus. Donec adipiscing leo id urna. Donec eu sem sed nisi rhoncus malesuada. Maecenas tincidunt. Donec tincidunt vehicula magna. Vestibulum massa lectus, accumsan et, fermentum eget, eleifend ut, augue. Etiam nec tortor id est congue consequat. Nulla facilisis, sapien eu aliquet</p>
    
    				</div>
    
    			</div>
    
    
    		<div id="body_side">
    
    			<h1>About me</h1>
    
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis molestie metus. Nulla justo. Sed id est sit amet magna venenatis faucibus. Cras vitae lorem. Aenean placerat pharetra ipsum. Mauris sapien justo, rhoncus sed, rutrum in, tristique vitae, nisl. Mauris sem lacus, posuere et, hendrerit sit amet, scelerisque vel, felis. In vitae tortor. Sed lacinia, ligula id tempor porta, ipsum nulla dignissim neque, sed dictum mauris nisl in tellus. Donec adipiscing leo id urna. Donec eu sem sed nisi rhoncus malesuada. Maecenas tincidunt. Donec tincidunt vehicula magna. Vestibulum massa le</p>
    
    			<h1>What i do</h1>
    
    			<h2>Web Design</h2>
    
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis molestie metus. Nulla justo. Sed id est sit amet magna venenatis faucibus. Cras vitae lorem. Aenean placerat pharetra ipsum.</p>
    
    			<h2>Graphic Design</h2>
    
    			<p>Mauris sapien justo, rhoncus sed, rutrum in, tristique vitae, nisl. Mauris sem lacus, posuere et, hendrerit sit amet, scelerisque vel, felis. In vitae tortor. Sed lacinia, ligula id tempor porta, ipsum nulla dignissim neque, sed dictum mauris nisl in tellus. Donec adipiscing leo id urna. Donec eu sem sed nisi rhoncus malesuada. Maecenas tincidunt. Donec tincidunt vehicula magna. Vestibulum massa le</p>
    
    			<h1>Contact me</h1>
    
    		</div>
    
    		</div>
    
    			<div id="footer_background">
    
    				<div id="footer_wrapper">
    
    					<div id="footer">
    
    					<p class="left">Ideas, Passion and Talent since 1987</p>
    
    					<p class="right">Copyright &copy; Andrew Tebbott 2009. All rights reserved</p>
    
    					<p class="right">| HTML | CSS |</p>
    
    					</div>
    
    				</div>
    
    			</div>
    
    
    </body>
    
    </html>
    And the CSS:

    Code:
    /* General Rules */
    
    *	 	{
    		margin: 0; 
    		padding: 0;
    		}
    
    body 		{
    		background-color: #efe7c5; 
    		color: #574436; 
    		font-family: "Arial", sans-serif; 
    		font-size: 12px;
    		}
    		
    #logo		{
    		width: 950px;
    		margin: 0px auto;
    		height: 150px;
    		padding-top: 40px;
    		}
    
    #logo h1 	{
    		height: 130px;	
    		background: url(images/logo.jpg) no-repeat; 
    		text-indent: -9999px; 
    		overflow: hidden;
    		}
    
    #logo_background {
    		background-color: #48aadc;
    		background: url(images/logo_background.jpg) repeat-x;
    		}
    		
    
    /* Menu */
    
    #menu_background{
    		height: 35px;
    		background-color: #3e3026;
    		border-top: 1px solid #ffffff;
    		}
    
    #topmenu	{
     		text-align:right;
     		width: 950px;
     		margin: 0px auto;
    		}
    
    #topmenu ul	{
    		
     		list-style-type: none;
     		margin: 0px auto;
     		padding-top: 14px;
     		font-size: 14px;
     		color: #efe7c5;
    		}
    
    #topmenu li	{
     		display:inline;
     		}
    
    #topmenu a, #topmenu a:visited{
     		text-align:left;
     		text-decoration:none;
     		padding: 10px 15px 5px 15px;
     		color: #efe7c5;
     		background:#3e3026;
     		}
    
    #topmenu a:hover{
     		color:#efe7c5;
     		background:#372a20;
     		}
     		
    #homepage #nav-home a,
    #portfoliopage #nav-portfolio a,
    #blogpage #nav-blog a
    		{
     		color:#efe7c5;
     		background:#4891cf;
    		}
    
    /* Headline */
    		
    #headline_wrapper {
    		background-color: #574436;
    		border-top: 1px solid #372a20;
    		height: 100%;
    		}
    		
    #headline	{
    		width: 950px;
    		margin: 0px auto;
    		}
    		
    #headline h2	{
    		margin: 20px 0px 20px 48px;
    		padding-bottom: 60px;
    		color: #efe7c5;
    		font-size: 24px;
    		width: 450px;
    		background: url(images/headline.jpg) no-repeat; 
    		text-indent: -9999px; 
    		overflow: hidden;
    		float: left;
    		}
    		
    #headline p	{
    		width: 450px;
    		padding: 0px 0px 30px 55px;
    		color: #efe7c5;
    		font-size: 20px;
    		text-align: justify;
    		}
    		
    img.island	{
    		margin-top: 110px;
    		margin-left: 610px;
    		position: relative;
    		}
    		
    
    /* Body Layout */
    
    #body_wrapper	{
    		width: 950px;
    		margin: 0px auto;
    		
    		}
    
    #body_main 	{
    		width: 600px;
    		
    		float: left;
    		}
    		
    		
    #body_side	{
    		width: 350px;
    		
    		float: right;
    		}
    		
    #body_text	{
    		width: 250px;
    		float: right;
    		}
    		
    #body_img	{
    		width: 305px;
    		float: left;
    		}
    		
    		
    /* Body Main */
    
    #body_main h1	{
    		color: #48aadc;
    		margin: 30px 20px 40px 55px;
    		border-bottom: 1px solid #48aadc;
    		clear: both;
    		}
    		
    #body_main h2	{
    		color: #efe7c5;
    		background-color: #574436;
    		margin-right: 20px;
    		margin-bottom: 10px;
    		padding: 2px 5px;
    		font-size: 18px;
    		}
    		
    #body_main h3	{
    		margin-right: 20px;
    		border-bottom: 1px solid #574436;
    		margin-bottom: 10px;
    		}
    		
    		
    #body_text p	{
    		width: 230px;
    		margin-bottom: 10px;
    		}
    		
    p.last 		{
    		padding-bottom: 10px;
    		border-bottom: 1px solid #574436;
    		}
    		
    #body_img img	{
    		width: 250px;
    		margin-left: 55px;
    		margin-bottom: 30px;
    		border: 5px solid #48aadc;
    		}
    		
    #body_text a	{
    		color: #48aadc;
    		text-decoration: none;
    		margin-top: 30px;
    		}
    		
    h2.second_site	{
    		margin-top: 25px;
    		}
    		
    
    #body_main h4	{
    		color: #efe7c5;
    		background-color: #574436;
    		margin-right: 20px;
    		margin-left: 55px;
    		margin-bottom: 5px;
    		margin-top: 30px;
    		padding: 2px 5px;
    		font-size: 16px;
    		}
    		
    #body_main h5	{
    		color: #574436;
    		border-bottom: 1px solid #574436;
    		margin-right: 20px;
    		margin-left: 55px;
    		margin-bottom: 30px;
    		margin-top: 0px;
    		padding: 2px 5px;
    		font-size: 14px;
    		}
    		
    #blog_area p	{
    		margin: 10px 20px 20px 55px;
    		text-align: justify;
    		}
    		
    		
    /* Body Side */
    
    
    #body_side h1	{
    		color: #48aadc;
    		margin: 30px 20px 40px 25px;
    		border-bottom: 1px solid #48aadc;
    		clear: both;
    		}
    		
    #body_side h2	{
    		color: #efe7c5;
    		background-color: #574436;
    		margin-right: 20px;
    		margin-left: 25px;
    		margin-bottom: 20px;
    		margin-top: 20px;
    		padding: 2px 5px;
    		font-size: 18px;
    		}
    		
    #body_side p	{
    		margin-right: 20px;
    		margin-left: 25px;
    		margin-bottom: 10px;
    		text-align: justify;
    		}
    		
    
    /* Footer */
    		
    		
    #footer_background {
    		background: #574436;
    		height: 80px;
    		clear: both;
    		margin-top: 20px;
    		border-top: 1px solid #48a9dc;
    		}
    		
    #footer_wrapper {
    		width: 900px;
    		background: #574436;
    		margin: 0px auto 0px auto;
    		color: white;
    		font-size: 10px;
    		}
    		
    .left		{
    		width: 200px;
    		float: left;
    		text-align: left;
    		padding: 20px 0px 0px 30px ;
    		}
    		
    .right		{
    		float: right;
    		width: 400px;
    		text-align: right;
    		padding: 20px 0px 0px 0px ;
    		}
    Last edited by Tebbott; 03-31-2009 at 09:40 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hard to tell how to make it work since I haven't seen your image but something like this might do -
    Code:
    body 		{
    		background: #efe7c5 url(images/body_background.jpg) repeat-x 150px; 
    		color: #574436; 
    		font: 12px "Arial", sans-serif; 
    		}
    Adjust the y axis px, highlighted in red, to fit.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    May 2008
    Location
    Manchester, England
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ohhh so close!!

    http://easycaptures.com/3264008165

    For some reason, even though i have fiddled with the y-axis height, it is stuck in the position visible in the image, a little way down the page. The css is below.

    Code:
    body {
    		background: #efe7c5 url(images/body_background.jpg) repeat-x 1px;
    		color: #574436; 
    		font-family: "Arial", sans-serif; 
    		font-size: 12px;
    		}
    As you can see, the y-axis is set to 1px, however when it is changed to 150px the result is the same. It is only when i change the value to 0px does the image disappear back to the top of the page, behind the rest of the site.

    So so close!

  • #7
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    See if this works for you: Just substitute the pink background for your image.

    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>Floating Island | Website and Graphic Design</title>
    <link href="floating_island.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="robots" content="all" />
    <meta name="Author" content="Andrew Tebbott" />
    <meta name="description" content="Floating Island Design Homepage" />
    <meta name="keyword" content="Floating Island Design Homepage"/>
    <style type="text/css">
    html, body {
    	height: 100%;
    	font-family: Arial, sans-serif;
    	font-size:12px;
    	background-color: #efe7c5;
    	color: #574436;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	width: 100%;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -80px;
    	text-align: left;
    	background:#efe7c5;
    }
    
    #footer, #push {
    	clear:both;
    	width:100%;
    	height: 80px;
    	background: #574436;
    	font-size:10px;
    	text-align:center;
    	border-top: 1px solid #48a9dc;
    	color:#fff;
    }
    #push {
    	background:none;
    }
    #logo		{
    		width: 950px;
    		margin: 0px auto;
    		height: 150px;
    		padding-top: 40px;
    		}
    
    #logo h1 	{
    		height: 130px;	
    		background: url(images/logo.jpg) no-repeat; 
    		text-indent: -9999px; 
    		overflow: hidden;
    		}
    
    #logo_background {
    		background-color: #48aadc;
    		background:#ccc;
    		}
    /* Menu */
    
    #menu_background {
    	height: 35px;
    	background-color: #3e3026;
    	border-top: 1px solid #ffffff;
    }
    #topmenu {
    	text-align:right;
    	width: 950px;
    	margin: 0px auto;
    }
    #topmenu ul {
    	list-style-type: none;
    	margin: 0px auto;
    	padding-top: 14px;
    	font-size: 14px;
    	color: #efe7c5;
    }
    #topmenu li {
    	display:inline;
    }
    #topmenu a, #topmenu a:visited {
    	text-align:left;
    	text-decoration:none;
    	padding: 10px 15px 5px 15px;
    	color: #efe7c5;
    	background:#3e3026;
    }
    #topmenu a:hover {
    	color:#efe7c5;
    	background:#372a20;
    }
    #homepage #nav-home a, #portfoliopage #nav-portfolio a, #blogpage #nav-blog a {
    	color:#efe7c5;
    	background:#4891cf;
    }
    /* Headline */
    		
    #headline_wrapper {
    	background-color: #574436;
    	border-top: 1px solid #372a20;
    }
    #headline {
    	width: 950px;
    	margin: 0px auto;
    }
    #headline h2 {
    	margin: 20px 0px 20px 48px;
    	padding-bottom: 60px;
    	color: #efe7c5;
    	font-size: 24px;
    	width: 450px;
    	background: url(images/headline.jpg) no-repeat;
    	text-indent: -9999px;
    	overflow: hidden;
    	float: left;
    }
    #headline p {
    	width: 450px;
    	padding: 0px 0px 30px 55px;
    	color: #efe7c5;
    	font-size: 20px;
    	text-align: justify;
    }
    img.island {
    	margin-top: 110px;
    	margin-left: 610px;
    	position: relative;
    }
    /* Body Layout */
    #body_background {
    	background: #CC33CC;
    	width:100%;
    }
    #body_wrapper {
    	width: 950px;
    	margin: 0px auto;
    	background: #CCFF00;
    	height:100%;
    }
    #body_main {
    	width: 600px;
    	float: left;
    }
    #body_side {
    	width: 350px;
    	float: right;
    }
    #body_text {
    	width: 250px;
    	float: right;
    }
    #body_img {
    	width: 305px;
    	float: left;
    }
    /* Body Main */
    
    #body_main h1 {
    	color: #48aadc;
    	margin: 30px 20px 40px 55px;
    	border-bottom: 1px solid #48aadc;
    	clear: both;
    }
    #body_main h2 {
    	color: #efe7c5;
    	background-color: #574436;
    	margin-right: 20px;
    	margin-bottom: 10px;
    	padding: 2px 5px;
    	font-size: 18px;
    }
    #body_main h3 {
    	margin-right: 20px;
    	border-bottom: 1px solid #574436;
    	margin-bottom: 10px;
    }
    #body_text p {
    	width: 230px;
    	margin-bottom: 10px;
    }
    p.last {
    	padding-bottom: 10px;
    	border-bottom: 1px solid #574436;
    }
    #body_img img {
    	width: 250px;
    	margin-left: 55px;
    	margin-bottom: 30px;
    	border: 5px solid #48aadc;
    }
    #body_text a {
    	color: #48aadc;
    	text-decoration: none;
    	margin-top: 30px;
    }
    h2.second_site {
    	margin-top: 25px;
    }
    #body_main h4 {
    	color: #efe7c5;
    	background-color: #574436;
    	margin-right: 20px;
    	margin-left: 55px;
    	margin-bottom: 5px;
    	margin-top: 30px;
    	padding: 2px 5px;
    	font-size: 16px;
    }
    #body_main h5 {
    	color: #574436;
    	border-bottom: 1px solid #574436;
    	margin-right: 20px;
    	margin-left: 55px;
    	margin-bottom: 30px;
    	margin-top: 0px;
    	padding: 2px 5px;
    	font-size: 14px;
    }
    #blog_area p {
    	margin: 10px 20px 20px 55px;
    	text-align: justify;
    }
    /* Body Side */
    
    
    #body_side h1 {
    	color: #48aadc;
    	margin: 30px 20px 40px 25px;
    	border-bottom: 1px solid #48aadc;
    	clear: both;
    }
    #body_side h2 {
    	color: #efe7c5;
    	background-color: #574436;
    	margin-right: 20px;
    	margin-left: 25px;
    	margin-bottom: 20px;
    	margin-top: 20px;
    	padding: 2px 5px;
    	font-size: 18px;
    }
    #body_side p {
    	margin-right: 20px;
    	margin-left: 25px;
    	margin-bottom: 10px;
    	text-align: justify;
    }
    .left {
    	width: 200px;
    	float: left;
    	text-align: left;
    	padding: 20px 0px 0px 30px;
    }
    .right {
    	float: right;
    	width: 400px;
    	text-align: right;
    	padding: 20px 0px 0px 0px;
    }
    </style>
    </head>
    <body id="homepage">
    <div id="wrapper">
    <div id="logo_background">
      <div id="logo">
        <h1>floating island</h1>
        <img class="island" src="side_logo.jpg" width="305" height="163" alt="vector graphic" /> </div></div>
      <div id="menu_background">
        <div id="topmenu">
          <ul>
            <li id="nav-home"><a href="index.htm"><span>Home</span></a></li>
            <li id="nav-portfolio"><a href="portfolio.htm"><span>Portfolio</span></a></li>
            <li id="nav-blog"><a href="blog.htm"><span>Blog</span></a></li>
          </ul>
        </div>
        <!-- end of topmenu div -->
      </div>
      <div id="headline_wrapper">
        <div id="headline">
          <h2>Welcome to this amazing display of beautiful web design</h2>
          <p>I'm a designer that aims to create vibrant and detailed designs while keeping the webstandards and usability aspects in mind.</p>
        </div>
        <!-- end of headline div -->
      </div>
      <div id="body_background">
        <div id="body_wrapper">
          <div id="body_main">
            <h1>Check out my latest work..</h1>
            <div id="body_text">
              <h2>The Bricklayers Arms</h2>
              <h3>March 2009</h3>
              <p class="last">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis </p>
              <a href="http://www.theorangetreealtrincham.co.uk/bricklayers/index.htm" title="Click to visit the site">Click here to visit the site</a> </div>
            <div id="body_img"> <img class="web_preview" src="images/bricklayers.jpg" width="250" height="166" alt="the bicklayers arms website preview" /> </div>
            <div id="body_text">
              <h2 class="second_site">The Bricklayers Arms</h2>
              <h3>March 2009</h3>
              <p class="last">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis </p>
              <a href="http://www.theorangetreealtrincham.co.uk/bricklayers/index.htm" title="Click to visit the site"></a> </div>
            <div id="body_img"> <img class="web_preview" src="images/bricklayers.jpg" width="250" height="166" alt="the bicklayers arms website preview" /> </div>
            <div id="blog_area">
              <h1>and, my latest thoughts.</h1>
              <h4>Creating a fantastic homepage for all my online design</h4>
              <h5>March 2009 // 22nd</h5>
              <p class="blog_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis molestie metus. Nulla justo. Sed id est sit amet magna venenatis faucibus. Cras vitae lorem. Aenean placerat pharetra ipsum. Mauris sapien justo, rhoncus sed, rutrum in, tristique vitae, nisl. Mauris sem lacus, posuere et, hendrerit sit amet, scelerisque vel, felis. In vitae tortor. Sed lacinia, ligula id tempor porta, ipsum nulla dignissim neque, sed dictum mauris nisl in tellus. Donec adipiscing leo id urna. Donec eu sem sed nisi rhoncus malesuada. Maecenas tincidunt. Donec tincidunt vehicula magna. Vestibulum massa lectus, accumsan et, fermentum eget, eleifend ut, augue. Etiam nec tortor id est congue consequat. Nulla facilisis, sapien eu aliquet</p>
              <h4>Creating a fantastic homepage for all my online design</h4>
              <h5>March 2009 // 22nd</h5>
              <p class="blog_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis molestie metus. Nulla justo. Sed id est sit amet magna venenatis faucibus. Cras vitae lorem. Aenean placerat pharetra ipsum. Mauris sapien justo, rhoncus sed, rutrum in, tristique vitae, nisl. Mauris sem lacus, posuere et, hendrerit sit amet, scelerisque vel, felis. In vitae tortor. Sed lacinia, ligula id tempor porta, ipsum nulla dignissim neque, sed dictum mauris nisl in tellus. Donec adipiscing leo id urna. Donec eu sem sed nisi rhoncus malesuada. Maecenas tincidunt. Donec tincidunt vehicula magna. Vestibulum massa lectus, accumsan et, fermentum eget, eleifend ut, augue. Etiam nec tortor id est congue consequat. Nulla facilisis, sapien eu aliquet</p>
            </div>
          </div>
          <div id="body_side">
            <h1>About me</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis molestie metus. Nulla justo. Sed id est sit amet magna venenatis faucibus. Cras vitae lorem. Aenean placerat pharetra ipsum. Mauris sapien justo, rhoncus sed, rutrum in, tristique vitae, nisl. Mauris sem lacus, posuere et, hendrerit sit amet, scelerisque vel, felis. In vitae tortor. Sed lacinia, ligula id tempor porta, ipsum nulla dignissim neque, sed dictum mauris nisl in tellus. Donec adipiscing leo id urna. Donec eu sem sed nisi rhoncus malesuada. Maecenas tincidunt. Donec tincidunt vehicula magna. Vestibulum massa le</p>
            <h1>What i do</h1>
            <h2>Web Design</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisl odio, consectetur ac, condimentum sit amet, mollis ut, quam. Etiam sit amet magna. Integer mattis molestie metus. Nulla justo. Sed id est sit amet magna venenatis faucibus. Cras vitae lorem. Aenean placerat pharetra ipsum.</p>
            <h2>Graphic Design</h2>
            <p>Mauris sapien justo, rhoncus sed, rutrum in, tristique vitae, nisl. Mauris sem lacus, posuere et, hendrerit sit amet, scelerisque vel, felis. In vitae tortor. Sed lacinia, ligula id tempor porta, ipsum nulla dignissim neque, sed dictum mauris nisl in tellus. Donec adipiscing leo id urna. Donec eu sem sed nisi rhoncus malesuada. Maecenas tincidunt. Donec tincidunt vehicula magna. Vestibulum massa le</p>
            <h1>Contact me</h1>
          </div>
        </div>
        <div id="push"></div>
      </div>
    </div>
    <!--end wrapper -->
    <div id="footer">
      <p class="left">Ideas, Passion and Talent since 1987</p>
      <p class="right">Copyright &copy; Andrew Tebbott 2009. All rights reserved</p>
      <p class="right">| HTML | CSS |</p>
    </div>
    </body>
    </html>
    Note: This is REALLY messed up in IE. You're putting the logo pic of height 163px into a logo div with height 150px and 40px padding.

  • #8
    New Coder
    Join Date
    May 2008
    Location
    Manchester, England
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for all your responses. Not sure why what was happening was happening, however i have managed to get it positioned up correctly now.

    I just added: background-position: 0% 41.5%; to what you suggested excavator and it all works nicely.

    Again, many thanks.

    Tebb


  •  

    Posting Permissions

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