• Locked
3 replies [Last post]
Tue, 2010-08-31 18:34
Ironwil
Ironwil's picture
User offline. Last seen 50 weeks 6 days ago. Offline
newbie
Timezone: GMT-7
Joined: 2010-06-17
Posts: 6
Points: 10

I've got a page that's set up like this:

<head>
<body>
    <div id="container">
 
        <div id="header">
 
            <div id="navigation">
                <!-- Navigation goes here -->
            </div><!-- End of Navigation -->
 
            <div id="autocomplete-container">
                <div class="ui-widget">
                    <%--<label for="autoComplete">Tags: </label>--%>
                    <input id="autocomplete" name="autocomplete" />
                    <input type="submit" value="Search" id="autocomplete-submit" />
                </div>
            </div><!-- End of Autocomplete -->
 
        </div><!-- End of Header -->
 
        <div id="content">
            <!-- Content will be here -->
        </div><!-- End of Content -->
 
        <div id="footer">
            Footer
        </div><!-- End of Footer -->
 
    </div>
</body>
</html>

The CSS rules are:

body
{
    color: #000;
    background-color: #494949;
    margin: 0;
    padding: 0;
    font: normal 12px verdana;
}
 
a:link
{
    text-decoration: none;
    color: #224a9f;
}
a:visited
{
    text-decoration: none;
    color: #3967b4;
}
a:hover, a:active
{
    text-decoration: underline;
    color: #3967b4;
}
 
#container
{
    position:relative;
    width: 1000px;
    margin: 0px auto;
    background-color: #fff;
}
 
#header 
{
    position:relative
    height: 162px;
    background: #3c69b6 url(../../images/topBG.jpg) top center repeat-x;
    padding: 0;
    margin: 0;
}
 
/* Navigation Styles */
#navigation
{
    position:absolute;
    top:10px;
    right:0px;
}
 
#menu ul
{
    margin:0;
    padding:0;
    list-style:none;
    width:500px;
}
 
/* Position top-level li elements 'relative' so sub-menu ul elements
     can be positioned 'absolute'. */
#menu ul li
{
    position:relative;
    width:80px;
    float:left;
}
 
/* Sub menu styles */
#menu .sub-menu
{
    position:absolute;
    left:0px;
    top:30px;
    width:120px;
    display:none;
}
 
/* Sub-menu li element styles */
#menu .sub-menu li
{
    float:none;
    width:120px;
}
 
#menu .sub-menu li a
{
    text-align:left;
}
 
.top-level-nav
{
 
}
 
/* Link styles */
#menu ul li a
{
    display:block;  /* So links take up all available space within containing 'li' element */
    text-decoration:none;
    text-align:center;
    color:#fff;
    background:#000;
    padding:5px;
    height:20px;
    border-right:0; /* Last link won't have a border. Fix is placed in the 'ul' element rules */
}
 
#menu li:hover ul
{
    display:block;
    z-index:9999;
}
 
#menu .sub-menu li:hover a
{
    color:#000;
    background-color:#ccc;
}
/* End Navigation Styles */
 
#content
{
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fff;
    margin-bottom: 30px;
}
 
/* FIX NEEDED!!! For some reason, the footer is appearing as though it's
     in the header. Even absolute positioning isn't working correctly. */
#footer
{
    position:absolute;
    bottom:-600px;
    color: #fff;
    width:1000px;
    height: 46px;
    background: #000 url(../../images/footerBG.jpg) top center repeat-x;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    font-size: .9em;
}

The -600px bottom position of the footer element was the only way I could get the footer to stop appearing in the header element. If set to bottom:0px;, the footer appears at the very bottom of the header. I checked the divs to make certain I didn't accidentally nest one or forget to close one off, but that doesn't seem to be the case. I just can't figure out why the footer isn't appearing at the bottom of the container element.

Top
Tags:
Tue, 2010-08-31 19:38
#1
CupidsToejam
CupidsToejam's picture
User offline. Last seen 2 weeks 1 day ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

research sticky footer

research sticky footer
dont forget to validate your code!


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
Tue, 2010-08-31 22:59
#2
Ironwil
Ironwil's picture
User offline. Last seen 50 weeks 6 days ago. Offline
newbie
Timezone: GMT-7
Joined: 2010-06-17
Posts: 6
Points: 10

Validation errors fixed

I fixed the errors and both my CSS and HTML validated. Unfortunately, it didn't have any effect on the footer. I've put together a basic structure like this before:

<html>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

and since a div by default extends across its entire containing element, and also because I specified explicit widths, the header, content and footer stacked one below the other. The footer was always at the bottom using this setup. Now, for some reason, the footer is being rendered in the header section even though it's clearly not there. Even stranger, if I take away the CSS rules of its position, the text gets rendered at the bottom where it should be, but the background-image is rendered up in the header section. I read about sticky footers, and I've used that approach in the past as well, but I'd also really like to understand why this odd effect has occurred.

Update - I removed the 'float:left' from the content element, and it ended the odd placement of the footer.

Top
Wed, 2010-09-01 05:33
#3
Ed Seedhouse
Ed Seedhouse's picture
User offline. Last seen 3 weeks 1 day ago. Offline
rank Guru
Guru
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3544
Points: 643

We're really not going to be

We're really not going to be able to help much unless we see ALL your code. Every bit of the actual html page and the CSS as well.

Even better, give us a link to your problem page.

Our posting guidelines ask for this, did you read them?

Ed Seedhouse

Posting Guidelines

High on a hill, in Wrangellia.

Top
  • Locked