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 to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Positioning problem...

    I'm nearing the end of the HTML/CSS lessons in Code Academy and am currently working on a page of my own as practice. I'm impressed with what I've been able to do with it so far but I've got a serious problem with <div>s in <div>s right now. I'm trying to have this black sidebar with a few buttons down it. And I think I did pretty good on it. But I'm trying to make the body background a tan color and a <div> (which has the id="page") over it with a slightly lighter color to make dark bars on the sides of the page. Then I want a top bar. The top of which will be flush with the top of the side bar and extend to just 15px short of the end of "page". However....everything has scrunched up toward the top except for the sidebar (which I have shown with the blue dotted outlines). As far as I can tell, I've placed all the <div>s correctly. The sidebar and "content" should be inside of "page", right? And "page" is inside of <body>. What am I doing wrong?

    This is the html part.
    Code:
    <!DOCTYPE html><html>
    <head>
          <title>Good Web Page</title>
          
          <link type="text/css" rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
          <div id="page">
               <div id="side_bar">
                    <img src="http://fc02.deviantart.net/fs70/f/2014/114/4/7/profile_picture_by_mattboy115-d7fuf4p.png">
                         <h2>Matthew Lee</h2>
    
                         <div id="buttons"><a href="http://netflix.com">Home</a></div>
                         <div id="buttons"><a href="http://mattboy115.webs.com">My Website</a></div>
                         <div id="buttons"><a class="smaller" href="http://nick.com">Another Botton</a></div>
                         <div id="buttons"><a href="http://codeacaemy.com">And This One</a></div>
                         <div id="buttons"><a href="http://lemonparty.com">This One Too</a></div>
               </div>
          <div id="content"></div>
          </div>
    </body>
    </html>
    And this is the style page.
    Code:
    body {
      width: 1200px;
      margin:auto;
      background-color:#CCCCA7;
    }
    #page {
      width:960px;
      height:1000px
      background-color:#DFDFAB;
      margin:auto;
    }
    #side_bar {
               height: 800px;
               width:300px;
               padding-top: 15px;
               margin-left:20px;
               background-color:black;
               margin-top: 20px;
               margin-bottom: 20px;
               border-radius:30px;
               float:left;
    }
    #buttons {
               display: block;
               margin:auto;
               margin-top:1px;
               width:250px;
               height:50px;
               background-color:#D1D1D1;
               border:2px solid;
               border-color:#545454;
               border-radius:5px;
               text-align:center;
               vertical-align:middle;
               line-height:50px;
               font-family:verdana;
               font-size:30px;
               color:#545454;
    }
    div img {
               display: block;
               width: 225px;
               margin:auto;
               margin-top:15px;
               border: 1px solid white;
    }
    div h2 {
               color:white;
               font-family:verdana;
               text-align:center;
    }
    a:link {
      color:#545454;
      text-decoration:none;
    }
    a:visited {
      color:#545454;
      text-decoration:none;
    }
    a:hover {
      font-family:verdana;
      font-weight:bold;
      text-decoration:underline;
    }
    .smaller {
      font-size: 28px;
    }
    p {
      margin:auto;
    }
    * {
      border: blue dashed 1px;
    }

  • #2
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I just noticed that I forgot to put the "content" styling back in the CSS. That wasn't the problem though because it still didn't work when I had it. It should be 200px high, white with a 2px black solid border.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Don't think this is everything but it is a start:
    #page {
    width:960px;
    height:1000px <---- THIS NEEDS TO END IN A SEMI-COLON.
    background-color:#DFDFAB;
    margin:auto;
    }
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    mattboy115 (04-30-2014)

  • #4
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much! I really thought I had all my semicolons.


  •  

    Tags for this Thread

    Posting Permissions

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