css

[dscontroller]

Just try the following

#Navigation {
background-color: #7f8a81;
height: 78px;
}
#Navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#Navigation ul li {
display: inline;
}

to see if this puts them into the right order.

David

[pinbrook]

I've tried the above code, but it behaves as my original code.

ie use the code as it is above, it creates a nav bar left aligned, in the correct order, but add the float right and the order of the nav bar reverses

[dscontroller]

Sorry Jo,

Am at a loss now with this one.

David

[pinbrook]

Thanks for the idea it was worth trying. I shall post this in another forum I am a member of to see if it is the float that causes the reversal, as this is not the first time I've experienced this.

[wjcampbe]

Jo,

I added a Navigation Bar, set it to Horizontal Text Links, then just added <div align=right> before it, and </div> after - does that do what you want?

[pinbrook]

using a nested <div align="right"> in the html results in the links becoming a vertical list, I have just double checked

What else is there to move something to the right that isn't a float?

[cdicken]

You can use 'text-align: right;' in a containing div to align the contents of the div to the right. That's what I normally use.

I do find 'float' only works for single objects - it all goes a it odd with multiple objects.

[pinbrook]

got it....

#navcontainer { /* none needed */ }

ul#navlist {
margin: 0;
list-style-type: none;
white-space: nowrap;
text-align: right;
}

ul#navlist li {
display: inline;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 2px 8px 2px 8px;
background-color: #404616;
border-top: 2px solid #FFFFFF;
}

note text-align:right;

and replace float:right; with display:inline;

Theres the explanation why float is the wrong thing to use for multiple elements

When you float an element it becomes an inline-element and moves to wherever you specify. Obviously for your navigational bar you need to make the 'li' elements display as inline-elements instead of block-elements, but if you float each 'li' then they will display in the order that you specify, ie, right to left.

[dscontroller]

I was on the right lines with the inline bit, but didn't quite make it!!

Still, we all know now.

David

[pinbrook]

Hi David, yes you were, I got 1/2 the solution from a css forum andtheother half from ChrisD.

[pinbrook]

still working on my horizontal bar on grail.pinbrook.net/acatalog/index.html

can't work out where to place the <img-src="curve.gif"> to get it to line up flush to the subsequent css, its not quite the right size yet, but the big issue is to prevent the while gap that now appears above the css links to the right of the image

[dscontroller]

Hi Jo,

I see you have left the bullets in your navbar. The unordered list is a block element and has padding or margins around it. If you include the following, it should rid you of the white space.

list-style-type: none;
margin: 0px;
padding: 0px;



hth,

David

[pinbrook]

the bullets are added using the ascii code in the settings, site options, links ie descriprion of contact us button (& # 149 ; Contact Us) , not as part of the <li> I must admit I hadn't considered that to be a confusion. (which i don't think is ,as the problem was there before I added the bullets. I chose to use ascii for bullet in place of images as they were throwing everything out, but then the curveimage is still doing that

The css does has the margin set to zero, it needs the padding in the ul# definition to padd out the colour behind the text, I've chucked the margin :0; at all levels just to make sure , and uploaded the result

#navcontainer {
margin: 0;
padding: 0;
}

ul#navlist {
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap;
text-align: right;
}

ul#navlist li {
display: inline;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 2px 8px 2px 8px;
background-color: #404616;
}

#navlist a, #navlist a:link {
color: #F4F3F1;
text-decoration: none;
margin: 0;
}

ul#navlist li#active, #navlist a:hover{
color: #F2AB01;
margin: 0;
}

[dscontroller]

Jo,

The only other thing I can see that might assist is the float: left;

I am messing around with some CSS at the moment and have used the ul type for the navigation - see (www) stringer-family.co.uk/Pages/index.html but don't follow all the links, or you will end up on the Asenby village website!!

If you use Firefox it will give you access to all the CSS.

If you look at my css - the following removes the block elements from it
-
#divNavigation ul {
background-color: #3D5070;
height: 78px;
list-style-type: none;
margin: 0px;
padding: 0px;
}

This makes it an inline element

#divNavigation ul li {
display: inline;
}

You can then style the anchor tag as follows -

#divNavigation ul li a {
float: left;
padding: 10px;
height: 21px;
text-decoration: none;
margin-top: 37px;
margin-left: 25px;
}

Where is Jonty John when you want him!! I think he's the Css guru!

David

[wjcampbe]

Unfortunately, he (Jonty) has taken his annual hols.

Lets hope he has his laptop with him and is exploring v8 - even if he is not lurking at the moment.