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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    delete left padding

    Hi,

    I have a basic structure and in that structure I have a menu with the tags <nav>, <ul> and <li>. Now is there a left padding (around 40px) on the <ul>. The strange thing is now, that I can't find the markup of that. I tried bugfire but that's not helping. Does anyone what is happening here?

    The HTML code is:
    [CODE]
    <!DOCTYPE html> <!-- The new doctype -->

    <html>
    <head>
    <meta charset="utf-8">
    <title>TITEL</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="styles2.css">
    </head>

    <body>

    <section> <!-- wrapper -->

    <header> <!-- headergedeelte met logo -->
    <h1>LOGOTEKST</h1>
    </header>

    <nav> <!-- navigatie verticaal -->
    <ul>
    <li><a href="#">nav01</a></li>
    <li><a href="#">nav02</a></li>
    <li><a href="#">nav03</a></li>

    </ul>
    </nav>

    <article> <!-- Content gedeelte -->
    <h2>KOP ARTIKEL</h2>
    ARTIKEL
    </article>

    <footer> <!-- Footer -->
    FOOTER
    </footer>

    </section> <!-- Einde wrapper -->

    </body>

    </html>
    [CODE]

    The CSS styling is:
    [CODE]
    @charset "utf-8";

    html{
    border: solid 1px red;
    }

    /* Article styles: */

    section{
    width: 960px;
    height: 800px;
    margin: 0 auto;
    border: solid 2px orange;
    }

    header{
    border: solid 1px blue;
    }

    ul{
    list-style-type: none;
    }

    article{
    float: left;
    width: 650px;
    border: solid 1px green;
    }

    /* Footer styling: */

    footer{
    float: left;
    border: solid 1px yellow;
    }
    [CODE]

    Regards,
    Kenneth

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    HTML lists have padding by default. Simply override it:
    Code:
    ul{
    list-style-type: none;
    padding: 0;
    }

  • Users who have thanked dan-dan for this post:

    hoven002 (05-18-2012)


  •  

    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
    •