...

View Full Version : Align vertical navbar within its div



Negger
07-08-2010, 12:31 PM
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

abduraooft
07-08-2010, 01:47 PM
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?

ahayzen
07-08-2010, 01:50 PM
Try changing the text-align:center; to text-align:left;



#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

Negger
07-09-2010, 09:46 AM
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.

Negger
07-09-2010, 12:43 PM
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

abduraooft
07-09-2010, 01:07 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
First and foremost, your current DOCTYPE (http://www.alistapart.com/articles/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
*{margin:0;padding:0;} into your CSS to remove all browser specific default margins and paddings from all elements.

Negger
07-09-2010, 04:21 PM
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.

abduraooft
07-09-2010, 04:43 PM
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.

Negger
07-15-2010, 02:07 PM
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

Negger
07-16-2010, 03:13 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum