Vanishing elements.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Topheros
    New Member
    • Dec 2007
    • 2
    #1

    Vanishing elements.

    In my layout, I have a left sidebar used for navigation created by CSS and I use HTML to put the content in it. I also have a middle section for the main content. Well, whenever I put a certain amount of content in the middle section, all the other sections disappear. I just noticed now, that the sections I coded above the main section stay there. So I tried moving the codes for the left navigation and the bottom section above the main section and now they still appear there. However, the bottom section is now above the main content area and I don't want that. Can someone please tell me how I can move it back to its original position and still put as much content in the main area as I wish? Also, is there something I can do so I can put codes anywhere on the sheet, and not have to worry about them disappearing? Thank you.
    EDIT: I tried continuing adding content, even though the bottom section won't appear, and anything added on to what's already there won't appear at all. If it'll help, the content that I'm adding is images.
    Last edited by Topheros; Dec 2 '07, 07:04 PM. Reason: Additional content won't show up.
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Link .

        Comment

        • Topheros
          New Member
          • Dec 2007
          • 2
          #3
          I don't know if you needed the HTML code or CSS code. So, I posted both.

          HTML:
          [html]
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

          <html>
          <head>
          <link rel="stylesheet " href="style.css " type="text/css">
          <title>MySpac e Layouts | Graphics & More!</title>
          </head>

          <body>
          <div id="top"></div>

          </div>


          </div>
          </div>

          </div>

          <div id="nav">
          <div id="nav2">

          <div class="navbg">
          <h3>Main</h3>
          <a href="index.htm l">Home</a>
          <a href="contact.h tml">Contact</a>
          <a href="about.htm l">About</a>
          </div>

          <div class="navbg">
          <h3>Graphics</h3>
          <a href="layouts.h tml">MySpace Layouts</a>
          <a href="icons.htm l">Icons</a>
          <a href="brushes.h tml">Brushes</a>
          <a href="backgroun ds.html">Backgr ounds</a>
          </div>

          </div>
          </div>
          </div>



          <div id="inside">
          <div id="contents">
          <div id="contents2" >

          <h1>Video Games</h1>
          <p><strong>Soni c the Hedgehog Characters</strong></p>
          <p><center><a href="images/sonic1ss.jpg">< img src="images/sonic1tn.jpg"></a></center>
          <p><center><tex tarea readonly="true" rows="5" cols="20">LAYOU T CODE GOES HERE.</a></textarea>

          <p><strong>Clas sic Sonic the Hedgehog Title Screens</strong></p>
          <p><center><a href="images/sonic2ss.jpg">< img src="images/sonic2tn.jpg"></a></center>
          <p><center><tex tarea readonly="true" rows="5" cols="20">LAYOU T CODE GOES HERE.

          <p><strong>Ha lo 3 Layout 1</strong></p>
          <p><center><a href="images/halo1ss.jpg"><i mg src="images/halo1tn.jpg"></a></center>
          <p><center><tex tarea readonly="true" rows="5" cols="20">LAYOU T CODE GOES HERE.

          </div>
          </div>
          </div>

          <div id="border">

          <div id="rights">
          <div id="rights2">

          Web site is owned by <a href="#">Me</a>.

          </div>
          </div>

          </div>
          </body>
          </html>
          [/html]
          CSS:
          [code=css]
          body {
          background: #000000 url('images/treethunder.jpg ') no-repeat;
          background-color: #2200f4;
          background-position: center center;
          background-attachment: fixed;
          color: #00FF00;
          font: 8pt Arial, sans-serif;
          margin-left: 120px;
          padding: 0;
          }

          a {
          background: inherit;
          color: #3300CC;
          font-weight: bold;
          text-decoration: none;
          }

          a:hover {
          background: inherit;
          color: #9933FF;
          }

          #top {
          width: 750px;
          height: 183px;
          background: #000000 url('images/stbanner1.jpg') no-repeat;
          color: inherit;
          }

          #inside {
          width: 750px;
          }

          #contents {
          width: 550px;
          float: right;
          }

          #contents2 {
          margin: 16px 15px;
          }

          h1, h3 {
          background: #00FF00;
          border-top: 1px solid #00FF00;
          border-left: 1px solid #00FF00;
          border-right: 1px solid #00FF00;
          border-bottom: 1px solid #00FF00;
          color: #000000;
          font: bold 9pt Arial, sans-serif;
          letter-spacing: 2px;
          margin: 0px;
          padding: 1px 1px 1px 6px;
          text-transform: uppercase;
          }

          #contents p {
          padding: 0px 5px;
          text-align: justify;
          }

          #nav {
          position: absolute;
          width: 200px;
          float: left;
          }

          #nav2 {
          position: relative;
          margin: 10px;
          }

          .navbg {
          background: #000000;
          margin: 10px 5px;
          padding: 1px;
          }

          #nav a {
          background: #000000;
          border-top: 1px solid #000000;
          border-left: 1px solid #00FF00;
          border-right: 1px solid #00FF00;
          border-bottom: 1px solid #00FF00;
          color: #00FF00;
          display: block;
          font: bold 8pt Arial, sans-serif;
          margin: 2px 0px 2px 0px;
          padding: 3px 5px 3px 3px;
          text-align: right;
          }

          #nav a:hover {
          position: relative;
          background: #00FF00;
          border-top: 1px solid #009900;
          border-left: 1px solid #009900;
          border-right: 1px solid #CCFFCC;
          border-bottom: 1px solid #CCFFCC;
          color: #000000;
          }

          #border {
          width: 750px;
          border-top: 1px solid ;
          clear: both;
          }

          #rights {
          width: 750px;
          height: 100px;
          color: #000066;
          }

          #rights2 {
          padding: 50px 0px 20px 120px;
          }
          [/code]
          Last edited by drhowarddrfine; Dec 2 '07, 11:06 PM. Reason: Please use code tags; fixed misplaced end tags

            Comment

            Previous template Next
            Working...