www.webdeveloper.com
Results 1 to 2 of 2

Thread: problems with putting containers below containers (like a list)

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    problems with putting containers below containers (like a list)

    I am trying to put a series of div class under each other in a container so that they make a scrollable list.
    The first container is fine.
    The second container's boundries stretch outside the container and the container doesn't extend behind the div class. You can see what I mean here; http://www.what-do-christians-believ...ree-gifts.html you need to scroll down a bit.

    I've tried for the past 8 hrs to try to sort this issue out but I can't. The file compiles as html5 but it throws out iframes (they are pluggins from facebook and twitter)

    The html code is;
    HTML Code:
    <div class="newslttr">
        <h3> Newsletter</h3>
        <img src="http://www.what-do-christians-believe.co.uk/wdcb-images/newsletter.png" class="texttop" alt="Photo of  newsletter" />
    </div>
    <div class="level-1">
    <h4><span style="color:#F4097E">Hello My Darlings</span> </h4>
     <p>Donate up to 10$ USA <br/>
       (7.00 or 7.75) and </p>
       <p>&nbsp;&nbsp;&nbsp;&nbsp;* Receive A copy of the latest newsletter<br/> 
          &nbsp;&nbsp; * And a mention in our newsletter</p>
    </div>
    the css code is;
    Code:
    .newslttr { border: 1px solid black;
                margin-top: 15px;
                 margin-left: 10px;
                margin-right: 10px;
                 height: 250px;
                }
    .newslttr img { position: relative;
                   left: -210px;
                   border-style: outset;
                   border-width: 4px;
                   border-color: #D5D6FF;
                   padding: 10px;
                  }       
    .level-1 {position: relative;
              top: -210px;
              left: 90px;
              font-family: arial, sans-serif;
              font-size: 1.10em;
              color: black;
    }
    
    .bookmark { position: relative;
                border: 1px solid black;
                margin-top: 15px;
                margin-left: 10px;
                margin-right: 10px;
                height: 400px;
                }
    .bookmark-1 img { position: relative;
                    top: 15px;
                    left: 10px;
                    border-style: outset;
                    border-width: 4px;
                    border-color: #D5D6FF;
                  }  
    .level-2 {position: relative;
              top: -145px;
              left: 300px;
              font-family: arial, sans-serif;
              font-size: 1.00em;
              color: black;
             }
    I can't work out what the cause of the problem is. Can someone help to solve it?

  2. #2
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    I am resolving this, but I need to use high neg px numbers. i.e each class needs to be moved upwards of around -300px. Not sure if that is meant to be the case or if it is a good idea.
    I am also having to juggle around with the </div> 's
    The compiler says it's OK but I guess that doesn't mean that you get what you want.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles