CODEWITHSUNDEEP
htmlcss
Dave Rottino
Dave Rottino

Reputation: 1047

HTML/CSS webpage structure

Got a small issue with this website structure: www.bigideaadv.com/xsp

Looking to have this container fill the middle of the screen between the top and bottom navigation. I'd also like to have the middle collapse with the resizing of the window with a scrollbar. Can't seem to make it work quite right. Anyone have any thoughts?

    <div id="top_navigation">   
        <div id="navigation_inside">
            <ul id="navigation">
                <li><a href="">Schedule Demo</a></li>
                <li><a href="">Sales</a></li>
                <li><p style="float:left; margin:0;">Search</p>&nbsp;&nbsp;<form style="margin:0 0 0 5px; padding:0; float:left;"><input class="search" type="text" /><input type="hidden"></form></li>
            </ul>
            <ul id="navigation2">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">People</a></li>
                <li><a href="">News + Events</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div>
    <div id="container">
        <div id="scroller">
        </div>
    </div>
    <div id="bottom_navigation">
        <div id="twitter_bar">
            <div id="twitter">
                <h5><img src="images/twitter_bird.png" width="23" height="16" />&nbsp;&nbsp;<b>@XSPGlobal:</b>&nbsp;</h5>
                <p>Loading...</p>
                <noscript><h5>This feature requires JavaScript</h5></noscript>
            </div>
        </div>
        <div id="blog_posts">
            <p>Here is where the blog posts will go.</p>
        </div>
        <div id="bottom_navigation_inside">
            <ul>
                <li><a href="">Partners</a></li>
                <li><a href="">Interfaces</a></li>
                <li><a href="">Careers</a></li>
                <li><a href="">XACT Blog</a></li>
                <li><a href="">Milestones</a></li>
                <li><a href="">Awards + Recognition</a></li>
                <li><a href="">Client Testimonials</a></li>
                <li><a href="">Press Releases</a></li>
                <li><a href="">Social Responsibility</a></li>
                <li><a href="">Privacy Policy</a></li>
                <li><a href="">Terms & Conditions</a></li>
            </ul>
        </div>
        <div id="social_links">
            <a href="http://www.facebook.com"><img src="images/facebook.png" width="23" height="24" /></a>
            <a href="http://www.twitter.com"><img src="images/twitter.png" width="23" height="24" /></a>
            <a href="http://www.linkedin.com"><img src="images/linkedin.png" width="23" height="24" /></a>
        </div>
    </div>

CSS:

    #container {
        margin: 72px 0 72px 0;
        width: 100%;
        height: 100%;
    }

    #top_navigation {
        position: fixed;
        min-width: 1010px;
        width: 100%;
        height: 72px;
        background: url('../images/opaque.png') repeat;
        text-transform: uppercase;
    }

    #bottom_navigation {
        position: absolute;
        min-width: 1010px;
        width: 100%;
        height: 172px;
        background: url('../images/opaque.png') repeat;
        text-transform: uppercase;
    }

Upvotes: 0

Views: 161

Answers (1)

Sven Bieder
Sven Bieder

Reputation: 5681

set the container to position fixed with a top of 72px and a bottom of 172px.

Upvotes: 1

Related Questions