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 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2014
    Location
    London
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie need some basic help which should be easy for the pros

    I need help creating a box on my site. At the moment all I have is a working navigation bar (the box ii to be used by users to upload the profile pic)

    I have tried inserting the following html code:

    <div id="piccontainer">

    </div>

    I have also inserted the following in the html pages linked css file:

    div#piccontainer {
    width: 800px;
    margin: 0px auto;
    background: #FFFFFF;
    padding: 0px;
    }

    but nothing happens.

    I would be really grateful if someone could help me.

    Thank you in advance

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    What you posted looks correct. But the errors are not always caused where they become obvious. Please post your entire code.

  • #3
    New Coder
    Join Date
    Jun 2014
    Location
    London
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the html file is the following:

    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    
        <meta charset="UTF-8">
        <meta name="keywords " content=" ">
        <meta name="author" content=" ">
        <meta name="description" content=" ">
        
        <title>CleanE</title>
        <!-- CSS -->
        
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
            <link rel="stylesheet" href="assets/css/navbar.css">
            <link rel="stylesheet" href="assets/css/supersized.css">
            
    </head>
    
    <body>
        <div class="page-container">
            <!-- NavigationBar -->
            <nav>
                <ul>
                    <li><a href="home.html">Logo(Dashboard)</a></li>
                    <li>
                 <!-- "Searchbar: required": Tells the browser that the search box requires some input for the form to work-->
                        <form>
                                    <input type="text" placeholder="Search..." required>
                                    <input type="button" value="Search">
                        </form>
                    </li>
                    <li><a href="profile.html">Profile</a></li>
                    <li><a href="messages.html">Logo(Messages)</a></li>
                    <li><a href="about.html">Logo(Action)</a></li>
                    <li><a href="Friends.html">Friends <span class="caret"></span></a>
                        <div>
                            <ul>
                                <li><a href="search.html">Search</a></li>
                                <li><a href="friends.html">Friends List</a></li>
                                <li><a href="followers.html">Followers</a></li>
                            </ul>
                        </div>
                    </li>        
                    <li><a href="settings.html">Logo(Settings)</a></li>
                </ul>
            </nav>        
        </div>
        
        <div id="piccontainer">
    
        </div>
        
            <!-- Javascript -->
            <script src="assets/js/jquery-1.8.2.min.js"></script>
            <script src="assets/js/supersized.3.2.7.min.js"></script>
            <script src="assets/js/supersized-init.js"></script>
            <script src="assets/js/scripts.js"></script>
            
    </body>
    
    </html>

    and the css is:

    Code:
    body {
      background-color: #EBE8E4;
      color: white;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 300;
      font-size: 15px;
    }
    
    div#piccontainer {
      width: 800px;
      margin: 0px auto;
      background: #FFFFFF;
      padding: 0px;
    }
    
    nav {
      background-color: #fff;
      border: 1px solid #dedede;
      border-radius: 4px;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
      color: #888;
      display: block;
      margin: 8px 22px 8px 22px;
      overflow: hidden;
      width: auto;
      /*
       * add to take out the wrap of the navigation bar "white-space: nowrap;"
       */
      
    }
    
      nav ul {
        margin: 0;
        padding: 0;
      }
    
        nav ul li {
          display: inline-block;
          list-style-type: none;
          
          -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            -ms-transition: all 0.2s;
            -o-transition: all 0.2s;
            transition: all 0.2s; 
        }
          
          nav > ul > li > a > .caret {
            border-top: 4px solid #aaa;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            content: "";
            display: inline-block;
            height: 0;
            width: 0;
            vertical-align: middle;
      
            -webkit-transition: color 0.1s linear;
               -moz-transition: color 0.1s linear;
               -o-transition: color 0.1s linear;
              transition: color 0.1s linear; 
          }
    
          nav > ul > li > a {
            color: #aaa;
            display: block;
            line-height: 56px;
            padding: 0 24px;
            text-decoration: none;
          }
    
            nav > ul > li:hover {
              background-color: rgb( 40, 44, 47 );
            }
    
            nav > ul > li:hover > a {
              color: rgb( 255, 255, 255 );
            }
    
            nav > ul > li:hover > a > .caret {
              border-top-color: rgb( 255, 255, 255 );
            }
          
          nav > ul > li > div {
            background-color: rgb( 40, 44, 47 );
            border-top: 0;
            border-radius: 0 0 4px 4px;
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
            display: none;
            margin: 0;
            opacity: 0;
            position: absolute;
            width: 165px;
            visibility: hidden;
      
            -webkit-transiton: opacity 0.2s;
            -moz-transition: opacity 0.2s;
            -ms-transition: opacity 0.2s;
            -o-transition: opacity 0.2s;
            -transition: opacity 0.2s;
          }
    
            nav > ul > li:hover > div {
              display: block;
              opacity: 1;
              visibility: visible;
            }
    
              nav > ul > li > div ul > li {
                display: block;
              }
    
                nav > ul > li > div ul > li > a {
                  color: #fff;
                  display: block;
                  padding: 12px 24px;
                  text-decoration: none;
                }
    
                  nav > ul > li > div ul > li:hover > a {
                    background-color: rgba( 255, 255, 255, 0.1);
                  }
      
      form {
                    width:auto;
    }
    .search {
                    background:rgba(50, 50, 50, 0.2);
    }
    .button {
                    position:relative;
                    left:-8px;
                    background-color:#207cca;
                    color:#fafafa;
    }
    .button:hover  {
                    background-color:#fafafa;
                    color:#207cca;
    }
    #faded {
        position:absolute;
        left:0;
        top:161px;
        padding-bottom:20px;
    }
    hopefully that helps


    all I want is to be able to create boxes and place them in relevant places on the site

    thanks
    Last edited by VIPStephan; 07-14-2014 at 12:15 AM. Reason: added code BB tags


  •  

    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
    •