Jump to content

Background on <HTML> positioning problem

pealo86

By pealo86
in CSS Help

 Share

Recommended Posts

pealo86 Member

pealo86

Posted
Posted

This is driving me nuts, I had the exact same problem about a year ago and couldn't find a solution so I just gave up.

 

I'm trying to position a background image on the bottom of the HTML element, but it only goes so far down as 'the fold'. I've tried

 

html, body { height:100%; }

 

But no luck, I've even tried the same technique as here:

http://www.dave-woods.co.uk/?p=144

 

But it still won't fix it!

 

Does anyone know what I'm doing wrong? Here is my code:

Code:

/* general //////////////////////////////////////////////////////////////////////////*/

html, body {
    height: 100%;
}

html {
    background: #1e325e url('../image/html.jpg') no-repeat center 0;
}

body {
    background: url('../image/body.jpg') no-repeat center 100%;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #FFF;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1 {
    position: absolute;
    top: 50px;
    left: 35px;
    font-size: 20px;
    text-transform: uppercase;
}

h2, h3 {
    border-bottom: #3c4a67 dotted 1px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 16px;
}

h4 {
    font-size: 15px;
    border-bottom: #3c4a67 dotted 1px;
    padding: 10px 0;
    margin-bottom: 18px;    
}

h5 {
    font-size: 13px;
}

#page p, #page ul {
    line-height: 1.75;
    margin: 10px 0 15px;
}

a {
    color: #ffcc00;
}

strong {
    color: #ffcc00;
    font-weight: inherit;
}

#sage {
    position: absolute;
    right: 30px;
    bottom: 10px;
}

#logo {
    position: absolute;
    top: 20px;
    left: 70px;
}

#footer-logo {
    margin-left: 100px;
}





/* div id //////////////////////////////////////////////////////////////////////////*/

#wrapper {
    min-height: 100%;
}

#header {
    height: 40px;
    position: relative;
}

#header-contact {
    position: absolute;
    left: 45px;
    font-size: 160%;
    bottom: 12px;
}

#header-contact strong {
    font-size: 120%;
}

#header-contact small {
    font-size: 12px;
}

#hero {
    position: relative;
    height: 163px;
}

#hero .omega {
    height: 163px;
}

#page {
    margin-bottom: 20px;
    overflow: auto;
}

#col-left, #col-right {
    margin-top: 20px;
}

#content {
    background: url('../image/content.gif') no-repeat;
}

#content .inner, #sidebar .inner {
    padding: 20px 30px;
}

#sidebar {
    background: url('../image/sidebar.gif') no-repeat;
}

#cta-col-1 h4 {
    color: #ffcc00;
    background: url('../image/cta-col-h4-how-works.gif') no-repeat 100% 5px;
}

#cta-col-2 h4 {
    color: #0079c2;
    background: url('../image/cta-col-h4-why-trust.gif') no-repeat 100% 0;
}

#cta-col-3 {
    background: url('../image/cta-col-3.jpg') no-repeat;
    margin-top: 0;
}

#cta-col-3 h4 {
    color: #ffcc00;
    margin-top: 10px;
    background: url('../image/cta-col-h4-direction.gif') no-repeat 100% 0;
}

#footer {
    clear: both;
    padding-top: 10px;
}

#footer-contact {
    margin-top: 10px;
}

#footer-contact .inner {
    margin-left: 40px;
    line-height: 1.5;
}

#footer .btm {
}




/* div class //////////////////////////////////////////////////////////////////////////*/

.divide {
    clear: both;
    margin-top: 20px;
    overflow: auto;
}

.cta-divide {
    margin: 0;
}

.cta-col {
    background: url('../image/cta-col.gif') no-repeat;
    min-height: 435px;
    margin-top: 10px;
}

.cta-col .inner {
    padding: 10px 20px;
}

.cta-col strong {
    color: #FFF;
    font-weight: bold;
}




/* list //////////////////////////////////////////////////////////////////////////*/

#nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 535px;
    font-size: 12px;
    float: left;
}

#nav li {
    display: inline;
}

#nav li a {
    color: #FFF;
    text-decoration: none;
    width: 104px;
    height: 27px;
    padding-top: 12px;
    background: url('../image/nav-li-a.gif') no-repeat center center;
    float: left;
    text-align: center;
    margin-right: 3px;
}

#nav .active a, #nav li a:hover {
    background-image: url('../image/nav-li-a-hover.gif');
}

#page ul li {
    background: url('../image/ul-li.png') no-repeat 0 8px;
    padding-left: 10px;
}

#cta-col-3 .top {
    width: 180px;
}

#cta-col-3 .btm {
    margin-top: 150px;
}

#footer-contact ul {
    float: left;
    width: auto;
    margin-top: 10px;
}

#footer-contact ul li {
    display: inline;
    float: left;
    margin-right: 10px;
}

#footer .btm ul {
    float: left;
}

#footer .btm ul li {
    display: inline;
}

#footer .btm ul li a {
    float: left;
}





/* form //////////////////////////////////////////////////////////////////////////*/

.btn {
    border: none;
}

#quote_form {
    font-size: 16px;
    background: url('../image/frm-quick-quote.gif') no-repeat;
    padding: 15px 0 0 20px;
    position: relative;
    min-height: 218px;
}

#quote_form h3 {
    font-size: 20px;
    margin-bottom: 25px;
}

#quote_form div {
    margin-bottom: 15px;
}

#quote_form label {
    display: block;
    width: 110px;
    float: left;
    padding-right: 12px;
    text-align: right;
    margin-left: ;
}

#quote_form .btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: url('../image/frm-quick-quote-btn.png') no-repeat;
    width: 159px;
    height: 56px;
}

#quote_form .dp-applied {
    position: relative;
    top: 3px;
}

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/import.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<title>Home | Manchester Airline Parking</title>
</head>
<body>
    <div id="wrapper" class="container_20">
        <div id="header">
            <div class="inner">
                <span id="header-contact">Phone enquiries: <strong>0161 490 2482</strong> <small>(Mon-Fri   0800am - 1800pm)</small></span>
                <img id="sage" src="image/sage.gif" alt="Secure online booking with Sage Pay" />
            </div>
        </div><!--end header-->
        <div id="hero">
            <div class="grid_8 alpha">
                <a href="#"><img id="logo" src="image/logo.gif" alt="Logo" /></a> 
            </div>
            <div class="grid_12 omega">
                <h1>FULLY INSURED <strong>SECURE PRIVATE PARKING</strong></h1>
                <ul id="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Partners</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Offers / News</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div><!--end hero-->
        <div id="page">
            <div class="divide">
                <div class="grid_13">
                    <form action="#" id="quote_form" name="quote_form">
                        <h3>QUICK QUOTE</h3>
                        <div>
                            <label for="from_month"><strong>From:</strong></label>
                            <select id="from_month" name="from_month">
                                <option value="1">Jan</option>
                                <option value="2">Feb</option>
                                <option value="3">Mar</option>
                                <option value="4">Apr</option>
                                <option value="5">May</option>
                                <option value="6">Jun</option>
                                <option value="7">Jul</option>
                                <option value="8">Aug</option>
                                <option value="9">Sep</option>
                                <option value="10">Oct</option>
                                <option value="11">Nov</option>
                                <option value="12">Dec</option>
                            </select>
                            <select id="from_month_date" name="from_month_date">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                            </select>
                            <select id="from_year" name="from_year">
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                            </select>
                            <a id="date-pick" href="noJs.html" class="dp-applied"><img src="image/frm-date.gif" alt="Select Date" /></a>
                        </div>
                        <div>
                            <label>Arrival Time:</label>
                            <select class="month" name="arrive_hour">
                                  <option value="00">00</option>
                                  <option value="01">01</option>
                                  <option value="02">02</option>
                                  <option value="03">03</option>
                                  <option value="04">04</option>
                                  <option value="05">05</option>
                                  <option value="06">06</option>
                                  <option value="07">07</option>
                                  <option value="08">08</option>
                                  <option value="09">09</option>
                                  <option value="10">10</option>
                                  <option value="11">11</option>
                                  <option value="12">12</option>
                                  <option value="13">13</option>
                                  <option value="14">14</option>
                                  <option value="15">15</option>
                                  <option value="16">16</option>
                                  <option value="17">17</option>
                                  <option value="18">18</option>
                                  <option value="19">19</option>
                                  <option value="20">20</option>
                                  <option value="21">21</option>
                                  <option value="22">22</option>
                                  <option value="23">23</option>
                            </select>
                            <select class="month" name="arrive_min">
                                <option value="00">00</option>
                                <option value="15">15</option>
                                <option value="30">30</option>
                                <option value="45">45</option>
                            </select>
                        </div>
                        <div>
                            <label for="to_month"><strong>To:</strong></label>
                            <select id="to_month" name="to_month">
                                <option value="1">Jan</option>
                                <option value="2">Feb</option>
                                <option value="3">Mar</option>
                                <option value="4">Apr</option>
                                <option value="5">May</option>
                                <option value="6">Jun</option>
                                <option value="7">Jul</option>
                                <option value="8">Aug</option>
                                <option value="9">Sep</option>
                                <option value="10">Oct</option>
                                <option value="11">Nov</option>
                                <option value="12">Dec</option>
                            </select>
                            <select id="to_month_date" name="to_month_date">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                            </select>
                            <select id="to_year" name="to_year">
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                            </select>
                            <a id="date-pick-2" href="noJs.html" class="dp-applied"><img src="image/frm-date.gif" alt="Select Date" /></a>
                        </div>
                        <div>
                            <label>Return Time:</label>
                            <select class="month" name="return_hour">
                                <option value="00">00</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                            </select>
                            <select class="month" name="return_min">
                                <option value="00">00</option>
                                <option value="15">15</option>
                                <option value="30">30</option>
                                <option value="45">45</option>
                            </select>
                        </div>
                        <input type="submit" value="" name="frm-quick-quote-submit" id="frm-quick-quote-submit" class="btn" />
                    </form>
                </div>
                <div class="grid_7">
                    <img src="image/cta-main.gif" alt="Meet & Greet Parking Service" />
                </div>
            </div>
            <div class="divide">
                <div class="grid_5">
                    <img src="image/cta-drive-staight.gif" alt="Drive Straight to The Airport, Not Miles Away" />
                </div>
                <div class="grid_5">
                    <img src="image/cta-park-car.gif" alt="Park Your Car at The Terminal, No Buses" />
                </div>
                <div class="grid_5">
                    <img src="image/cta-meet-you.gif" alt="We Will Meet You and Safetly Park Your Car, Go Straight to Check-in" />
                </div>
                <div class="grid_5">
                    <img src="image/cta-on-return.gif" alt="On Your Return Your Car is Waiting, No Hassle" />
                </div>
            </div>
            <div class="divide">
                <div id="content" class="grid_13">
                    <div class="inner">
                        <h2>Manchester Airport <strong>Meet & Greet</strong> Parking Service</h2>
                        <p>Manchester Airlink Parking provide a quality car collection and delivery service that leaves you 
                        free to enjoy your trip. Upon your arrival at Manchester Airport, one of our representatives 
                        will meet at the departure level. After helping you with your baggage, your car is then taken 
                        and safely stored. Upon your arrival back at Manchester Airport, our representative will meet 
                        you at the terminal building to deliver your car.</p>
                        <p><a href="#">more about us.....</a></p>
                    </div>
                </div>
                <div id="sidebar" class="grid_7">
                    <div class="inner">
                        <h3>MAP Newsletter</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
                        <a href="#"><img src="image/frm-newsletter-btn.gif" alt="Sign Up" /></a>
                    </div>
                </div>
            </div>
            <div class="cta-divide">
                <div class="grid_6 cta-col" id="cta-col-1">
                    <div class="inner">
                        <h4>How it works</h4>
                        <h5>Your arrival</h5>
                        <ul>
                            <li>Bookings require 24 hours notice.</li>
                            <li>On the day of your departure, simply call us 10 minutes before 
                            your arrival at Manchester Airport.</li>
                            <li>Drive directly to the Departures Level at Terminal 1, 2 or 3 at 
                            Manchester Airport.</li>
                            <li>There you will be met by an official MAP representative. From then on 
                            your vehicle will be in our care.</li>
                            <li>You are now free to enjoy your Holiday or Business trip.</li>
                        </ul>
                        <h5>Your return</h5>
                        <ul>
                            <li>On your return to Manchester Airport, your vehicle will be 
                            returned to you immediately saving journey time.</li>
                        </ul>
                    </div>
                </div>
                <div class="grid_6 cta-col" id="cta-col-2">
                    <div class="inner">
                        <h4>Why you can trust MAP</h4>
                        <h5>Your arrival</h5>
                        <ul>
                            <li>MAP is a family run business striving to deliver excellent service 
                            and value for money.</li>
                            <li>Our enviable reputation has been built on a combination of hard 
                            work, care and a friendly personal approach.</li>
                            <li>MAP’s insurances cover all the company’s legal liabilities.</li>
                            <li>Our experienced drivers and their support vehicles are in constant 
                            radio contact with head office.</li>
                        </ul>
                        <h5>Highly competitive rates</h5>
                        <ul>
                            <li>Our <strong>Price Match Promise</strong> means that if you find the same efficient 
                            service that you have been offered by MAP at a lower price then we 
                            will be happy to refund the difference.</li>
                        </ul>
                    </div>
                </div>
                <div class="grid_8 omega cta-col" id="cta-col-3">
                    <div class="inner">
                        <h4>Directions to  Airport</h4>
                        <ul class="top">
                            <li>Drive to Terminal 1, 2 or 3 at Manchester Airport</li>
                            <li>If you are using the M56 turn off at Junction 5.</li>
                            <li>Make your way to the departures level.</li>
                        </ul>
                        <ul class="btm">
                            <li>Terminal 1 - enter DROP OFF ZONE<br />
                            Terminal 2 - enter CAR LANE<br />
                            Terminal 3 -  pull up at KERBSIDE.<br /></li>
                            <li>Pull into the kerb where you will be met by our representative.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div><!--end page-->
        <div id="footer">
            <div class="top">
                <div id="footer-contact" class="grid_6">
                    <div class="inner">
                        <p>MAP Ltd, Unit 26, Prenton Dell Road,
                        Prenton, Wirral, Cheshire CH43 3AW</p>
                        <ul>
                            <li>T: 0161 490 2482</li>
                            <li>M: 07889 092 055</li>
                        </ul>
                    </div>
                </div>
                <div class="grid_10">
                    <img id="footer-logo" src="image/footer-logo.gif" alt="Logo" />
                </div>
                <div class="grid_4">
                    <img src="image/footer-payment.gif" alt="Payment Methods" />
                </div>
            </div>
            <div class="btm">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Offers / News</a></li>
                    <li><a href="#">Terms & Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Site Map</a></li>
                    <li><a href="#">xhtml</a></li>
                    <li><a href="#">css</a></li>
                </ul>
            </div>
        </div><!--end footer-->
    </div><!--end wrapper-->
    <div class="clear"></div>
</body>
</html>

 

Also here is a link to the page if that helps:

http://bit.ly/bGW5J1

 

Many thanks to anyone who can help!

Link to comment
Share on other sites
nano Member

nano

Posted
Posted

I don't reallyy understand the problem, could you maybe clear up what you are after?  :)

 

Could you be possibly looking at having an automatic height on a container, so it extends dependant on content.

 

Then setting the background image to the bottom of the element?

 

/* This extends the containers height automatically */
#container {
height:auto;
overflow:hidden;
}
/* Sets the background image to the bottom of the container */
#container .image {
background: transparent url('') no-repeat bottom left;
}

 

You obivously have to specify widths and heights for you background images, the above code does not reflect your code, just an example.

 

That was a stab at the dark but if you could specify what image and what you are actually looking for, then I might try and help a bit more ;)

 

 

Link to comment
Share on other sites
  • 2 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.