...

View Full Version : Navigation alignment problem CSS



radamsiii
05-07-2008, 11:56 PM
I am new to this and have gotten myself stumped again.
I want three navigation links spread equally across my container.
Can only get two, what am I doing wrong.

CSS


#navigation
{
list-style-type: none;
margin: 0 auto;
padding: 0 auto;
}

#navigation li a
{
display: block;
width: 5em;
color: #FFFFFF;
background-color: #000099;
padding: .3em 0;
text-align: center;
}

#navigation li a:hover
{
color: #FFFFFF;
background-color: #660099;
}

#navigation .left { float: left; }
#navigation .right { float: right; }
#navigation .center { float: center; }


HTML


<div class="container">

<ul id="navigation">

<li class="left"><a href="pic6.html">Back</a></li>

<li class="right"><a href="pic2.html">Next</a></li>

<li class="center"><a href="javascript: self.close ()">Close</a></li>

</ul>
</div>

FWDrew
05-08-2008, 12:30 AM
Hi radamsii,

There is not a "float:center", there is left or right.

Try this :thumbsup: :

#navigation
{
list-style-type: none;
margin: 0 auto;
padding: 0 auto;

}

#navigation li a
{
display: block;
width: 5em;
color: #FFFFFF;
background-color: #000099;
padding: .3em 0;
text-align: center;
float:left;
}

#navigation li a:hover
{
color: #FFFFFF;
background-color: #660099;
}

HTML

<div class="container">

<ul id="navigation">

<li class="left"><a href="pic6.html">Back</a></li>

<li class="left"><a href="pic2.html">Next</a></li>

<li class="left"><a href="javascript: self.close ()">Close</a></li>

</ul>


Here is a test of the changes I made just for reference: http://drewsdesigns.com/codingforums/horizontal_links_radam.html

Regards,

Drew

radamsiii
05-08-2008, 12:49 AM
Thank you for your help but one more question. Perfect in everything except IE, is there a fix for that?

FWDrew
05-08-2008, 12:50 AM
Thank you for your help but one more question. Perfect in everything except IE, is there a fix for that?

I dont have IE so you will have to help me out. What is wrong in IE (and I am assuming IE 6)? A screen shot helps too if you can :thumbsup:

Drew

radamsiii
05-08-2008, 01:13 AM
IE7 actually and sorry but I could not copy the screenshot so I am attaching it as a .doc. they are being displaied as a step rather than the one right one center and one left effect I was hoping for. Sorry but I am about 4 weeks old in this so I have a very long way to go. Thank you for helping.

FWDrew
05-08-2008, 01:33 AM
Delete this line from your CSS and see if that works :)


display: block;


Drew

EDIT-I just tested that and used a browser shot and it still has the error.

rangana
05-08-2008, 02:44 AM
Replace the highlighted:


#navigation li a {
display: inline;
width: 5em;
color: #ffffff;
background-color: #000099;
padding: 0.3em 0;
text-align: center;
float: left;
}


...with display:block;

and add this in your CSS:


#navigation li{float:left;}


See if it helps :)

FWDrew
05-08-2008, 02:56 AM
Nice work Rangana, I should have seen that :rolleyes: You are the master :thumbsup:

Tested it with a browser shot and it works in IE 7 now radam thanks to Rangana.

-Drew

radamsiii
05-08-2008, 03:19 AM
Thank you so much I am sure you already know that that worked perfectly, donít laugh at this next question, can there be a resizable spacing between them. I tried margin 20 px and that set a small space but didnít allow resize, or would it be easier to push ti the center and leave that way probably look better like that anyway.

rangana
05-08-2008, 03:27 AM
Add it here:


#navigation li{float:left;margin:20px;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum