Forum Moderators: not2easy

Message Too Old, No Replies

navigation

cannot get my navigation to align right

         

quartzy

2:52 pm on Dec 26, 2007 (gmt 0)

10+ Year Member



I have two navigations on the homepage I am working on, I am new to CSS. The top navigation sits on the main content and I have tried to get it to align further up the page but am having problems. The second navigation has problems too, the first item on the list lines up correctly as it has two rows to it, but further items on the list align to the top and not centred as I would prefer.

quartzy

2:55 pm on Dec 26, 2007 (gmt 0)

10+ Year Member



I did not enter the code:
html
<code> <div id="leftcontent"><p><img border="0" src="images/pheonix.jpg" width="117" height="155"></p>
</td>
<td valign="top">
<div id="topnavigation">
<ol>
<li><a href="sitemap.htm">site map</a></li>
<li><a href="say.htm">your say</a></li>
<li><a href="about.htm">about</a></li>
<li><a href="referrals.htm">referrals</a></li>
<li><a href="benefits.htm">benefits</a></li>
<li><a href="contacts.htm">contacts</a></li></ol>
</div>
<div id="content"><h1>SNAP</h1>

the css is:
<code> #topnavigation ( text-align: right;
border: 1px solid;
color: #6600CC;
padding: 3px;
text-decoration: none;
height: 24px; }

#topnavigation li { display: inline; }

#topnavigation a { background: #fff;
color: #6600CC;
border: 1px solid;
padding: 3px;
margin: 2px;
float: right; }

#topnavigation a:hover {background: #e60073; }

#topnavigation a:active { background: #e60073; }

#navigation { padding: 1;
margin: 1px;
text-align: left;
color: #6600CC;

}

#navigation li { margin-bottom: 3px; }

#navigation a { background: #fff;
display: block;
width: 105px;
height: 30px;
border: 1px solid;
color: #6600CC;
padding: 1px;
margin: 1px;}

#navigation a:hover { background: #e60073;
text-decoration: none; }

quartzy

5:08 pm on Dec 26, 2007 (gmt 0)

10+ Year Member



Everything works OK now, what I did was use a

clear: both;

to align the top navigation. I have given up on centering the other navigation, it does not look too bad.

Thing is, when I checked in the browser, both of my navigation lists styling does not work in firefox. They appear next to each other, as regular links. I guess this is a bug that needs fixing.