wrapper problems with CSS

Discussion in 'HTML' started by Gavin, Jun 7, 2005.

  1. Gavin

    Gavin Guest

    Please help me! I am pulling my hair out trying to learn this CSS thingy!!!!

    Here my code below. The wrapper container should hold all other items on
    the page. If I put a border around the wrapper box, its fine if the content
    doesn't go below the bottem of the menu, but if it does, the wrapper doesn't
    expand to fit. Please help.

    Gavin.

    Main Page:

    <?php


    $page = $_GET["page"];
    $menu = $_GET["menu"];

    if ($page == "")

    {
    $page="home";
    }

    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>

    <head>
    <TITLE>Lister Radio - The Voice of The Community, The Music Of Your
    Life</TITLE>
    <meta name="keywords" content="Lister, Radio, Lister Radio, Station,
    Stevenage, Hospital, Lister Radio Station, Lister Hospital, FM, AM, LPFM,
    LPAM, Voluntary, Music, Entertainment, Herts, Hertfordshire">
    <meta name="description" content="Lister Radio is a voluntary service
    supplying music and entertainment to the patients of the Lister Hospital in
    Stevenage. We also broadcast on LPFM for the residential homes around the
    area.">
    <META NAME="Author" CONTENT="">
    <LINK HREF="misc/lister.css" REL="stylesheet" TYPE="text/css">
    <SCRIPT src="misc/drop_down.js" type=text/JavaScript></SCRIPT>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
    <div id=wrapper>
    <div id=maincontent>
    <?php include("inc/".$page.".php"); ?>
    </div>
    <div id=menubar>
    <ul id="nav">
    <li><a href="main.php">Home</a></li>
    <li><a href="#">On Air >></a>
    <ul>
    <li><a href="#">Listen Online</a></li>
    <li><a href="main.php?page=rslsch">Schedule</a></li>
    <li><a href="main.php?page=bits">Bits N Pieces</a></li>
    </ul>
    </li>
    <li><a href="main.php?page=donations">Donations</a></li>
    <li><a href="#">News >></a>
    <ul>
    <li><a href="main.php?page=news/news04">News 2004</a></li>
    <li><a href="main.php?page=news/news05">News 2005</a></li>
    </ul>
    </li>
    <li><a href="main.php?page=events">Coming Events</a></li>
    <li><a href="main.php?page=pevents">Past Events >></a>
    <ul>
    <li><a href="main.php?page=pevents/xmas">Christmas</a></li>
    <li><a href="main.php?page=pevents/lions">Lions Firworks</a></li>
    <li><a href="main.php?page=pevents/rsl2004">RSL 2004</a></li>
    </ul>
    </li>
    <li><a href="/forum/" target="_blank">Forum</a></li>
    <li><a href="main.php?page=mem">Membership</a></li>
    <li><a href="main.php?page=funds">Fundraising</a></li>
    <li><a href="main.php?page=links">Links</a></li>
    <li><a href="#">About Us >></a>
    <ul>
    <li><a href="main.php?page=aboutus">Who we are</a></li>
    <li><a href="main.php?page=mission">Our Mission</a></li>
    </ul>
    </li>
    <li><a href="#">Contact Us >></a>
    <ul>
    <li><a href="main.php?page=rslcontact">RSL Details</a></li>
    <li><a href="main.php?page=contactus">General Contacts</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="rightcol">
    <h1><br>
    <strong>Website News</strong></h1>
    <p> <strong>11/04/05</strong><br>
    Lister hits the air waves at 5pm today </p>
    <p><strong>11/04/05</strong><br>
    Website relaunched for the start of RSL 2005.</p>
    <SCRIPT TYPE="text/javascript">
    <!--
    emailE=('webmaster@' + 'listerradio.com')
    document.write('<A href="mailto:' + emailE + '">' + 'Webmaster' +
    '<\/a>')
    //-->
    </script>
    <br>
    <br>
    <!-- START OF ADDME LINK -->
    <a href="http://www.addme.com"><img
    src="http://www.addme.com/button2.gif"
    alt="Search Engine Submission and Internet Marketing" width="88" height="31"
    border="0"></a>
    &nbsp;
    <!-- END OF ADDME LINK -->
    </div>

    <div id=titlebar> <img src="images/LRBar.gif" alt="LR Title Bar"
    width="755" height="150" border="1">
    </div>
    </div>
    </body>
    </html>

    CSS File:

    #sched a:link, #sched a:active, #sched a:visited, #sched a {
    text-decoration: none; color: #000000 }

    #sched a:hover {
    text-decoration: none;
    color: #FFFFFF;
    background-repeat: no-repeat;
    }
    #rightcol {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: x-small;
    color: #0033FF;
    text-decoration: none;
    position: absolute;
    width: 130px;
    left: 0px;
    top: 450px;



    }
    #rightcol h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-style: normal;
    font-weight: bold;
    color: #0000CC;
    text-decoration: none;
    }

    body {
    font-style: normal;
    font-size: x-small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    text-decoration: none;
    text-align: center;



    }

    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 130px;
    border-bottom: 1px solid #ccc;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-align: center;



    }

    ul li {
    position: relative;

    }

    li ul {
    position: absolute;
    left: 129px;
    display: none;
    }

    /* Styles for Menu Items */
    ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }

    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */

    ul li a:hover {
    color: #E2144A;
    background: #f9f9f9;
    } /* Hover Styles */

    li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

    li:hover ul, li.over ul {
    display: block;
    top: 0px;
    } /* The magic */

    h6 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-variant: normal;
    color: #000000;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #999999;
    text-transform: uppercase;

    }
    #titlebar {
    padding: 0px;
    width: 755px;
    height: 150px;
    top: 0px;
    left: 0px;
    position: absolute;









    }
    #menubar {
    position: absolute;
    width: 130px;
    left: 0px;
    top: 170px;

    }
    #maincontent {
    width: 525px;
    left: 140px;
    position: absolute;
    top: 170px;
    text-align: left;
    height: auto;








    }
    #footer {
    position: relative;
    width: 755px;
    text-align: center;
    height: 100px;
    top: 600px;


    }

    #wrapper{
    padding: 0px;
    width: 760px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
    text-align: left;
    text-decoration: none;
    position: relative;
    border: medium dotted;
    height: auto;
    }

    JS File (if needed):

    // JavaScript Document

    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes;
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;
    Gavin, Jun 7, 2005
    #1
    1. Advertising

  2. Gavin

    Els Guest

    Gavin wrote:

    > Here my code below.


    Please don't copy paste code, provide a URL instead.

    > If I put a border around the wrapper box, its fine if the content
    > doesn't go below the bottem of the menu, but if it does, the wrapper doesn't
    > expand to fit.


    [snip a /lot/ of code]

    > #maincontent {
    > width: 525px;
    > left: 140px;
    > position: absolute;
    > top: 170px;
    > text-align: left;
    > height: auto;
    > }


    position:absolute takes the element out of the normal flow.
    The wrapper box doesn't "see" the #maincontent, so it won't expand to
    fit either.

    I can't give you a ready solution without diving into your code, which
    I'm not keen to do atm. General solution: don't use position:absolute
    on the #maincontent, but find another way of placing it where you
    want. If it's a page with a floated menu of 140px to the left, just
    give the #maincontent a left margin of 140px and don't position it.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: David Bowie - Beauty And The Beast
    Els, Jun 7, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Brendan Duffy
    Replies:
    0
    Views:
    4,041
    Brendan Duffy
    Jul 25, 2003
  2. Nilsson Mats

    Wrapper on magic line?

    Nilsson Mats, Dec 9, 2003, in forum: Perl
    Replies:
    0
    Views:
    606
    Nilsson Mats
    Dec 9, 2003
  3. Showjumper
    Replies:
    2
    Views:
    446
    Showjumper
    Jul 4, 2003
  4. John Mullin
    Replies:
    0
    Views:
    1,720
    John Mullin
    Nov 7, 2004
  5. James S
    Replies:
    2
    Views:
    401
    James S
    Jul 20, 2004
Loading...

Share This Page