Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Jul 2009
    Posts
    26
    Member #
    19444
    Hi, my problem is that when a new 'div' tag shunts a pre-existing one further down the page, only the old div's content moves - the div itself stays in the same place. Here is a picture of an example:

    http://i303.photobucket.com/albums/nn134/mr-skill/Picture22.png


    The main box with the semi-opaque black background is a div called 'gallery'. I've inserted a navbar above this in it's own div, visible dimly behind the top of 'gallery'.

    The navbar has shunted the content of 'gallery' (6 pictures with captions) downwards, whilst 'gallery' itself has stayed in place. How do you make sure a div + its content will behave 'as one'? Help much appreciated, thanks.

    PHP 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>
    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
    title>Untitled Document</title>
    <
    link href="../overall.css" rel="stylesheet" type="text/css" />
    <
    style type="text/css">
    <!--
    .
    mugshots {
        
    padding10px;
    }
    #gallery {
        
    width673px;
        
    margin-rightauto;
        
    margin-leftauto;
        
    height170px;
        
    margin-top20px;
        
    margin-bottom20px;
        
    background-color#000000;
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
    }
    #pic1 {
        
    width112px;
        
    height163px;
        
    left0px;
        
    top0px;
        
    floatleft;
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
    }
    #pic2 {
        
    width112px;
        
    height163px;
        
    floatleft;
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
    }
    #pic3 {
        
    width112px;
        
    height163px;
        
    positionrelative;
        
    floatleft;
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
    }
    #pic4 {
        
    width112px;
        
    height163px;
        
    positionrelative;
        
    floatleft;
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
    }
    #pic5 {
        
    width112px;
        
    height163px;
        
    positionrelative;
        
    floatleft;
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
    }
    #pic6 {
        
    width112px;
        
    height163px;
        
    positionrelative;
        
    floatleft;
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
    }
    body {
        
    background-attachmentfixed;
        
    background-imageurl(../images/origs/deadelvisfw.png);
        
    background-positioncenter center;
        
    background-repeatno-repeat;
    }
    .
    leftmargin {
        
    margin-left10px;
    }
    -->
    </
    style>
    </
    head>

    <
    body>
    <
    div id="container">
      <
    div id="masthead">
        <
    h1>Dead Elvis</h1>
      </
    div>
      
      <
    div id="bozzle"><div align=center id="navbartop"><a href="../home/index.html" title="Home">Home</a> : <a href="../about/index.html" title="About">About</a> : <a href="../news/index.html">News</a> : <a href="index.html" title="Records">Records</a> : <a href="../pictures/index.html" title="Pictures">Pictures</a> : <a href="../contact/index.html" title="Contact">Contact</a> : <a href="../links/index.html" title="Links">Links</a> : <a href="../live/index.html" title="Live">Live</a></div></div>
      <
    div id="main">
        <
    div id="gallery">
          <
    div class="normtypecentre" id="pic1">
           <
    img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
              <
    span class="uppercasenormtcentre">James <br />
              
    Harker   </span></div>
          <
    div class="normtypecentre" id="pic2">
           <
    img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
               <
    span class="uppercasenormtcentre">Rae <br />
               
    Hicks     </span></div>
          <
    div class="normtypecentre" id="pic3">
           <
    img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
          <
    span class="uppercasenormtcentre">Louis <br />
          
    Lanfear  </span></div>
          <
    div class="normtypecentre" id="pic4">
           <
    img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
          <
    span class="uppercasenormtcentre">Jamie <br />
          
    Lees     </span></div>
          <
    div class="normtypecentre" id="pic5">
           <
    img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
          <
    span class="uppercasenormtcentre">Sam <br />
          
    Prentice    </span></div>
          <
    div class="normtypecentre" id="pic6">
           <
    img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
          <
    span class="uppercasenormtcentre"Davide Santi-Brooks</span></div>
        </
    div>
        </
    div>
      </
    div>
    </
    div>
    </
    body>
    </
    html

  2.  

  3. #2
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    Where are the CSS attributes for the nav bar DIV???

  4. #3
    Junior Member
    Join Date
    Jul 2009
    Posts
    26
    Member #
    19444
    Quote Originally Posted by imagn
    Where are the CSS attributes for the nav bar DIV???
    Apologies, these are in an external style sheet. They are:

    PHP Code:
    #navbartop {
        
    background-color#000000;
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
        
    width510px;
        
    margin-left19.75%;
        
    height1.2em;
        
    floatleft;


  5. #4
    Junior Member brandontran's Avatar
    Join Date
    Jul 2009
    Location
    Asheville, NC
    Posts
    21
    Member #
    19539
    I am seeing 170px as your height, and that's the size of that dark grey area. Try increasing it to 190px

    #gallery {
    width: 673px;
    margin-right: auto;
    margin-left: auto;
    height: 190px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #000000;
    opacity:0.80;
    -
    moz-opacity:0.80;
    filter:alpha(opacity=80);
    }
    Brandon Tran - Asheville Web Design

  6. #5
    Junior Member
    Join Date
    Jul 2009
    Posts
    26
    Member #
    19444
    Quote Originally Posted by brandontran
    I am seeing 170px as your height, and that's the size of that dark grey area. Try increasing it to 190px

    Thanks for your input, I've managed to get it sorted now


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com