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 4 of 4
  1. #1
    Junior Member
    Join Date
    Apr 2013
    Posts
    10
    Member #
    36126
    I am practicing my CSS/HTML5 coding. On my current exercise, I would like to have my navigation to display above the header, banner, or logo. I have managed to do it, except that my navigation always ends up "cut off" or separated from the rest of the container. I would like to know if there is a way to fix this.

    I have attached a screenshot of what the site looks like.

    Here is my code:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="none">
    <meta name="description" content="Practice">
    <title>Let's Build</title>
    <style>
     
    #container {  width:  80%;
                  min-width: 900px;
              margin: 0 auto;
                  margin-top: 20px;
    }
     
    #box {
              text-align: right;
              background-color: blue;
    }
    #box li {
              display: inline;
    }
    #box a {
            text-decoration: none;
            background-color: #fff;
        color: #000;
            margin: 5px;
            display: inline-block;
    }
     
    #header {
        color: #474747;   
        font-size: 1.4em;
        height: 200px;
        background-color: red;
    }
    #header h1 {
        padding-top: 50px;
        text-align: left;
    }
     
    </style>
    </head>
    <body>
    <div id="container">
    <div id="box">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>
    </div>
    <div id="header">
    <h1>Man of Steel</h1>
    </div>
    </div>
    </body>
    </html>
    Also, my current objective is to practice designing sites with different layouts/architecture. Does anyone know of any web sites that can be of assistance where I can be tasked with exercises for writing code for different page layouts?
    Attached Images Attached Images

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Code:
    #box ul {margin:  0;  padding: 0;}
    By default, an unordered list will have one of a margin or padding at the bottom, depending on the browser. This will fix that.

    Not sure of any sites that will give you practice exercises. htmlgoodies.com used to do that way way back in the day, but that was about 14 years ago.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by NorrinRadd, post: 251967, member: 36182
    I am practicing my CSS/HTML5 coding.
    Also, my current objective is to practice designing sites with different layouts/architecture. Does anyone know of any web sites that can be of assistance where I can be tasked with exercises for writing code for different page layouts?
    I think one of the best ways to practice is to actually make a site - one that has more than one page with more than one layout.

    So go ahead and make up a client, and create a site for them.

    So: here comes Mr. Dentist, who wants a website. He wants:
    • a home page that clearly lets people know right away that he does cosmetic dentistry as well as the regular stuff
    • an about page with his training, qualifications, diplomas, etc
    • one or more galleries, each for a different area of his work (cosmetic dentistry, gum disease, whatever)
    • a page listing the services he offers
    • a contact form with a dropdown list of options for the subject of the message (more info, book an appointment, just commenting, etc)

    Also, he hates the colour green, and while he likes blue, he feels that it is used a lot for corporate sites and he wants his site to be welcoming and relaxing - too many people fear the dentist.

    Now go ahead and make a site for this guy - you will find lots of challenges along the way!
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Just for the record, some of us don't fear the dentist...we're just conscientious objectors to unnecessary pain and getting gouged by people we have next to no choice but to visit.
    AlphaMare likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


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 09:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com