Thread: Aligning a Horiz. Nav Bar

I ran into a CSS probelm last night on a Horiz. Nav Bar, which I have in my header. I found a solution, but don't know if it is kosher-meaning am not sure if I have used the proper tag or not.

I have four text links in a horizontal line on my header logo. When I installed them they showed up at the top left of the header instead of the bottom left where I wanted them. I tried to align them to the bottom with text align and positioning tags, but none worked...

The only thing that worked was to set margin-top: 90px, which forced the text from the top left to the bottom left.

Is this a proper way to do this or?

When you used absolute positioning for the links did you make sure that the header (or whatever container the links were located inside) was set to relative?

Uh....nooooo! Was I supposed to?

I am also having problems with my vertical navbar on the left hand side. I have about the same problem, whereby I cannot get the text to center in the column...Not centering the links, but getting the whole navigation to center in the column.

I'll give your suggestion a whirl

OK...I did see an error on Firefox that said that the margin-top: 90px; was the improper tag to use for moving the horizontal links from the top of the header to the bottom of the header. I haven't tried the postioning element yet, but think that is it.

On the other side, I have been trying for an hour to center the vertical navigation text in the left hand column. I went to navlinks header and put in position: relative; with no other value. I then went to the .navlinks ul and put in the postion: absolute; right 2em. This has forced the text in the left hand column to center properly, but now the links are scrunched onto two lines vs one line.

I have checked W3cSchools and several other sites without any luck..I have tried various methods of margins and positioning without efect.

Any help appreciated...

Originally Posted by sgtmac66

Uh....nooooo! Was I supposed to?

I am also having problems with my vertical navbar on the left hand side. I have about the same problem, whereby I cannot get the text to center in the column...Not centering the links, but getting the whole navigation to center in the column.

I'll give your suggestion a whirl

Unless Im mistaken, the browser should automatically center them when using a UL tag. Try copy and pasting this code(if you wish) as an effort to track your problem. No style should be needed for centering.

<div class="Navigation">

<h3>

Accommodations
</h3>
<ul>
<li><a href="#">Navigation Link 1</a></li>
<li><a href="#">Navigation Link 2</a></li>
<li><a href="http://www.sitesell.com/">Navigation Link 3</a></li>
<li><a href="#">Navigation Link 4</a></li>

<li><a href="#">Navigation Link 5</a></li>
</ul>

<h3>
Activities
</h3>
<ul>
<li><a href="#">Navigation Link 6</a></li>
<li><a href="#">Navigation Link 7</a></li>

<li><a href="#">Navigation Link 8</a></li>
<li><a href="#">Navigation Link 9</a></li>
<li><a href="#">Navigation Link 10</a></li>
</ul>
</div>

Alternatively, if your website is live, you can post a link, so we can firebug it.

Originally Posted by sgtmac66

I ran into a CSS probelm last night on a Horiz. Nav Bar, which I have in my header. I found a solution, but don't know if it is kosher-meaning am not sure if I have used the proper tag or not.

I have four text links in a horizontal line on my header logo. When I installed them they showed up at the top left of the header instead of the bottom left where I wanted them. I tried to align them to the bottom with text align and positioning tags, but none worked...

The only thing that worked was to set margin-top: 90px, which forced the text from the top left to the bottom left.

Is this a proper way to do this or?

You could also try this:


INDEX:
<div id="Header">
<div class="Liner">



***NAVBAR***
</div>
</div>


STYLE:
#Header .Liner {
padding: 70px 50px;
}

Lisa was right on..it was the position: relative and position: absolute that were the problems.....I have a lot of CSS figured out, but I can see where these position tags will give a lot of trouble.

I spent a good couple of hours, trying to figure this out, lol

Thanks Lisa

Originally Posted by sgtmac66

Lisa was right on..it was the position: relative and position: absolute that were the problems.....I have a lot of CSS figured out, but I can see where these position tags will give a lot of trouble.

I spent a good couple of hours, trying to figure this out, lol

Thanks Lisa

Great, glad I could help. I had that same problem with my site a few months back and that was the issue.

Hey Sgtmac66: I believe that I am experiencing some what the same problem you were. I am having a difficult time in creating a horizontal nav section; my tabs won't align in the box provided, it aligns to the left and outside of the box. I have positioned by tabs at every part of the nav coding section I could think of, but it still positions outside of the box and to the left. and when I go to type the next tab, it attaches to the unlined tab which I have already typed. I just cannot get the tab to align appropriately inside the boxes. I have provided both my html coding and css for any that may be able to help wit the problem I am experiencing.
Thanks!




