www.webdeveloper.com
Results 1 to 3 of 3

Thread: Height Issue

  1. 05-29-2010, 06:02 PM #1
    omokonko
    omokonko is offline Registered User
    Join Date
    May 2010
    Posts
    3

    Height Issue

    Hello People,

    I am in the process of finishing a site and i'm having a few issues that need working out.

    Firstly I wanted the content background to stretch the full length of the screen. So I set the height to 100% on my content div's, which I would have believed would have achieved my desired outcome. However it seems to never reach the bottom of the page and the beige and white backgrounds never seem to match in length.

    Here's a link to the dummy site.

    www.amberplumbers.co.uk/dummy.html

    and here's my code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
				<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
				<head>
				<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
				<title>Amber Plumbers - System Health Check</title>
				<link rel="stylesheet" type="text/css" href="stylesheet.css" />
				</head>
				<body>
				<div id="maincontent">
				<div id="wrapper">
				<div id="header">
				<div id="logo"></div>
				<div id="menu">
				<div id="navigation">
				<ul>
				<li><a href="index.html"><img src="images/home.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></li>
				<li><a href="landlords.html"><img src="images/domestic.png" alt="landlords" /></a></li>
				<li><a href="company_benefits.html"><img src="images/commercial.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></li>
				</ul>
				<div id="bottom_nav">
				<ul>
				<li><a href="about_us.html"><img src="images/about_us.png" alt="about us" /></a></li>
				<li><a href="contact_us.php"><img src="images/contact_us.png" alt="contact us" /></a></li>
				</ul>
				</div>
				</div>
				</div>
				<div id="info">
				<ul>
				<li><img src="images/phone.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /><span class="num">07545 070 406<br />
				<span class="num_txt">(opening hours 8:00am - 8:00pm)</span></span></li>
				<li><img src="images/email.png" alt="** PLEASE DESCRIBE THIS IMAGE **" />cvinsonuk@yahoo.co.uk</li>
				</ul>
				</div>
				</div>
				<div id="flash"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/%20cabs/flash/swflash.cab#version=6,0,40,0" width="966" height="170" id="mymoviename"><param name="movie" value="animations/final_ban_nav.swf" />
				<param name="quality" value="high" />
				<param name="bgcolor" value="#ffffff" />
				<embed src="animations/final_ban_nav.swf" quality="high" bgcolor="#FFFFFF" width="966" height="170" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object></div>
				<div id="bat_con">
						<div id="tabs">
							<div id="tab">
							<ul class="nav">
								<li><a href="landlords.html"><img src="images/landlords.jpg"></a></li>
								<li><a href="index.html"><img src="images/prevention.jpg"></a></li>
								<li><a href="company_benefits.html"><img src="images/benefits.jpg"></a></li>
								<li><a href="areas_covered.html"><img src="images/areas.jpg"></a></li>
							</ul>
							</div>
				<div id="footer">
				<ul>
				<li><img src="images/log_01.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></li>
				<li><img src="images/log_02.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></li>
				<li><img src="images/log_03.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></li>
				<li><img src="images/log_04.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></li>
				<li><img src="images/log_05.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></li>
				</ul>
				<p>Amber Plumbers Ltd Company registration number 7156663, Gas Safe registration number 516533.</p>
				</div>
				</div>
				</div>
				</div>
				</body>
				</html>
    and here's the css:


    Code:
    html, body {
margin : 0;
padding : 0;
font-family : arial, verdana, sans-serif;
background-color : #ff9600;
background-image : url(images/background.gif);
background-repeat : repeat-x;
height : 100%;
}
#maincontent {
width : 985px;
margin-right : auto;
margin-left : auto;
min-height : 100%;
background-color : #fac578;
}

#wrapper {
width : 966px;
margin-right : auto;
margin-left : auto;
height : 100%;
}

