SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Expandable News Box going past footer

    Hi, I am having a small problem. I have an expandable news box that works fine on a blank page but when I put it in another container it will hide other items in that container and then will go past the footer.

    I have added my css code and my html code. I am obviously doing something wrong. My problem is with the /*NEWS BOX*/ code and below.

    /* for Internet Explorer \*/
    html, body{height:100%;}
    /* */

    html,body {
    margin:0;
    padding:0;
    min-height:100%;
    font-size:12px;
    font-family:verdana, Arial, Helvetica, sans-serif;
    color: #000;
    background: #000 url(../images/dotted_black_bg.png) ;
    text-align:center;
    }

    #wrapper {
    width: 900px;
    background: #fff;
    margin: 10px auto;
    padding: 0px;
    text-align:left;
    min-height:100%;
    border:4px solid #FED049;
    position:relative;
    margin-bottom: -30px;
    }
    /* for Internet Explorer */
    /*\*/
    * html #wrapper {
    height: 100%;
    }
    /**/

    #banner{
    height: 200px;
    background-image: url(../images/areas.jpg);
    background-repeat: no-repeat;
    text-align: left;
    }

    #nav {
    border-bottom:4px solid #FED049;
    background:#333366;
    color:#fff;
    width:100%;
    height:25px;
    color:#fff;
    text-align:center;
    padding-top:5px
    }


    #content {
    width: 100%;
    background:#fff;
    padding-bottom:25px; /*FOR FOOTER*/
    min-height:100%;
    }

    #left {
    margin:10px 0 10px 0;
    width:295px;
    background:#fff;
    color:#000;
    text-align:left;
    float: left;
    border-right: 2px solid #ccc;
    padding:10px;
    }

    #right {
    margin:10px 0 10px 0;
    float:right;
    width:550px;
    padding:10px;

    }

    .clearfooter {
    height: 30px;
    clear: both;
    }

    #footer{
    position:relative;/*TO KEEP AT BOTTOM*/
    width: 100%;
    height:30px;
    background: #333366;
    color:#fff;
    text-align:center;
    font-size: 10px;
    padding:3px 0;
    }



    hr {
    border: none 0;
    border-top: 1px dashed #666666;
    width: 50%;
    height: 1px;
    text-align: center; /*FOR IE*/
    margin: 15px auto 5px auto; /*FOR FF*/
    }

    .centeredImage {
    text-align:center;
    margin:10px auto 8px auto;
    }


    /*NEWS BOX*/

    #box1 {
    width:300px;
    background:#fff;
    position:relative;
    }


    #box1head {
    position: absolute; left: 0px; top: 0px;
    display: block;
    width: 289px;
    height: 50px;
    background: url(../images/news-arrow-box-1_01.gif);
    repeat: no-repeat;
    }

    #box1body {
    position: absolute; left: 0px; top: 50px;
    display: block;
    width: 289px;
    background-image: url(../images/news-arrow-box-1_02.gif);
    repeat: repeat-y;
    }

    #box1body h3 {
    font-size:14px;
    color:blue;
    padding:2px 20px 0 33px;
    }

    #box1body p {
    font-size:12px;
    color:red;
    padding:2px 20px 2px 33px;
    }

    #box1body a:link,#box1body a:visited {
    font-size: 10px;
    color: orange;
    text-decoration: underline;
    }

    #box1body a:hover {
    font-size: 10px;
    color: orange;
    text-decoration: none;
    }

    .box1bottom {
    position:relative;
    display: block;
    height: 32px;
    margin-bottom:-32px;
    background-image: url(../images/news-arrow-box-1_04.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    }

    .right {
    text-align: right;
    }


    This is my html code:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="css/main_4.css" />
    
    
    </head>
    
    <body>
    <div id="wrapper"> 
      <div id="banner"></div>
      <div id="nav">Navigation Here</div>
      <div id="content"> 
        <div id="left"> 
          <div id="box1"> 
            <div id="box1head"></div>
            <div id="box1body"> 
              <h3>TEST</h3>
              <p>Aenean mollis scelerisque ipsum. Duis tempor. Lorem ipsum dolor sit 
                a met, consectetur adipiscing elit. Suspendisse viverra, quam eget 
                euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl 
                eget ipsum. Donec feugiat augue. Ut feugiat. Integer euismod massa 
                ut enim. Cum sociis natoque penatibus et magnis dis parturient montes, 
                nascetur ridiculus mus. Nulla facilisi. </p>
              <p class="right"> <a href="#">Read More</a></p>
              <h3>TEST 2</h3>
              <p>Aenean mollis scelerisque ipsum. Duis tempor. Lorem ipsum dolor sit 
                a met, consectetur adipiscing elit. Suspendisse viverra, quam eget 
                euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl 
                eget ipsum. Donec feugiat augue. Ut feugiat. Integer euismod massa 
                ut enim. Cum sociis natoque penatibus et magnis dis parturient montes, 
                nascetur ridiculus mus. Nulla facilisi. Aenean mollis scelerisque 
                ipsum. Duis tempor.</p>
              <p class="right"> <a href="#">Read More</a></p>
              <h3>TEST 2</h3>
              <p>Aenean mollis scelerisque ipsum. Duis tempor. Lorem ipsum dolor sit 
                a met, consectetur adipiscing elit. Suspendisse viverra, quam eget 
                euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl 
                eget ipsum. Donec feugiat augue. Ut feugiat. Integer euismod massa 
                ut enim. Cum sociis natoque penatibus et magnis dis parturient montes, 
                nascetur ridiculus mus. Nulla facilisi. Aenean mollis scelerisque 
                ipsum. Duis tempor.</p>
              <p class="right"> <a href="#">Read More</a></p>
    		   <h3>TEST 2</h3>
              <p>Aenean mollis scelerisque ipsum. Duis tempor. Lorem ipsum dolor sit 
                a met, consectetur adipiscing elit. Suspendisse viverra, quam eget 
                euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl 
                eget ipsum. Donec feugiat augue. Ut feugiat. Integer euismod massa 
                ut enim. Cum sociis natoque penatibus et magnis dis parturient montes, 
                nascetur ridiculus mus. Nulla facilisi. Aenean mollis scelerisque 
                ipsum. Duis tempor.</p>
              <p class="right"> <a href="#">Read More</a></p>
              <span class="box1bottom"></span></div>
          </div>
    	  <div id="box"> 
            <hr />
            <div class="centeredImage"><a href="http://www.facebook.com/home.php#!/pages/New-York-State-Association-of-Chiefs-of-Police/131602526889810"> 
              <img src="images/like_us_on_facebook.gif" alt="like us on facebook"  width="130" height="49" /></a></div>
            <hr />
            <div class="centeredImage"><a href="http://nysamber.troopers.state.ny.us/" target="_blank"> 
              <img src="images/amber_alert.jpg" width="115" height="86"  alt="amber alert" /></a> 
            </div>
            <hr />
            <div class="centeredImage"><a href="about.php#accreditation"> <img src="images/accrdited_pin_small.gif" width="100" height="42"  alt="accreditation pin"><br />
              Accreditation</a></div>
            <hr />
            <div class="centeredImage"> <a href="kids.php" target="_blank"> <img src="images/fight_crime.gif" alt="fight crime invest in kids" width="130" height="36" /> 
              </a></div>
          </div>
        </div>
        <!--END LEFT-->
        <div id="right"> 
          
        </div>
        <!--END RIGHT-->
        <div class="clearfooter"></div>
      </div>
      <!--END CONTENT-->
      <div id="footer">/div>
    </div>
    <!--END WRAPPER-->
    </body>
    </html>
    Thank you in advance. I appreciate any help offered.

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have added the page if that is easier.
    New York State Association of Chiefs of Police

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Add overflow hidden to the wrapper or content div. That contains the floats.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did that and it hides text in the box when it reaches the bottom of the div. Also the news box does not "push down" images that are palced below it.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think I explained myself properly. What I want is when the box expands for the rest of the container to expand in the browser window. There must be something in my css code missing. I appreciate any help.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi, unless a box with overflow hidden had a limiting height declared there should be no reason why it would cut off text. But I havn't ran your code so prob missed something. I'll take a look later if no one else has.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I have messed something up. I can place images in that float and it will expand everything. As soon as I put the box in, it doesn't expand and it sits on the top of the images that are already in the float.

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I solved it.


Bookmarks

Posting Permissions

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