1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Building navigation inline in Dreamweaver

Problem

I am trying to build a simple inline navigation list in Dreamweaver and it simply will not display as anything other than a bulleted list in Safari, Firefox et al...

Solution

Need correct CSS code

Detailed description

 I have two books I am using, Craig Grannell's "Web Designer's Reference" and Jeffrey Bardzell and Bob Flynn's "Adobe Dreamweaver CS3" Training from the Source. The latter book contains a CSS stylesheet that does work, however once I changed the code to try to change the navigation to suit, everything falls apart.

So using Grannell's guide, I directly edited the CSS worksheet. Dreamweaver correctly shows what the site should look like. I have inline tabs for navigation. However, every time I do a check in any browser (be it Safari or Firefox) the end result is a top-to-bottom unordered list with bullets.

I cannot seem to get past this.

Here's the stylesheet and I am using a .GIF for the menu bar that is supposed to work in a "hover" and "active" state, which I have uploaded. The GIF is described in Grannell's book.

 

 

/*------------------------------ Common styles for all pages -----------------------------------------*/

@charset "utf-8";

body {

background: #FFFFFF;

margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

padding: 0;

text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

color: #000000;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

}

td {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

}

 

#header {

padding: 10px 10px 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */

background-color: #FFFFFF;

left: auto;

}

 

#header h1 {

margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */

padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

left: inherit;

text-align: left;

}

 

#header img#bannerRight {

margin-left:30px; /* this creates space between the two banner images*/

}

 

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

float: right;

margin-left: 8px;

}

 

.fltlft { /* this class can be used to float an element left in your page */

float: left;

margin-right: 8px;

}

 

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

clear:both;

    height:0;

    font-size: 1px;

    line-height: 0px;

}

 

/*------------------------------ Style for the inline header -----------------------------------------*/

#navigation li {

float: left;

display: inline;

margin: 0px

padding: 0px;

margin: 0px;

padding: 0px;

background: url(../Images/breadcrumb_bullet.gif) no-repeat left top;

}

#navigation ul {

margin: 0px;

padding: 0px;

list-style: none;

display: inline;

}

#navigation a {

font: bold 13px Arial, Helvetica, sans-serif;

text-transform: uppercase;

color: #ffffff

text-decoration: none;

display: block;

padding: 7px 0px 0px 30px;

height: 30px;

width: 185px;

voice-family: "\"}\"";

voice-family:inherit;

height: 23px;

width: 155px;

color: FFFFFF;

text-decoration: none;

}

#navigation a:hover {

background: url(../Images/breadcrumb_bullet.gif) 0px -40px;

}

#navigation a:active {

background: url(../Images/breadcrumb_bullet.gif) 0px -80px;

}

 

h1 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 24px;

font-weight: bold;

color: 505748;

}

h2 {

font-size: 20px;

font-weight: bold;

color: 646482;

}

h3 {

font-size: 16px;

font-weight: bold;

}

a {

color: 447832;

text-decoration: underline;

}

.author {

font-weight: bold;

}

.navhead {

font-size: 14px;

font-weight: bold;

color: 505748;

}

.caption {

font-style: italic;

}

#footer {

background-color: DDDDDD;

padding-top: 0px;

padding-right: 10px;

padding-bottom: 0px;

padding-left: 10px;

}

#footer p {

padding-top: 10px;

padding-right: 0px;

padding-bottom: 10px;

padding-left: 0px;

}

 

breadcrumb_bullet.gif

Text ID: BUILDING_NAVIGATION_INLINE_IN_DREAMWEAVER

---