www.webdeveloper.com
Results 1 to 6 of 6

Thread: Can I remove a ul indent

  1. #1
    Join Date
    Aug 2003
    Location
    Glasgow, Scotland
    Posts
    211

    Can I remove a ul indent

    Hi

    I've attached a screenshot of my problem. My menu bar is too far to the right which I'm guessing is because the <ul> tag makes it indent. Does anyone know how to get it running alongside the rest of the text?

    The site isn't up yet and is on my PC. I have this for my menu bar at the moment:

    <img src="logo.jpg" alt="logo.jpg" />
    <ul class="navborder" style="margin-top:30px; list-style-type:none;">
    <li><a href="default.asp" title="About Us" tabindex="1">About Us</a></li>
    <li><a href="lessons.asp" title="Lessons" tabindex="2">Lessons</a></li>
    <li><a href="theory.asp" title="Theory Test" tabindex="3">Theory Test</a></li>
    <li><a href="hints.asp" title="Hints and Tips" tabindex="4">Hints and Tips</a></li>
    <li><a href="faq.asp" title="F.A.Q's" tabindex="5">FAQs</a></li>
    </ul>

    In my external style sheet I've set a left and right margin of 10% and I also have this for the menu bar:

    ul li {display:inline; margin:0 10px 0 10px;}

    ul li a {border-left:8px solid white; text-decoration:none; padding-left:0px;}

    Hope someone can help, I don't think my CSS is good enough for this!

    Thanks
    Attached Images Attached Images

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Code:
    ul {margin: 0; padding: 0;}
    ul li {display:inline; margin:0 10px 0 10px; padding: 0;}
    ul li a {border-left:8px solid white; text-decoration:none; padding:0;}
    This should get you aligned with the left edge. Adjust the values as needed.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Aug 2003
    Location
    Glasgow, Scotland
    Posts
    211
    Thanks for that, but now my text is all overlapping. Should the first ul ul {margin: 0; padding: 0;}, go in my external stylesheet?

    Can you explain what it's doing so that I can adjust the values.....looks a bit of a mess and i'm not too sure what to change.

    Thanks so much for your help!

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Huh -- It works for me:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    ul {margin: 0; padding: 0;}
    ul li {display:inline; margin:0 10px 0 10px; padding: 0;}
    ul li a {border-left:8px solid white; text-decoration:none; padding:0;}
    </style>
    </head>
    
    <body>
    <ul>
    <li><a href="">as;ldkfj;slkfj</a></li>
    <li><a href="">aslkdfj</a></li>
    <li><a href="">a;lsdkfj</a></li>
    </ul>
    </body>
    </html>
    Check what you've got against mine...
    Since they're inline & if you want them uniform in size, you may need to determine widths for the <li>.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  5. #5
    Join Date
    Aug 2003
    Location
    Glasgow, Scotland
    Posts
    211
    Aaargh, I know what I'd done. When you posted your first response, I'd found a solution that suggested using a -x px to move it in.......it was still there, which was how I ended up with the overlapping text!

    10:30 and I think I've been working on this too long! Sorry and thanks again for your help!

    It's as close as I'll get it because I have a left border on it......looks much better.

    Can't thank you enough, was nearly pulling my hair out

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I run into this problem quite a bit too... that 40-pixel 'gap' that is assumed for the bullets to reside, -even if you cite "inline" which removes the bullets, it seems as if I still end up with that left-hand 'gap' which in tight real estate space can be annoying.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles