Using Dreamweaver with CSS navigation.

I am using DWVR (in the MX suite - not 2004 the previous one) to construct my own hand coded CSS site. It does not seem to render navigation lists correctly i.e. I have a horiz. nav. just below my header div. and it shows it on development screen as a simple verticle list and does not show the link changes when I curse! over them. It seems to show a floated div. verticle nav. bar OK which I have in a side column. Is this me or what DRMWVR only can do?

  PurplePenny 18:34 08 Oct 05

Have you got anything online that we could take a look at or is it still at the local development stage?

Are the links that should be horizontal wrapped in something that would make them vertical -- for instance in a <ul>?

Why can't drmwvr see the 'display: inline;' statement?
<div id="wrapper">
<div id="header"></div>
<div id="horizNav">
<ul id="navlist">
<li id="active"><a href="index17.htm" id="current">Home</a></li>
<li><a href="charts14.htm">Charts</a></li>
<li><a href="people11.htm">People</a></li>
<li><a href="reports11.htm">Reports</a></li>
<li><a href="gallery11.htm">Gallery</a></li>
<li><a href="contacts11.htm">Contacts</a></li>
</ul>
</div>
AND THE CSS:
#navlist {
margin-top: 0;
margin-left: 0;
border-top: 2px solid #999;
border-bottom: 1px solid #999;
padding: 5px 0 3px 0;
font: bold 10px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin-left: 0px;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #999;
border-bottom: none;
background: #d4b2c9;
text-decoration: none;
}
#navlist li a:link {
color: #646464;
}
#navlist li a:visited {
color: #6699ff;
}
#navlist li a:hover {
color: #646464;
background: transparent;
border-color: #999;
}
#navlist li a#current {
background: transparent;
border-bottom: 1px solid white;
}
Cheers.

  PurplePenny 18:44 09 Oct 05

I think that you've added display: inline; to the wrong thing. Try adding it to the ul instead of the li.

I notice that I did not have a ul in the css. I created one and moved the li inline statement there but this had no effect. In IE6 however I had a working vertical list! So I change it back. Perhaps I will have to work with drmwvr as it is?
Thanks for your input.

  djinn 17:43 14 Oct 05

Hey,

You can force DW to display your hor lists the way you want in design view..

In design view click to the right of 'Home' and hit your delete button, you should now find 'Charts' next to 'Home' - now put your cursor to the right of Charts and hit delete, and so on......

HTH
Cheers

  PurplePenny 22:02 14 Oct 05

I just copied and pasted your code from above and tried it out in Opera, Firefox and IE .... and the navigation appeared horizontally! They look like tabs, the current tab is white, the others are lilac and turn white when hovered over.

It seems that it is doing what you want it to but DW isn't displaying it that way. Didn't Taran mention that in another post?

This thread is now locked and can not be replied to.

Nintendo Switch review: Hands-on with the intuitive modular console and its disappointing games…

1995-2015: How technology has changed the world in 20 years

Method Studios' title sequence for BBC series Taboo is truly unsettling

Best Pages for iOS tips | How to use Pages for iPad & iPhone: 6 simple tips to get more out of…