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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Both the Body and the Menu won't expand together

    Hey, I'm trying to creating this website right now, and I'm having problems trying to make the main content area and the menu act as one unit.

    Using CSS, the entire webpage is put in a "container"

    And the menu and main content area is put in this "content container"

    What I want to do is have the menu and the main content area be put together side by side, and have it so, when either one of them expands, it would push down the "footer" which is rested below it.

    For some reason, when I try to put the Menu next to the Main Content, the menu wants to stay under the Main Content, not on the right side like I intended.

    My solution was to put the menu above the Main content in the XHTML file, and float the menu right.

    Now that float is giving me some new problems, every time the menu expands, it expands PAST the footer, it doesn’t push the footer down.

    Also, when I expand the Main Content, it pushes the footer down and the menu stays the same.

    I'll provide the CSS and XHTML code, and I'll provide some screenshots to help illustrate my point.

    this is the XHTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>The Webpage</title>
        <style type="text/css" title="currentstyle" media="screen">
        @import "001.css";
        </style>
        </head>
    
        <body>
    
        <div id="container">
            
            <div id="header">
            </div><!--header-->
            
                <div id="contentcontainer">
            
                <div id="topdivider">
                </div><!--topdivider-->
                <div id="rightdivider">
                </div><!--topdivider-->
                
                    
                
                                    
                    <div id="menu">
                        
                    <ul>
                        <li><img src="res/img/menu/link.png" width="81" height="19" /></li>
                        <li><img src="res/img/menu/link.png" width="94" height="23" />   
                            <img src="res/img/menu/link.png" width="98" height="27" /></li>
                        <li><img src="res/img/menu/link.png" width="79" height="24" />
                            <img src="res/img/menu/link.png" width="80" height="27" /></li>
                        <li><img src="res/img/menu/link.png" width="71" height="23" />
                            <img src="res/img/menu/link.png" width="78" height="26" /></li>
                        <li><img src="res/img/menu/link.png" width="53" height="24" /></li>
                        <li><img src="res/img/menu/link.png" width="207" height="19" /></li>
                        <li><img src="res/img/menu/link.png" width="109" height="35" /></li>
                        <li><img src="res/img/menu/link.png" width="124" height="19" /></li>
                        <li><img src="res/img/menu/link.png" width="76" height="18" /></li>
                        <li><img src="res/img/menu/link.png" width="63" height="18" /></li>
                        <li><img src="res/img/menu/link.png" width="195" height="132" /></li>
                        
                        
                    </div><!--menu-->
                    
                    <div id="maincontent">
                    
    
                    </div> <!--maincontent-->
                    
                    
            </div><!--content container-->
            
            <div id="footer">
            </div><!--footer-->
        </div> <!--container-->
        
        
        
        
    </body>
    </html>
    This is the CSS:

    Code:
    /* This is a stylesheet for a website */
    /* http://example.com/ */
    /* website design and layout by me */
    /* have fun */
    
    /*
    ==Document settings==
    */
    
    html {
        padding:0;
        margin:0;
    }
    
    body {
        padding:0;
        margin:0;
        border:0;
        background:url('res/img/layout/fill.jpg') #b1b180;
    }
    
    /*
    ===Page Layout===
    */
    
    #container  {
        width:911px;
        margin:0px;
        min-height: 1000px;
        /*border: 3px solid #000000;*/
        background: url('res/img/layout/parrot.jpg') no-repeat;
    }
    
    #header {
        width:737px;
        height:123px;
        margin-left:174px;
        position:relative;
        background: url('res/img/layout/header.jpg') no-repeat;
    }
    
    #contentcontainer {
        width:737px;
        margin-left:174px;
        position: relative;
        /*border:1px solid;*/
    }
    
    #topdivider {
        width:737px;
        height:8px;
        position: relative;
        background: url('res/img/layout/headdiv.jpg') no-repeat;
    }
    
    
    #rightdivider {
        width:21px;
        height:541px;
        float:left;
        clear:left;
        background: url('res/img/layout/right.jpg') no-repeat;
    }
    
    #maincontent {
        width:468px;
        margin:0px 0px 0px 19px;
        min-height:541px;
        border-left:2px solid #f93;
        border-right: 2px solid #f93;
        position:relative;
        background: url('res/img/layout/maincontent.jpg');
    }
    
    #menu {;
        width:228px;
        margin: 0px 16px 0px 0px;
        /*float:right;*/
        border-right:2px solid #f93;
        position: relative;
        background: url('res/img/layout/menu.jpg') #9c9b56 no-repeat;
    }
    
    #footer {
        width:737px;
        height:94px;
        margin:0px 0px 0px 174px;
        position: relative;
        background: url('res/img/layout/footer.jpg') no-repeat;
    }
    
    /*
    ==Page Styles==
    */
    
    /*
    ===menu Styles===
    */
    
    #menu ul {
        list-style:none;
        text-align:center;
        padding:0px 0px 0px 0px;
        margin: 30px 0px 0px 0px;
    }
    
    #menu li {
        line-height:35px;
    }
    
    #menu img {
        padding:0px 5px 0px 5px;
    }
    
    /*end of css file*/
    Alright

    Here is what this webpage looks like normally:



    This is what the webpage looks like when I expand the Main Content area (using line breaks with in the XHTML file or changing the height in the CSS file)



    This is what happens when I expand the Menu (using line breaks in the HTML file or changing the hight in the CSS file)

    Note that the reason I think this is happening is because I use the "float" property to position the menu properly.



    This is what happens when I turn the Float property off.



    And finally this pretty much illustrates what I want to Menu and the Main Content area to do. I want them both to expand togheter as one unit.

    If the menu expands, the main content area would expand as well, and vice versa.



    If anyone out there can explain to me what I'm doing wrong, that would be great.

    If I havn't made myself clear, please let me know.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to use the faux columns technique explained here: http://www.alistapart.com/articles/fauxcolumns/ Good luck.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks engineer for that tip! it a really awesome trick.

    It works now, but for some reason. I still have to put the menu above the main content in order for it to not rest under the content itself.

    so much for trying to be SEO


  •  

    Posting Permissions

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