trying out nav

[loki]

i'm trying my first navlist here

http://www.portfoliodmc.com/index7.html

and have a couple of questions:

1. i've gerryrigged a blank space (between "...venues" and "restaurants" but i'm guessing this isn't correct code. what's the correct way to do this?

2. how do i control the colour of the blank cell. it's #90BADE but i don't see that in my style sheet.

3. how do i get rid of the bottom blank cell. ('m not even sure why it's displaying.)

4. abovementioned aside, it displays right in IE6 but not in FF1.0.7. is there a further bit a badcode in there?

<li><a href="index.html">Home</a></li>
<li><a href="barcelona.html">Barcelona</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="hotels-barcelona.html">Hotels</a></li>
<li><a href="conference-venues-barcelona.html">Conference &amp; Meeting Venues</a></li>
<li></li>
<li><a href="restaurants-barcelona.html">Restaurants</a></li>
<li> <a href="transport-barcelona.html">Transport</a></li>
<li> <a href="entertainment-activities-barcelona.html">Entertainment</a></li>
<li><a href="destination-management-company.html" >Why Us?</a></li>
<li><a href="contact.html">Contact</a></li>

css is

#navlist li
{text-align: right;
}

#navlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 180px;
}

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer li
{
border-bottom: 1px solid #F7F7F7;
margin: 0;
}

#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #682C73;
border-right: 10px solid #682C73;
background-color: #bc93b5;
color: #fff;
text-decoration: none;
width: 100%;
}

#navcontainer li a { width: auto; }

#navcontainer li a:hover
{
border-left: 10px solid #682C73;
border-right: 10px solid #682C73;
background-color: #682C73;
color: #fff;
}

thanks in advance. if i can get this right i promise never to use tables in my nav again!

[srikanthsh]

how do i control the colour of the blank cell. it's #90BADE but i don't see that in my style sheet.

how do i get rid of the bottom blank cell. ('m not even sure why it's displaying.)

That color is applied to the div, which is the container tag of these list items. see in the style tag in index7.html.

Delete the following properties from #navcontainer div stylesheet(in index7.html) and use that in #navlist LI stylesheet.

----------------
BACKGROUND-COLOR: #90bade;
BORDER-RIGHT: #000 1px solid;
----------------

the blank space at the bottom is due to <ul> tag. This by default generates some margin at the bottom. This will not appear to the visitors after the above modification.


abovementioned aside, it displays right in IE6 but not in FF1.0.7. is there a further bit a badcode in there?
Delete width: 12em property from #navcontainer div stylesheet(in index7.html). Keep a space(& nbsp; delete the space between & and nbsp; while using in the page. i added a space here to avoid browser from parsing that) in that empty list item(<li></li>.). Then, apply the property align="center" to the table in content td. delete empty p tags at the top of the list items.

[Edited]

[loki]

you're an absolute champion sri!

not sure i understood the "apply the property align="center" to the table in content td" bit, i added that code where i thought right and everything is working nicely in IE and FF.

one question if you have the time:

how would i add a centred piece of text to those 'empty' lines of the nav (ie, between 'contact' and 'services' ?

finally, i presume i take all the embedded stylesheet code and add it to my attached style sheet?

(not sure where that came from, dreamweaver can have a mind of it's own.)

[Connie]

Not sure I understand your first question. Do you mean something like this?
<a href=".htm">Text</a>

<br><center><b class="sm">Information</b></center><br>
<a href=".htm">Text</a>

The answer to your second question is yes.

[loki]

sort of, but it's not a link, just plain text, so there'd be no <a href in there.

from your suggestion i've come up with

<li><center><b>Information</b></center></li>

which is about right. i need to make the 'cell' the same size as the other cells, and also control the colour of the text (now black).

(i've added it now but it's hard to see black text on dark purple.)

[Connie]

My example was to get an idea of what you wanted to do. It was text between two links in my navigation. I use something a little different though it is CSS. <div class="buttonscontainer">

I use list a lot and I think what you have come up with should work. It might be better to use a class with that <li>
<li class='cent">
CSS .cent {text-align: center; font-weight:bold;}

You could also add a color that would be easier to see such as color: white

[srikanthsh]

how would i add a centred piece of text to those 'empty' lines of the nav (ie, between 'contact' and 'services' ?

You could create a style like this,

#navHeader{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #colorHere;
text-align:center;
font-style: italic;
}

and apply this to that list item.(<li id="navHeader">headingHere</li>)

Connie, he needs to use id instead of class attribute as the styles were applied to the list items using id of UL tag. The styles applied using id attribute override the styles applied using class attribute.

finally, i presume i take all the embedded stylesheet code and add it to my attached style sheet?
Yeppers. You could move that code into your css file.

[loki]

that works nicely except color: #colorHere;
text-align:center;

are being over-ridden.

i understand from your comment that the id attribute would over-ride the class attribute, so am not too sure why this is happening.

[srikanthsh]

Have you replaced the word "colorHere" with your color code. It should be something like #FFFFFF or #6b2c73, or some color name.

[loki]

yep it's#navHeader{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFF;
text-align:center;
padding: 5px 5px 5px 0.5em;
}

[srikanthsh]

Where have you used that id in the above URL. I am not able to find that in this page - http://www.portfoliodmc.com/index7.html

[loki]

sorry changed the page URL!

http://www.portfoliodmc.com/index10.html

[srikanthsh]

Ok. Seems, when styles are applied using two ID attributes, the first ID styles are overriding the second ID styles. You could apply style="text-align: center;" on <li>.

<li id="navHeader" style="text-align: center;">Partner Site</li>

[loki]

thanks sri, and connie, that works nicely now.

i'm still astonished how much support i get from this forum.

cake for everyone!

:)

[srikanthsh]

You are welcome.