<div class="float-r">
<ul>
<li><a href="index.html"><img src="images/m1.gif" alt="" /></a></li>
<li><a href="index-1.html"><img src="images/m2.gif" alt="" /></a></li>
<li><a href="index-2.html"><img src="images/m3.gif" alt="" /></a></li>
<li><a href="index-3.html"><img src="images/m4.gif" alt="" /></a></li>
<li><a href="index-4.html"><img src="images/m5.gif" alt="" /></a></li>
</ul>
<div class="box1">
<div class="box-left">
<div class="box-top">
<div class="box-right">
<div class="box-top-left">
<div class="box-top-right">
<div class="box-bottom-left">
<div class="box-bottom-right">
<img class="title" alt="" src='images/box1-title.gif' />
<div class="wrapper">
<form action="" id="logIn-form" enctype="multipart/form-data">
<div class="float-l">
Email adress:
<div class="form1"><input type="text" name="mail" /></div>
</div>
<div class="float-l">
Password:
<div class="form2"><input type="text" name="pass" /></div>
</div>
<div class="float-l extra"><input class="form3" type="checkbox" />&nbsp;Remember me</div>
<div class="float-r"><a href="#" class="link" onclick="document.getElementById('logIn-form').submit()"><span>SIGN IN</span></a></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>




#header {background:url(images/header-bg.jpg) top left no-repeat; padding-top:47px;}
#header .logo {padding-left:56px; height:447px;}
#header .country {background:#1A1A1A; color:#B8C8BE; line-height:1em; padding:12px 0 0 26px; margin-left:5px;}
#header .country img {margin:2px 2px 0 0;}
#header .float-r ul {padding-bottom:42px; height:26px;}
#header .float-r li {float:left;}
#header .float-r li a {background:none; padding:0;}
#header .link-un {margin-left:9px;}
.box1 {margin-bottom:1px;}
.box2 {margin-right:1px;}
.box1, .box2 {color:#ffffff;}
.box2, .box3 {float:left;}

.box1 {background:#59A87C url(images/box1-bot.gif) bottom left repeat-x;}
.box1 .box-left {background:url(images/box1-left.gif) top left repeat-y;}
.box1 .box-top {background:url(images/box1-top.gif) top left repeat-x;}
.box1 .box-right {background:url(images/box1-right.gif) top right repeat-y;}
.box1 .box-top-left {background:url(images/box1-top-left.gif) top left no-repeat;}
.box1 .box-top-right {background:url(images/box1-top-right.gif) top right no-repeat;}
.box1 .box-bottom-left {background:url(images/box1-bot-left.gif) bottom left no-repeat; width:100&#37;;}
.box1 .box-bottom-right {background:url(images/box1-bot-right.gif) bottom right no-repeat; padding:17px 29px 23px 29px; height:68px;}

.box2 {background:#BB040B url(images/box2-bot.gif) bottom left repeat-x; font-family:Tahoma, Geneva, sans-serif; font-size:0.917em; line-height:1em;}
.box2 .box-left {background:url(images/box2-left.gif) top left repeat-y;}
.box2 .box-top {background:url(images/box2-top.gif) top left repeat-x;}
.box2 .box-right {background:url(images/box2-right.gif) top right repeat-y;}
.box2 .box-top-left {background:url(images/box2-top-left.gif) top left no-repeat;}
.box2 .box-top-right {background:url(images/box2-top-right.gif) top right no-repeat;}
.box2 .box-bottom-left {background:url(images/box2-bot-left.gif) bottom left no-repeat;}
.box2 .box-bottom-right {background:url(images/box2-bot-right.gif) bottom right no-repeat; height:329px;}
.box2 .text {padding:22px 35px 0 33px;}
.box2 .text .inner .float-l {width:auto !important; line-height:1em; height:35px;}
.box2 .text .inner .float-l span {display:block; padding-top:4px;}

.box3 {background:#87A392 url(images/box3-bot.gif) bottom left repeat-x;}
.box3 .box-left {background:url(images/box3-left.gif) top left repeat-y;}
.box3 .box-top {background:url(images/box3-top.gif) top left repeat-x;}
.box3 .box-right {background:url(images/box3-right.gif) top right repeat-y;}
.box3 .box-top-left {background:url(images/box3-top-left.gif) top left no-repeat;}
.box3 .box-top-right {background:url(images/box3-top-right.gif) top right no-repeat;}
.box3 .box-bottom-left {background:url(images/box3-bot-left.gif) bottom left no-repeat;}
.box3 .box-bottom-right {background:url(images/box3-bot-right.gif) bottom right no-repeat; padding:22px 29px 48px 29px;}
.box3 a {cursorointer;}

#header .link {text-decoration:none; font-weight:bold; display:block; color:#FFFFFF; text-align:center; float:left; font-family:Tahoma, Geneva, sans-serif;}
#header .link span {display:block; padding:4px 0 5px;}
#header .box1 .link {background:#335F44 url(images/box1-button.gif) top right no-repeat; font-size:0.917em; line-height:1em;}
#header .box1 .link span {background:url(images/box1-button.gif) top left no-repeat;}
#header .box2 .link {background:#761213 url(images/box2-button.gif) top right no-repeat;}
#header .box2 .link span {background:url(images/box2-button.gif) top left no-repeat;}

#header .box1 .float-l,
#header .box1 .float-r {width:auto;}
#header .box1 .extra {padding:20px 0 0 8px;}