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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Hereford
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Align vertical navbar within its div

    Hi, I'm trying to layout a page using CSS only.
    I have a div (lhnavbar) to hold a vertical navbar, which I have floated left, and looks OK. Within that div I have created a vertical navbar (lhnb). This also looks OK. However, the navbar is sitting half out of it's div, overlapping the centre main page, and I can't get it to sit back within it's holder e.g aligned left.
    html:
    </div>
    <div id="lhnavbar"><h1>SERVICES</h1>
    <ul id="lhnb">
    <li><a id="leftlinks" href="index.html">Home</a></li>
    <li><a id="leftlinks" href="bookkeeping.html">Bookkeeping</a></li>
    <li><a id="leftlinks" href="accounting.html">Accounting &amp; Accounts Preparation</a></li>
    <li><a id="leftlinks" href="personaltax.html">Personal Tax</a></li>
    <li><a id="leftlinks" href="businesstax.html">Business Tax</a></li>
    <li><a id="leftlinks" href="corporatetax.html">Corporate Tax</a></li>
    <li><a id="leftlinks" href="vat.html">VAT</a></li>
    <li><a id="leftlinks" href="payenic.html">PAYE &amp; NIC</a></li>
    <li><a id="leftlinks" href="itcontractors.html">IT Contractors</a></li>
    <li><a id="leftlinks" href="accountingsoftware.html">Accounting Software</a></li>
    <li><a id="leftlinks" href="comprehensive.html">Comprehensive Service</a></li>
    <li><a id="leftlinks" href="businessfinance.html">Business Finance</a></li>
    <li><a id="leftlinks" href="businessstartups.html">Business Start Ups</a></li>
    <li><a id="leftlinks" href="companyformation.html">Company Formation</a></li>
    <li><a id="leftlinks" href="audit.html">Audit</a></li>
    <li><a id="leftlinks" href="localservice.html">Local Service</a></li>
    </ul>
    </div>]
    CSS (for div):
    [#lhnavbar{position:relative;float:left;width:14.5%;background:yellow;font-size:100%;padding:0px;text-align:center;}]
    CSS (for navbar):
    [#lhnb{list-style-type:none;postion:relative;margin:none;padding:none;}]

    I've removed padding/margins etc to see if that was causing problem.
    Can anyone please tell me from the above what I need to do to drift the navbar left to fit into it's div holder ?
    Many thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I have a div (lhnavbar) to hold a vertical navbar, which I have floated left, and looks OK. Within that div I have created a vertical navbar (lhnb). This also looks OK. However, the navbar is sitting half out of it's div, overlapping the centre main page, and I can't get it to sit back within it's holder e.g aligned left.
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Try changing the text-align:center; to text-align:left;

    Code:
    #lhnavbar {
    position:relative;
    float:left;
    width:14.5%;
    background:yellow;
    font-size:100%;
    padding:0px;
    text-align:left;
    }
    Also as abduraooft said giving us a link could help us help you further.

    Andy

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Hereford
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you both for looking.
    Changing the "align:left;" moves the div text heading "Services" (which is correctly located) but doesn't alter the position of the navbar. I've tried every permutation of alignment that I can think of, to no avail.
    I'm sure it will turn out to be something very elementary, just have to discover what it is!
    I'll try and load up the site as it stands, and re-post when done, it may take me some time to figure that process out too!
    Please ignore the garish colours (colors!) when I do get it loaded, I've given each div a different back-ground so that I can see what I'm doing.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Hereford
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi, I've loaded the intended Home Page (index.html) at http://www.grahammorris.plus.com/
    Location of left hand nav bar should be obvious ?
    (Obviously top nav bar needs more work yet!)
    Please feel free to make any other constructive comments, I'm very new at this!!
    Regards

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    First and foremost, your current DOCTYPE is incomplete, which may turn some browsers into quirks mode. I'd recommend an HTML4.01 Strict one instead.

    Then take a look at http://bonrouge.com/3c-hf-fluid.php to see how to make a good 3 column layout.

    Now, to your issue, add
    Code:
    *{margin:0;padding:0;}
    into your CSS to remove all browser specific default margins and paddings from all elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Negger (07-09-2010)

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Hereford
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excellent, done the job very nicely! Presumably this is the equivalent of 'removing all formatting' from a word processed doc ? Is this a good place to start any page, and then re-insert any formatting you wanted, and it would probably 'cure' a lot of other oddities ?
    I'll have a look through your link and see what changes I can make.
    Many thanks for taking the time to look at this.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Is this a good place to start any page, and then re-insert any formatting you wanted, and it would probably 'cure' a lot of other oddities ?
    Yes, I use it always.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Hereford
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi again, Further to advice above, I have completely re-designed page, solved some of previous problems, created new ones, & solved some of those !
    Main issue now is regard to height of nested divs in different browsers. I've played with height:100%, overflow:auto, but still not correct in all browsers ? I've posted two pages, one short, one long, to show the problem. IE8 is probably best, but others are chopping off the bottom of the div=main (or rather it's being hidden behind div=footer) rather than it pushing the footer down.
    A few other glitches I think I can sort out, but any advice on the above, and top-nav-bar wrapping in IE8, would be much appreciated. I have validated html & css (but not yet changed doctype!)
    www.grahammorris.plus.com
    index.html (short)
    bookkeeping.html (long)
    demo.css
    Many thanks again

  • #10
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Hereford
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Finally sorted a lot of the problem by using [ min-height:100% ] rather than [height:100% ] in the nested/ing divs ? I've yet to see if this causes problems elsewhere!


  •  

    Posting Permissions

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