Css nav problum

Hi
Im trying to style a css nav but having problums getting the gaps between the links
I have a 600px and have some links with one word and some with two. The isue I have is I cant not seam to get the links to fit and have the same space between each link. I have 8 Links. Please see danielwaddon.com/design/
The css I have is
#nav {
float: right;
color: FFF;
width: 600px;
ul {
list-style-type:none;
margin:0;
padding:0;
li {
display:inline;
float:left;
a {
display:block;
width:75px;
color: #FFF;
text-decoration: none;
font-size: 12px;
text-align: center;
#nav ul li a:hover {
color: #ff6600;
Any help would be great

Try the following code in a new, blank document. Tweak values to "fit" your requirements.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>
<style>
    /**fixes the box model in HTML5**/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
nav {
    margin: 0;
    padding: 0;
    float: right;
    background: #444;
    width: 600px;
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
nav li {
    margin: 0;
    padding: 0;
    display: inline;
    float: left;
/**Link Styles**/
nav li a {
    display: block;
    color: #FFF;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    width: 5.90em; /**adjust same width for all or use auto**/
    padding: 6px; /**space around links**/
    margin: 2px; /**space between links**/
    border: 1px solid #ff6600; /*optional border*/
nav li a:hover, nav li a:active, nav li a:focus {
    color: #ff6600;
    background: #000;
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2 with more text</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5 with more text</a></li>
<li><a href="#">Menu6</a></li>
<li><a href="#">Menu7</a></li>
<li><a href="#">Menu8</a></li>
</ul>
</nav>
</body>
</html>
Nancy O.

Similar Messages

How to make a button stay down when I click on it in CSS nav bar.

So I have created a horizontal navigation bar, I use the CSS
Sprites/Pixy method to get the hover working with the same image as
the link/in active stage of the buttons.
Now how do I make the button stay down when someone click on
them?
These are the codes for the nav bar.
#nav{
width: 780px;
list-style: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
height: 40px;
#nav li{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
float: left;
padding: 0;
#nav a{
width: 125px;
display: block;
color: #000000;
text-decoration: none;
text-align: center;
background-image: url(ZITTO_IMAGES/button_set1a.jpg);
background-repeat: no-repeat;
background-position: center 2px;
padding-top: 14px;
padding-bottom: 10px;
background-color: #000000;
#link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
#nav a:hover{
background-image: url(ZITTO_IMAGES/button_set1a.jpg);
background-repeat: no-repeat;
background-position: center -36px;
color: #FFFFFF;
width: 125px;
padding-top: 14px;
padding-bottom: 10px;
background-color: #000000;
Everything works so far, the hover works when you roll the
mouse but when you click the button goes right back.
How can I make it stay down and then go back to normal when
you click on another link/button?
Thanks very much.
Patrick

Read my suggestion again. You are missing a critical point. I
show you
exactly where to put the stylesheet. And it doesn't matter
how many
stylesheets you have on a page.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Webethics" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
> Change this -
>
> #nav a{
> width: 125px;
> display: block;
> color: #000000;
> text-decoration: none;
> text-align: center;
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center 2px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> #link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
>
>
> #nav a:hover{
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center -36px;
> color: #FFFFFF;
> width: 125px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> to this -
>
> #nav a{
> width: 125px;
> display: block;
> color: #000000;
> text-decoration: none;
> text-align: center;
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center 2px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> #link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
>
>
> #nav a:hover{
> background-position: center -36px;
> color: #FFFFFF;
> }
>
> Then on each individual page, change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> #nav a#link4 {
> background-position:center - 36px;
> }
> </style>
> </head>
>
> (for link4, for example)
>
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "Webethics" <[email protected]> wrote
in message
> news:[email protected]...
> >
quote:
Originally posted by:
Newsgroup User
> > When they click on a button, do they go to another
page? And is each
> > button
> > uniquely identified?
> >
> > If so, then put a little stylesheet on each such
page that sets the
> > particular button to the down sprite settings,
e.g.,
> >
> > a#link6 { downspritevalues }
> >
> > --
> > Murray --- ICQ 71997575
> > Adobe Community Expert
> >
> >
> > This is the link to the page.
> >
http://www.patrickjudson.com/zitto_web1d.html
> > What state do I use to get this effect? The active
or the visited?
> >
> > I want the buttons to remain down when click or
even better, how do I
> > get
> > the
> > welcome button to appear down when a person visits
the page to show them
> > they
> > are at the home page.
> >
> > Thanks so much. Patrick
> >
> >
> >
>
>
>
> Hey! Murray, thanks very much for the efforts. However
I'm still confused
> as
> to where to insert the individual styles on each page.
>
> The pages already have a style sheet, in fact they all
share the same
> style
> sheet. The following codes below is what you instructed
but I'm confused
> as to
> where to insert them since the page already has a head
opening and closing
> as
> well as a style opening and closing tags. Can you please
add the codes you
> instructed so I can see where they go and how to
implement them?
>
> Thanks - Patrick
>
>
> Then on each individual page, change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> #nav a#link4 {
> background-position:center - 36px;
> }
> </style>
> </head>
>
> (for link4, for example)
>
>
>
>

Simple css nav type scaling

I am creating a simple nav using "ul" and "li" tags all of
which have classes attached to them. I have put in place a
reset.css. the nav has inline elements attached to the <a>
tag. I give the link a type size yet they get bigger when previewed
in a browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<ul class="nav">
<li class="home"><a href="bwd
live/css/pages/home.html">Home</a></li>
<li class="philosophy"><a href="bwd
live/css/philosophy.html">Philosophy</a></li>
<li class="windows_doors"><a href="#">Windows
& Doors</a></li>
<li class="pinkladies_carpentry"><a href="bwd
live/css/pinkladies.html">Pinkladies
Carpentry</a></li>
<li class="catalog"><a href="bwd
live/css/catalog.html">Catalog</a></li>
<li class="contact"><a href="bwd
live/css/contact.html">Contact</a></li>
</ul>
</body>
</html>

I don't see where you are setting the font-size. The browser
default would be used.
Also, I'd suggest floating the LI element instead of the A
element

CSS nav ideas

Hi
Spent an hour or so trying to work out how to create this top
nav using DIVs, Spans, Lists, CSS but finally relented and stuck it
in a table instead. Can any tell me how I could have gone about it?
I could get the basic feel but couldn't get the images and wording
links to centre.
http://www.flawlesslandscapes.com/index2.php
by the way, this is just a test site at the minute. Hasn't
been officially launched.
Thanks in advance
Martin

Here's one way
A little messy but here ya go:
/* styles */
li {
float:left;
list-style-type: none;
.buttonOne a{
margin: 0 10px 0 0;
width:100px;
padding:50px 0 0 0;
text-align:center;
display:block;
background-image: url(Experiments/small_turquiose.gif);
background-repeat: no-repeat;
background-position: center top;
.buttonOne a:hover{
background-image: url(Experiments/small_yellow.gif);
.buttonTwo a{
margin: 0 10px 0 0;
width:100px;
padding:50px 0 0 0;
text-align:center;
display:block;
background-image: url(Experiments/small_yellow.gif);
background-repeat: no-repeat;
background-position: center top;
.buttonTwo a:hover{
background-image: url(Experiments/small_turquiose.gif);

<ul>
<li class="buttonOne"><a
href="#">Link</a></li>
<li class="buttonTwo"><a
href="#">Link</a></li>
</ul>
Shane

CSS nav question

I am working on a nav and I can't seem to get the button to
have a certain height.
The nav is here, at the top of the page:
http://www.wnzl.biz/dev_1
The css I have is below. I tried to have a height attribute
in the 'a' or 'li', but neither did it. Why is that? I am not sure
what else to look at with this? I am trying to have the buttons
fill the whole vertical space inside the topNav div. How can I do
that.
Thanks a lot for any help with this!!!
The css I have looks like this:
.topNav {
float:left;
width: 960px;
margin: 7px 0 0 7px;
background-image:url(../images/general/nav_bg_1.gif);
#mainnav {
float: left;
width: 640px;
height: 45px;
font-size: 15px;
text-transform: uppercase;
text-align: right;
background-color:#232323;
#mainnav ul {
#mainnav li {
display: inline;
list-style: none;
border-left: #5a5a5a 1px solid;
#mainnav a {
text-decoration: none;
padding: 0 15px;
#mainnav a:link, #mainnav a:visited {
color: #fff;
#mainnav a:hover, #mainnav a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
color: #0296fe;

Remove height: 45px; & text-align: right; from #mainnav
(as shown below)
#mainnav {
float: left;
width: 640px;
font-size: 15px;
text-transform: uppercase;
background-color:#232323;
Change display: inline; to float: right; (as shown below)
#mainnav li {
float: right;
list-style: none;
border-left: #5a5a5a 1px solid;
Add display: block; and some top and bottom padding 15px (as
shown below)
#mainnav a {
text-decoration: none;
padding: 15px 15px;
display: block;
Amend order of links as below (because the li's are floated
right)
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">HOME</a></li>
brian914 wrote:
> I am working on a nav and I can't seem to get the button
to have a certain
> height.
> The nav is here, at the top of the page:
http://www.wnzl.biz/dev_1
>
> The css I have is below. I tried to have a height
attribute in the 'a' or
> 'li', but neither did it. Why is that? I am not sure
what else to look at with
> this? I am trying to have the buttons fill the whole
vertical space inside the
> topNav div. How can I do that.
>
> Thanks a lot for any help with this!!!
>
>
>
> The css I have looks like this:
>
> .topNav {
> float:left;
> width: 960px;
> margin: 7px 0 0 7px;
> background-image:url(../images/general/nav_bg_1.gif);
> }
> #mainnav {
> float: left;
> width: 640px;
> height: 45px;
>
> font-size: 15px;
> text-transform: uppercase;
> text-align: right;
>
> background-color:#232323;
> }
> #mainnav ul {
>
> }
>
> #mainnav li {
> display: inline;
> list-style: none;
> border-left: #5a5a5a 1px solid;
> }
>
> #mainnav a {
> text-decoration: none;
> padding: 0 15px;
> }
>
> #mainnav a:link, #mainnav a:visited {
> color: #fff;
> }
>
> #mainnav a:hover, #mainnav a:active,
> #uberlink a:link, #uberlink a:visited,
> #uberlink a:hover, #uberlink a:active {
> color: #0296fe;
> }
>
>

CSS/HTML issue with nav bar

I'm trying to create a drop down navigation menu and under my 'Contact' button I want it to drop down and show my social media pages. I'm new to CSS so I am trying to understand where I went wrong...when I hover over 'Contact' it doesn't show anything. Here is my HTML and CSS code:
HTML-
<div class="nav">
    <ul id="nav">
        <li><a href="#">Home</a></li>
            <li><a href="#">Search Homes</a></li>
            <li><a href="#">Buy</a></li>
            <li><a href="#">Sell</a></li>
            <li><a href="#">Blog</a></li>
<li><a href="#">Meet My Team</a></li>
            <li><a href="#">Contact</a>
            <ul>
                <li><a href="#">Facebook</a></li>
                </ul>
            </li>
        </ul>
</div>
CSS-
.nav {
padding-top: 20px;
padding-bottom: 20px;
#nav {
list-style-type: none;
margin: 0;
padding: 0;
#nav li {
display: inline-block;
#nav li a {
padding: 10px;
background-color: #fff;
text-decoration: none;
color: #333;
transition: background .35s ease-in-out;
-webkit-transition: background .35s ease-in-out;
-o-transition: background .35s ease-in-out;
-moz-transition: background .35s ease-in-out;
#nav ul ul {
display: none;
position: absolute;
#nav li a:hover {
color: #333;
background-color: #ccc;
text-decoration: none;
#nav li ul li {
display: none;
position: absolute;
Thanks in advance!

You don't actually have the CSS code for the dropdown action. Here is a very simple example you can work from:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font-family: 'Lucida Grande', 'Helvetica Neue',
Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
ul li:hover {
background: #555;
color: #fff;
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
</style>
</head>
<body>
<ul><li>Home</li>
<li>About</li>
<li>
    Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</body>
</html>

Why does some CSS not render when viewed from DW in a browser

I make a copy of my site on my local machine via ftp on my
local machine. The CSS does not render correctly for my top div tag
with the css nav in a browser from my local. It renders everywhere
else, even in the design view but does not render the same when I
view it in a browser from DW. Also, I know that there isn't a
problem with it on the remote machine bc when I go to the site,
everything is fine and the CSS nav renders correctly in the
browser.
Is there a setting I am missing? What is going on? Its very
annoying!

What has Rome ever done for us? :)
Cheers
Pablo
www.dellwebsites.com
"Murray *ACE*" <[email protected]> wrote
in message
news:eo3phg$8p$[email protected]..
> Is your link to the stylesheet root relative or document
relative?
>
> Are you previewing with temp files enabled?
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.dreamweavermx-templates.com
- Template Triage!
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
> ==================
>
>
> "L3SL1E" <[email protected]> wrote in
message
> news:eo3out$srs$[email protected]..
>>I make a copy of my site on my local machine via ftp
on my local machine.
>>The
>> CSS does not render correctly for my top div tag
with the css nav in a
>> browser
>> from my local. It renders everywhere else, even in
the design view but
>> does not
>> render the same when I view it in a browser from DW.
Also, I know that
>> there
>> isn't a problem with it on the remote machine bc
when I go to the site,
>> everything is fine and the CSS nav renders correctly
in the browser.
>>
>> Is there a setting I am missing? What is going on?
Its very annoying!
>>
>
>

Problem with IE reading my Spry nav-bar (cs3)

Any ideas on what would cause this and how to fix it are very
much appreciated! I used Dreamweaver CS3's Spry functionality in
order to make the dropdown menu, only I used rollover images
instead of plain text. Is there a way to make IE like this bit of
code, like Firefox and Safari seem to?
The code, in IE makes the menu 'dropdown' to the side as if
they were all in line. You can see a preview of the problem, here.
Site-in-development

Have a look in main.css
nav ul a, nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background: #C6D580;
Gramps

GOTTA' BE INCONSISTENT CSS

Hello All,
In recent postings, I was told "the 90's called and wanted their tables back!".
It did push me to learn more CSS and this post concerns the first full (well, almost full...) CSS site I am designing.
http://empdigital.net/dmi_may2011/index.html
The .header contains a CSS nav that is attached to the P7PMMh03 CSS.
The .container is where I have all the a swf on the HOME and on the other pages, lighboxes linked to the *lightbox stylesheets, then finally the .footer div
My issues are inconsistency on the pages.
The HOME is OK, but, depending on the browser I test on, (be it desktop, laptop, PC, Mac, etc.), the .footer bottom border changes width,
On the STUDIO, NEWS and CONTACT pages, the page name in the nav only shows on hover.
I would like to have the page name be crimson for each page, i.e., when on the HOME page, it is the same color as the hover color.
I would also like to insert a background randomized slideshow that would show on every page behind each page's content. I read read about jCycle script bit it's JUUUUST A BIT over my head.
When I make a change in the CSS for one page, the change is not across the site, on one or two.
I am pretty sure the issue being the stylesheets and/or how I am linking them to the divs. The sheets are differring in control of each page.
Please pardon my naivety and I would be appreciative of any advice, which will be ingested and well utilized going forward.
Thank you,
DEL

You have a "current_mark" class in your menu with a color defined in your css like so:
.p7PMMh03 .current_mark {
    color: #000000 !important;
    font-variant: small-caps;
    font-weight: bold;
Which of course is black, therefore not visible on a black background. Change #000000 to something else. With the black background though, you're limited somewhat to light colors.
Havent looked at your other issues yet.

Almost there! Need a little help with CSS Menu

Hi folks,
I am almost there with a menu system. The problems I discovered were mostly to do with layout.css nav elements interfering with my custom code. http://bendannie2.businesscatalyst.com/flexi2.html
Here are the problems I can't seem to resolve.
There appears a red diamond list element and I can't seem to remove it or find it in the Inspector on any css link
the secondary menus blink and are hard to select on hover over tertiary menus (see On Sale>Cartier> )
the tertiary menus are a little crowded towards the secondary menus.
the css classes in inspector seem to repeat ad infinitum
Any help most deeply appreciated...
BTW, it works better on a smart phone!
Jeff

Thanks, Don't know why I didn't see that...
I'm stil having a problem with the hover area for selecting sub menus... The problem appears to be the js, I think!, I'm not qualified to analyze jquery.
The behaviors are as follows:
The On Sale submenus stay active even when you roll off that menu and select another.
The hover area after the first scrollover appears to be below the existing text of the top level and not on the text itself.
there is something going on as you scroll down through the submenus where they are blinking on and off as you pass each sub tab... This uses jQuery 1.7.2, so if that has been fixed in a later edition, I don't know...
Perhaps it is the way I set the CSS but I didn't, to my knowledge, change a hover/selection area for the menus...
TIA,
JEff

Link to specific text from another web page

Hello all
Is is possible to link from one page to a specific piece of
text in another web page in the same site? I have tried named
anchor, hyperlink, etc but it just goes to the page rather than the
text. I don't know if I am attempting the impossible. Can you help?
Thank v much.

> This also has a css rule so this 9pt thing is left over
from copy and
> pasting
> from Word. I have it cleaned up as you suggested but I
still have:
> <span style="font-family:Arial; font-size:9.0pt; is
there way of avoiding
> this?
It depends on your settings for how you copy/paste. See your
PREFERENCES
for those. I don't get such things because my settings are
'tight' in that
they are restrictive to what stying is carried into the page.
> How I do this in a nav bar?
Change this -
.nav {
font: bold normal 14px/normal Arial, Helvetica, sans-serif;
text-transform: none;
color: #003300;
font-weight: bold;
a.nav:link {
font: normal 12px/normal Arial, Helvetica, sans-serif;
text-transform: none;
color: #003300;
text-decoration: none;
a.nav:visited {
font: normal 12px/normal Arial, Helvetica, sans-serif;
text-transform: none;
color: #003300;
text-decoration: none;
to this -
.nav {
text-align:center;
.nav a {
font: bold normal 12px/normal Arial, Helvetica, sans-serif;
color: #030;
font-weight: bold;
text-decoration:none;
margin-right:35px;
and then change this -
<div align="center"><a href="index.html"
class="nav">Home</a>       <span
class="nav">About
Us</span>      <a
href="impact_HE.html" class="nav">Impact of HE
Proposal</a>      <a
href="purpose_ED.html"
class="nav">The Purpose of
ED</a>      <a
href="procedures.html"
class="nav">Procedures </a>     <a
href="what_can_we_do.html" class="nav">What Can We
Do?</a></div>
to this -
<div class="nav"><a
href="index.html">Home</a><a
href="about_us.html">About
Us</a><a href="impact_HE.html">Impact of HE
Proposal</a><a
href="purpose_ED.html">The Purpose of ED</a><a
href="procedures.html">Procedures</a><a
href="what_can_we_do.html">What Can
We Do?</a></div>
But an even better way would be to make the menu an unordered
list, like
this -
<ul>
<li><a
href="index.html">Home</a></li>
<li><a href="about_us.html">About
Us</a></li>
<li><a href="impact_HE.html">Impact of HE
Proposal</a></li>
<li><a href="purpose_ED.html">The Purpose of
ED</a></li>
<li><a
href="procedures.html">Procedures</a></li>
<li><a href="what_can_we_do.html">What Can We
Do?</a></li>
</ul>
And use this CSS -
.nav {
text-align:center;
.nav ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
.nav li {
float:left;
width:150px;
margin-right:5px;
border-right:1px solid green;
.nav a {
font: bold normal 12px/normal Arial, Helvetica, sans-serif;
color: #030;
font-weight: bold;
text-decoration:none;
If you want to make the current page look like it doesn't
have a link, then
do this -
<ul>
<li><a href="index.html"
id="home">Home</a></li>
<li><a href="about_us.html" id="about">About
Us</a></li>
<li><a href="impact_HE.html" id="impact">Impact
of HE Proposal</a></li>
<li><a href="purpose_ED.html" id="purpose">The
Purpose of ED</a></li>
<li><a href="procedures.html"
id="procedure">Procedures</a></li>
<li><a href="what_can_we_do.html" id="what">What
Can We Do?</a></li>
</ul>
and add this to each page (use the proper ID) -
a#about {
cursor:default;
/* any other styles you want to make the current page show
> I am being a complete idiot today (maybe it's because
it's Sunday) Can you
> talk me through this.
Make the changes manually in code view.
If you are getting the idea that you will need to ramp your
HTML and CSS
skills to do this stuff, you are right on target!
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Dottydog" <[email protected]> wrote in
message
news:[email protected]...
> Dear Murrray
> Thank you very much for your comments.
>
> Can I ask you the following:
> 1. p.MsoNormal {
> Using Microsoft Word to build an HTML page is not
advisable. Use DW only
> or
> clean up the Word markup
>
> This also has a css rule so this 9pt thing is left over
from copy and
> pasting
> from Word. I have it cleaned up as you suggested but I
still have:
> <span style="font-family:Arial; font-size:9.0pt; is
there way of avoiding
> this?
>
> 2.
       <span
class
> Using non-breaking spaces as a layout tool is not
advisable. Use CSS
> margins/padding instead..
>
>
> 3. This is not a named anchor point. It is not even a
link. For that you
> would need -
> <p style="font-family:Arial,helvetica,sans-serif;
font-size:small; "
> id="BDBC">What we have said to
B&DBC</p>
>
> I am being a complete idiot today (maybe it's because
it's Sunday) Can you
> talk me through this.
>
> Thank you very much for your time. Much appreciated.
>
>
>
>
>

Rollover link problem

http://westmemphisstorage.com/rollover.html
This site is up and operational, but the client wants to change how his customers see the "account login" and "reserve a unit links." He has asked for buttons. I made some buttons and got them in place with the idea of creating a link and having the background image change on rollover via CSS.
Thus far, my efforts have been a dismal failure. I originally built this site with tables before I learned how to build with CSS. So I added a couple of divs over the main content table in this test file to house the rollovers. He is happy with the appearance. I have links in the main menu on the active pages of the site, but my guy wants the big buttons.
Can anyone help?
Thanks,
Jie

You need to use an 'unordered list' <ul> to contain the buttons (see below). Give each <li> an identity 'id' as shown below, "logIn" and "reserveUnit"
<div id="nav">
<ul>
<li id="logIn"><a href="account.html"></a></li>
<li id="reserveUnit"><a href="unit.html"></a></li>
</ul>
</div>
Next add the following css to your style sheet:
#nav ul {
margin: 0;
padding: 0;
width: 290px;
#nav li {
float: left;
list-style: none;
width: 135px;
margin: 0 10px 0 0;
padding: 0;
#nav #logIn a {
display: block;
width: 135px;
height: 25px;
background-color:#639;
background-image: url(logIn_1.gif);
background-repeat: no-repeat;
text-align: center;
#nav #logIn a:hover {
background-color: #CF0;
background-image: url(logIn_2.gif);
#nav #reserveUnit a {
display: block;
width: 135px;
height: 25px;
background-color: #0F0;
background-image: url(reserveUnit_1.gif);
background-repeat: no-repeat;
text-align: center;
#nav #reserveUnit a:hover {
background-color:#F96;
background-image: url(reserveUnit_2.gif);
Use background images for the buttons applied to the anchor <a> tags as shown in the above css #nav #logIn a, #nav #logIn a:hover Make sure the <a> css is set to the width and height of the button, which is currently 135px x 25px.
Repeat the use of background images for #nav #reserveUnit a, #nav #reserveUnit a:hover as shown above.
You can delete the background colors as these are only there to give some visual guidance whilst setting the images.
Finally remove the two css selector styles shown below from your css as these are now redundant if you follow the instructions above. Leaving them in the stylesheet may cause conflicts.
#container #nav a {
     font-family: Verdana, Geneva, sans-serif;
     font-size: 0.9em;
     font-weight: bold;
     text-decoration: none;
     color: #000;
     display: block;
     width: 135px;
     float: left;
     height: 25px;
     text-align: center;
     line-height: 1.8em;
     border: 1px solid #000;
     margin-right: .5em;
     background: #EAD102;
#container #nav a:hover {
     font-family: Verdana, Geneva, sans-serif;
     font-size: 0.9em;
     font-weight: bold;
     text-decoration: none;
     color: #000;
     display: block;
     width: 135px;
     float: left;
     height: 25px;
     text-align: center;
     line-height: 1.8em;
     border: 1px solid #000;
     margin-right: .5em;
     background: #E4533E;

Making a link hover background

I have a side navigation with six links. To each link I assinged a different class so it could have a separate background. (I used background images instead of making the links themselves into images, thus making the site easier to read for the visually impared.) Now I want to make a different background for each link upon mouse hover. What do I attach to the CSS code to do this? I know I need a compound rule, I just can't figure out what to specify to it. I'll give the line of code for one link if that helps:
.container .body .sidebar1 .nav li .videogallerylink

Torkuda1234 wrote:
"Or do you want every single individual link to have its own unique background on hover?"
Yes, that!
So use the technique shown in Nancy's link by applying a unique class to each link and applying the CSS
from the CSS
.nav li a.link1:link, .nav li alink1:visited {
    background-image: url(../images/photo%20link.jpg);
.nav li a.link1:hover, .nav li a.link1:active {
    background-image: url(../images/IMAGE-ON-HOVER.jpg);
.nav li a.link2:link, .nav li alink2:visited {
    background-image: url(../images/photo%20link.jpg);
.nav li a.link2:hover, .nav li a.link2:active {
    background-image: url(../images/SECOND-IMAGE-ON-HOVER.jpg);
from the HTML
<ul class="nav">
        <li><a href="#" class="link1">Photo Gallery</a></li>
        <li><a href="#" class="link2">Another link</a></li>
      </ul>

Fireworks cs6 drop down menu crossbrowser

Hi there,,
I am doing this drop down menu on fireworks cs6,its a horizontal menu, and the dropdouwn menus on chrome appears on the middle of the button, the same happends on iexplorer,firefox and Opera.But on Safari it works perfectly.I send the fotos on atachment one from google chrome and one from Safari.
The one on the left is from google chrome, the drop down menu on all the buttons appears on the midle of the button,and its the same on all browsers,except on safari, the right foto.
I tryed to use google chrome inspect tools and uncheck some of the css proprieties of the div correspondent to the uploads drop down link("uploads"), but nothing happends.it doesnt move up or down , not even a pixel.
I want it to look like the Safari right foto on all browsers, How can i do that?
i did the menu on fireworks cs6 and exported to dreamweaver cs6 as HTML, then i inserted the menu as fireworks html inside a div #nav, this is on the fluid grid layout on the phone and tablet css:
#nav {
          margin-top: 0px;
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height: auto;
          min-height: 180px;
          display: block;
          background: rgba(66,65,66,1);
          background: -moz-linear-gradient(top, rgba(66,65,66,1) 0%, rgba(115,115,115,1) 2%, rgba(168,168,168,1) 57%, rgba(247,246,247,1) 97%, rgba(253,252,253,1) 100%);
          background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(66,65,66,1)), color-stop(2%, rgba(115,115,115,1)), color-stop(57%, rgba(168,168,168,1)), color-stop(97%, rgba(247,246,247,1)), color-stop(100%, rgba(253,252,253,1)));
          background: -webkit-linear-gradient(top, rgba(66,65,66,1) 0%, rgba(115,115,115,1) 2%, rgba(168,168,168,1) 57%, rgba(247,246,247,1) 97%, rgba(253,252,253,1) 100%);
          background: -o-linear-gradient(top, rgba(66,65,66,1) 0%, rgba(115,115,115,1) 2%, rgba(168,168,168,1) 57%, rgba(247,246,247,1) 97%, rgba(253,252,253,1) 100%);
          background: -ms-linear-gradient(top, rgba(66,65,66,1) 0%, rgba(115,115,115,1) 2%, rgba(168,168,168,1) 57%, rgba(247,246,247,1) 97%, rgba(253,252,253,1) 100%);
          background: linear-gradient(to bottom, rgba(66,65,66,1) 0%, rgba(115,115,115,1) 2%, rgba(168,168,168,1) 57%, rgba(247,246,247,1) 97%, rgba(253,252,253,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424142', endColorstr='#fdfcfd', GradientType=0 );
          padding: 0px;
i used a http://www.cssmatic.com/ linear gradient as background for the div #nav and i also tryed to remove the background and still the problem remains,except on safari.
On fireworks cs6 preview in browser(chrome) it also works perfectly, its only wen i export it to dreamweaver it only works like the preview on Apple safari.

    PVII's Pop-Menu Magic2 (commercial DW Extension)
    http://www.projectseven.com/products/menusystems/pmm2/index.htm
    jQuery Superfish
    http://users.tpg.com.au/j_birch/plugins/superfish/
    jQuery Mega Menus
    http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
    CSS3 Dropdown Menus
    http://www.red-team-design.com/css3-dropdown-menu
    10 Responsive Menus
    http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Is there a Dreamweaver being considered?

Adobe Community,
I have been a Web Master and software trainer for the last several years and have used Dreamweaver (DW) exclusivly ever since it was Macromedia's product. I'm presently using the DW MX 2004 version, which I know is old, but have had great luck till now using and teaching other clients in my Studio and Community Colleges how to cteate Web Sites and post them. I have cteated over 100+ sites using tables, CSS NAV buttons, lots of Multimedia content and had clients purchase the latest version of DW to maintain the site. Untill now I hadn't any real issues on new versions until your CS4 and CS5 deleted the HTML dialog boxes for font tags in the Property panel. I had a client purchase DW CS5 and to my surprize found Adobe had deleted those functions in the HTML Property Panel. You have to go the CSS panel to get Font, color, size, justification. It makes a mess of the code.
I know CSS is the latest and greatest method for creating fonts but newbie clients go glassy eyes when I try to explain how to change the text up. It was so easy in the HTML method plus I have over 50+ active sites that I and my clients need to maintain on a monthly basics. With this change you have KILLED any newbie and myselg trying to use your new DW software to easily update the site.
My question is whether Adobe is looking to change back the Property Panel to include these deleted boxes or come out with a DW light like they have done with Photoshop and Premiere, which I use both and train clients on both. The $400.00 plus now the complex desktop has almost killed the product for use by the casual new customer. I have lost several future clients that didn't want to puy the high price software and learn the complicated desktop. Therefore unless Adobe is looking to fix this situation I'm looking for another software such as MS Expression Web or equivalent to go forward with.

My question is whether Adobe is looking to change back the Property Panel to include these deleted boxes
Don't hold your breath. HTML style tags are deprecated and CSS is here to stay.
Adobe didn't remove these style boxes from the HTML properties panel to punish you. They did it to generate better code which meets the W3C's modern web standards. http://www.w3.org/standards/
I'm looking for another software such as MS Expression Web or equivalent to go forward with.
I think you'll find MS products work in much the same way. CSS isn't something you can ignore. It's an integral part of web authoring now. Instead of asking clients to use pro-level software that is beyond their reach, why don't you use Contribute or build your client sites around a Content Management System (CMS) framework which your clients can access from any web browser?
WordPress
PHP & MySQL required
http://wordpress.org/
Content Seed -
Available in ASP, PHP, or ASP.net
versions - no database needed.
http://contentseed.com/
Concrete 5 -
PHP & MySQL required
http://www.concrete5.org/
10+ More Free CMS mentioned here:
http://woork.blogspot.com/2008/11/10-free-powerful-content-management.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Css nav problum

Similar Messages

Maybe you are looking for