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 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div behind a div, problem!

    Hey guys,
    I have a slight problem that i have spent a decent amount of time on and im losing the plot now....

    I have a div containing text in <p>'s then followed by a div with a bottom border on.

    The problem is it seems that the border div is sitting behind the text div, i need it to follow it, the idea im after is the same thats on my other site (the original that i changed the image slideshow on it) www.matthews235.co.uk. Ill post the whole of the html and css below....

    Thanks in advance.


    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
     <title>BigLampPhotography.co.uk</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <meta name="description" content="Big Lamp Photography" />
     <meta name="keywords" content="Big Lamp Photography" />
     <meta name="robots" content="index,follow" />
     <meta name="revisit-after" content="2 days" />
     
     <!-- LOAD MAIN STYLE SHEET -->
     <link rel="stylesheet" type="text/css" href="main.css" />
     
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="js/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [888, 305], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["1.jpg", "", "", ""],
    		["2.jpg", "", "", ""],
    		["3.jpg", "", "", ""],
    		["4.jpg", "", "", ""] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    </script>
    </head>
    
    <body>
     <div id="Google">
      <h1>Big Lamp Photography</h1>
      <p>Big Lamp Photography - <a href="http://www.biglampphotography.co.uk">http://www.biglampphotography.co.uk</a></p>
     </div><!-- end of #Google -->
     <div id="Navcontainer">
      <div id="Nav">
      <ul>
       <li><a class="nm" href="#"><img src="images/navhome.png" alt=""/></a></li>
       <li><a class="nm" href="portraits.html"><img src="images/navportraits.png" alt=""/></a></li>
       <li><a class="nm" href="gallery.html"><img src="images/navgallery.png" alt=""/></a></li>
       <li><a class="nm" href="crazy.html"><img src="images/navcrazy.png" alt=""/></a></li>
       <li><a class="nm" href="contact.html"><img src="images/navcontactus.png" alt=""/></a></li>
       <li><a href="sales.html"><img src="images/navsales.png" alt=""/></a></li>
      </ul>
      </div><!-- end of #Nav -->
     </div><!-- end of #Navcontainer -->
     <div class="spacer15"></div><!-- 15px Spacer -->
     <div id="Pagetitle">
      <img src="images/pagetitlehome.png" alt=""/>
     </div><!-- end of #Pagetitle -->
     <div class="spacer15"></div><!-- 15px Spacer -->
     <div id="Pagecontainer">
      <div id="Pagehome">
      <div class="spacer7"></div>
       <div id="fadeshow1"></div>
    
       <div class="Hometext">
        <p>Welcome to the site, please have a look around and see what we can offer you.</p>
        <br><br style='font-size:2px;'>
        <p>Big Lamp can offer a range of services to suit all tastes and budgets, we offer a very individual service and we can even set up a studio in your home.</p>
        <br><br style='font-size:2px;'>
        <p>Please enjoy the site and let us know if we can help you.</p>
       </div><!-- end of #Hometext -->
      </div><!-- end of #Pagehome -->
      <div id="Bottomborder"></div>
     </div><!-- end of #Pagecontainer -->
    </body>
    
    </html>

    CSS
    Code:
    * {
     margin:0;
     padding:0;
    }
    
    img {
    border:none;
    }
    
    body {
    }
    
    ul{
    list-style-type:none;
    font-size: 0px;
    }
    
    /***** GOOGLE *****/
    
    #Google {
    Display:none;
    }
    
    /***** NAVBAR STYLES *****/
    
    #Navcontainer{
    background-image: url("images/navbg.png");
    background-repeat: repeat-x;
    height: 69px;
    text-align:center;
    vertical-align: middle;
    overflow:auto
    }
    
    #Nav {
    width: 902px;
    margin: 27px auto 0;
    text-align: center;
    }
    
    #Nav ul {
    list-style-type: none;
    }
    
    #Nav li {
    display:inline;
    margin-right: 40px;
    }
    
    
    /***** CONTENT STYLES *****/
    
    #Pagecontainer {
    text-align:center;
    
    }
    
    #Page{
    background-color:#000980;
    width: 902px;
    margin: 0 auto;
    }
    
    #Page img {
    border: 1px solid white;
    }
    
    #Pagetitle {
    text-align: center;
    }
    
    #Bottomborder {
    margin-top: 30px;
    border-bottom: 2px solid #000980;
    }
    
    .Hometext {
    color: #000980;
    width: 888px;
    margin: 6px auto 0;
    text-align: center;
    padding-top: 30px;
    background-color: white;
    font-size: 16pt;
    font-family: ariel;
    }
    
    .spacer15 {
    height: 15px;
    }
    
    .spacer60 {
    height: 60px;
    }
    
    .Imagecontainerone {
    padding: 6px 0 0 0;
    }
    
    .Imagecontainerone .Leftlist {
    Width: 442px;
    float: left;
    margin: 0 3px 0 6px;
    }
    
    .Imagecontainerone .Leftlist li{
    margin: 0 0 6px 0;
    }
    
    .Imagecontainerone .Rightlist {
    Width: 442px;
    float: right;
    margin: 0 6px 0 3px;
    }
    
    .Imagecontainertwo {
    margin: 6px 0 0 0;
    }
    
    .Imagecontainertwo .Leftlist {
    Width: 442px;
    float: left;
    margin: 0 3px 0 6px;
    }
    
    .Imagecontainertwo .Rightlist {
    Width: 442px;
    float: right;
    margin: 0 6px 0 3px;
    }
    
    .Imagecontainertwo .Rightlist li{
    margin: 0 0 6px 0;
    }
    
    .Landscapeimage {
    margin: 0 6px 0 6px;
    }
    
    .Clear {
    clear:both;
    }
    
    /***** FADESLIDESHOW STYLES *****/
    
    .spacer7 {
    height: 7px;
    }
    
    #fadeshow1 {
     width: 888px;
     height:305px;
     text-align: center;
     margin: 0 auto;
    }
    
    /***** HOMEPAGE PAGE LAYOUT *****/
    
    #Pagehome {
    background-color:#000980;
    width: 903px;
    height: 319px;
    margin: 0 auto;
    min-height: 319px;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Samuel235,
    Do you mean #Bottomborder should be seperated from #Pagecontainer?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    You have set a fixed height on #Pagehome. If you remove it, #Bottomborder will go to the bottom of the text.

    Edit: Excavator's solution is better.
    Last edited by kansel; 04-13-2011 at 04:40 PM. Reason: beat to the punch

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by kansel View Post
    You have set a fixed height on #Pagehome. If you remove it, #Bottomborder will go to the bottom of the text.

    Edit: Excavator's solution is better.
    Darn, well that was an obvious mistake, thanks for that guys


  •  

    Posting Permissions

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