#header {
height : 140px;
width : 966px;
background-image : url(images/head_back.gif);
background-repeat : repeat-x;
position : relative;
background-color : #e8e7e6;
clear : both;
}
#logo {
width : 190px;
height : 121px;
background-image : url(images/logo.png);
float : left;
}
#menu {
width : 415px;
height : 121px;
float : left;
}
#navigation li {
display : inline;
margin : 0;
padding : 0;
outline : none;
}
#navigation {
float : right;
margin-top : 40px;
margin-left : 49px;
}
#navigation a {
float : left;
margin : 0;
padding : 0 0 0 0;
text-decoration : none;
outline : none;
}
ul {
display : inline;
}
.num {
position : relative;
bottom : 4px;
}
.num_txt {
font-size : 15px;
position : relative;
left : 54px;
bottom : 8px;
}
#bottom_nav {
margin-left : 44px;
}
#info {
width : 359px;
height : 121px;
float : right;
color : #5c5956;
font-size : 22px;
display : block;
margin-top : 10px;
}
#info_cont li {
float : left;
color : #5c5956;
font-size : 22px;
display : block;
margin-top : 30px;
position : relative;
left : 15px;
}
.head_con {
position : relative;
left : 35px;
color : #ed8c00;
text-decoration : underline;
}
#inf_con {
position : relative;
top : 10px;
}
#info ul {
list-style : none;
}
#pad {
padding-left : 8px;
}
#flash {
width : 966px;
height : 170px;
margin-top : 5px;
float : left;
background-color : #000;
}
#tabs {
width : 966px;
height : 100%;
margin-top : 5px;
float : left;
background-color : #e8e7e6;
background-image : url(images/tab_back.gif);
background-repeat : repeat-x;
}
#bat_con {
width : 966px;
min-height : 100%;
margin-top : 5px;
float : left;
background-color : #f5f5f3;
background-image : url(images/con_back_1.gif);
background-repeat : repeat-x;
}
#tabs_dom {
width : 961px;
height : 321px;
margin-top : 5px;
float : left;
background-color : #000;
background-image : url(images/tab_back.gif);
background-repeat : repeat-x;
}
#dom_con {
width : 960px;
height : 320px;
margin-top : 5px;
float : left;
position : relative;
}
#bot_con {
width : 961px;
height : 100px;
background-image : url(images/bot_con.gif);
background-repeat : repeat-y;
position : relative;
top : 690px;
}
#tab li {
display : inline;
margin-right : 10px;
padding : 0;
outline : none;
}
#bat_con li {
display : inline;
padding : 0;
outline : none;
}
.main_img {
position : relative;
right : 30px;
}
.nav {
position : relative;
right : 27px;
}
.main_img_lan {
position : relative;
right : 15px;
}
.main_img_hel {
position : relative;
right : 31px;
}
.main_img_bat {
position : relative;
right : 18px;
}
.main_img_sol {
position : relative;
right : 35px;
}
.main_img_area {
position : relative;
right : 30px;
}
.main_img_central {
position : relative;
right : 33px;
}
.main_img_benefit {
position : relative;
right : 15px;
}
.col {
color : #ed8c00;
}
.con_head {
color : #ed8c00;
text-decoration : underline;
}
#pag_con ul {
display : block;
}
.pag_con {
width : 930px;
padding : 33px;
margin-top : 325px;
margin-left : 15px;
}
.pag_con_benefit {
width : 930px;
padding : 33px;
margin-top : 205px;
margin-left : 15px;
}
.pag_con_central {
width : 930px;
padding : 33px;
margin-top : 205px;
margin-left : 15px;
}
.pag_con_bath {
width : 930px;
padding : 33px;
margin-top : 25px;
margin-left : 15px;
}
.pag_con_lan {
width : 930px;
padding : 33px;
margin-left : 15px;
margin-top : 225px;
}
.contact_1 {
width : 330px;
height : 500px;
float : left;
margin-top : 20px;
}
.contact_2 {
width : 310px;
height : 500px;
float : left;
margin-top : 95px;
}
.contact_3 {
width : 218px;
height : 500px;
float : left;
margin-top : 85px;
}
.contact_3 li {
float : right;
margin-top : 10px;
}
#list li {
display : block;
padding-top : 10px;
padding-left : 20px;
}
#list_a li {
display : block;
padding-left : 20px;
}
#list_a ul {
width : 150px;
float : left;
}
#are_co {
clear : both;
margin-top : 350px;
}
#tab {
list-style : none;
margin-top : 25px;
margin-left : -4px;
float : right;
}
#tab_us {
list-style : none;
margin-top : 25px;
margin-left : -4px;
float : right;
}
#cont_back {
background-color : #d2d2d1;
}
#tab_us_ten {
list-style : none;
margin-top : 25px;
margin-left : -4px;
float : right;
position : relative;
right : 55px;
top : 65px;
}
#tab_us li {
margin-right : 10px;
padding : 0;
outline : none;
}
#tab_cont {
list-style : none;
}
#tab_cont li {
outline : none;
}
.list_are {
width : 200px;
}
.amb {
color : #ed8c00;
margin-top : 45px;
}
#footer li {
display : inline;
outline : none;
}
#footer {
text-align : center;
margin-top : 6px;
outline : none;
float : left;
position : relative;
left : 110px;
}
a:link, a:visited {
text-decoration : none;
color : #ffffff;
}
a img {
border : none;
}
a {
outline : none;
}
.open {
color : #5c5956;
position : relative;
left : 35px;
}
.leftco li {
position : relative;
margin-left : 56px;
top : 40px;
}
.center {
text-align : center;
}
    Reply With Quote Reply With Quote
  2. 05-30-2010, 12:33 AM #2
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    #maincontent_sy {overflow:hidden;}
    At least 98% of internet users' DNA is identical to that of chimpanzees
    Reply With Quote Reply With Quote
  3. 05-30-2010, 02:24 AM #3
    omokonko
    omokonko is offline Registered User
    Join Date
    May 2010
    Posts
    3
    Quote Originally Posted by Fang View Post
    #maincontent_sy {overflow:hidden;}
    Hey, thanks for the reply. This seems to have worked perfectly. Excellent.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  

Forum Rules

 HTML5 Development Center



Recent Articles