CSS menu hover state

Hi, I'm trying to get to grips with CSS and would like to
create a menu system that in hover state shows different copy for
each menu link.
So far I've managed to achieve this by linking an image to
the a:hover state but I need the copy to be different for each menu
item and I'd like to make it vector text not image.
Can this be done?
My attempt so far;
http://www.ad-one.co.uk/test/index4.htm
Thanks
Chris

Check out this page
http://www.divahtml.com/products/divaGPS/current_menu_location.php
Tun Tun bags of fun skrev:
> Hi, I'm trying to get to grips with CSS and would like
to create a menu system
> that in hover state shows different copy for each menu
link.
>
> So far I've managed to achieve this by linking an image
to the a:hover state
> but I need the copy to be different for each menu item
and I'd like to make it
> vector text not image.
>
> Can this be done?
>
> My attempt so far;
>
http://www.ad-one.co.uk/test/index4.htm
>
> Thanks
>
> Chris
>
>
Kim
http://www.geekministry.com

Similar Messages

CSS Menu hover issue in IE7

Hi all,
I've created a CSS based drop down menu for this site:
http://www.elizabethgorcey.com.
In IE7 the menus don't drop down. They pop up and cover the parent
item they are supposed to descend from. Can anyone tell me why this
is and how to fix it?
Thanks,
John

On Sat, 19 Jul 2008 01:21:08 +0000 (UTC), "John Ciccolini"
<[email protected]> wrote:
>Hi all,
> I've created a CSS based drop down menu for this site:
>
http://www.elizabethgorcey.com.
In IE7 the menus don't drop down. They pop up
>and cover the parent item they are supposed to descend
from. Can anyone tell
>me why this is and how to fix it?
> Thanks,
> John
Seems to work ok in IE7 for me. But not in IE6 ! ?
works ok in Safari & Opera - and FF of course
I popped the code into Dw and ran the compatibility check and
says
there is a problem with IE6 - Expanding box problem
Googled it - and not sure that is 100% correct - but it might
be a
steer........ ?
minor css issue - which I doubt affects the problem ?
#breastpumpposter {
position: relative;
top: 0px;
padding-top: -3.5em;
margin-left: 20px;
padding-bottom: 10px;
margin-bottom: 20px;
padding-top cannot be negative
~Malcolm~*...
~*

How to change hover state on spry menu dropdowns?

I've spent 4 hours making changes to the style sheet. I cannot figure out how to make the drop-down menu background change when you mouseover. The text color changes, but the background doesn't. I keep making changes to the stylesheet, and sometimes I see no difference.
Also... trying to change the font color on the main menu text. Style sheet LOOKS right, but doesn't display any change.
ALSO, my border is wider than the submenus. They are both set to 15ems. Maybe I don't understand ems??? I appreciate all your help out there! Sorry for not taking out all comments from code...
http://duenorthdesign.com/pcm/index2.html
ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 748px; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 8em; float: left; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 15em; position: absolute; left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 15em; font-size: 12px; background-color: #C2CA9A; color: rgba(0,0,0,1); } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 1px solid #61270e; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; background: 61270e; padding: 0.5em 0.75em; color: ffffff; text-decoration: none; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #61270e; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { background: transparent; color: #61270e; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(../images/bkd_navtop.jpg); background-repeat: repeat-x; color: rgba(255,255,255,1); font-family: "Yanone Kaffeesatz", Verdana, Geneva, sans-serif; width: 149px; font-size: 23px; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; }

The good news is, Spry components generate their own CSs files so you know where to start when customizing. From there you can either go into the CSS file itself, or use the CSS styles panel in Dreamweaver.
if you're looking within the CSS file, you first need to find the block the styles the particular element you want to change, and tweak the values. However, if any of the attributes are inheriting their states from a parent rule, then you need to add that attribute to override the parent setting. So that means making sure you're using the right attribute and getting the syntax right.
If you use the CSS panel, select all, find you way to the correct style sheet, expand it and find the rule you need to change. You can set these parameters in the area underneath, or just double click the rule in the upper tree and display the CSS rules dialog. This is my favorite as it displays exactly what is contained in the style sheet in visual form. You can change values easily and add new attributes knowing that it will write the correct syntax. This should make it very easy to add hover states for the background and text, dimensions for the submenus and borders. For sizes and borders, I prefer pixels, but you can also add borders per side of the containing box - it doesn't have to be the same border all the way around.

Css menu on hover is wrong height

Hi Everyone,
I usually use spry so not versed in building a CSS menu but thought I'd give it a go on this simple site. I have a full width 1024 bar. No dropdowns. A vertical line between central menu items. The bar needs to have a fade from left to right so I have put this as a backgroundimage div. So far so good. Created my menu items and after much trial and error managed to get the positioning just about right, and the hover changes right. BUT, when you hover, the background needs to change to white background (so no longer looking at the gradient bar beneath it), and text to blue. Works perfectly EXCEPT that the size of the 'white' over is bigger (rises above and below the div) and I am trying to get it to be the same height as everything should be the same.
I have tried putting a height; attribute on everything but it makes no difference. The bar is 41px high. Everything else should also be 41px high. I added a 10px padding which worked in lowering the text in the bar to be more central, but I don't think this has caused the problem I'm getting as that was there before and nothing I try seems to make it size correctly.
I know it's somethign simple that someone could fix in a jiffy and hoping you're out there! Many thanks.
Page is displayed here http://www.charlieapple.co.uk/hamilton/index2.html
css is here
@charset "utf-8";
#wrapper {
    background-color: #CAD0D5;
#container {
    background-color: #CFF;
    width: 1024px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
#banner {
    height: 179px;
    width: 1024px;
#leftbody {
    padding-top: 20px;
#navbar {
    background-image: url(images/blue-grad-bar.png);
    height: 41px;
    width: 1024px;
#navigation {
    font-family: Calibri;
    background-image: url(images/blue-grad-bar.png);
    text-decoration: none;
    color: #FFF;
    padding-top: 10px;
    height: 31px;
#navigation ul
    margin: 0;
    padding: 0;
    text-decoration: none;
    height: 41px;
#navigation ul li
    list-style-type: none;
    display: inline;
    text-decoration: none;
    height: 41px;
#navigation ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    height: 41px;
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
#navigation a:hover {
    color: #354777;
    text-decoration: none;
    background-color: #FFF;
    height: 31px;
#navigation li:before {
content: "      |       ";
#navigation li:first-child:before {
content: none;
#leftcol {
    float: left;
    width: 640px;
    margin-left: 27px;
#rightcol {
    background-color: #CCF;
    float: right;
    width: 307px;
    margin-right: 24px;
    margin-left: 26px;
#pagename {
    font-family: Cambria, "Bell MT";
    font-size: 30px;
    color: #354777;
    width: 640px;
    margin-top: 10px;
    border-bottom-width: thick;
    border-bottom-style: dotted;
    border-bottom-color: #354777;
    padding-bottom: 10px;

Thanks Nancy O, I've made this change and it has fixed the height problem but now I have a new problem in the 'home' hover is completely weird! I'm copying the css below so you can see the changes I've made that you suggested and previously to that made the adjustments that Murray suggested. Could you also tell me if it's possible to get the hover for each button so the white stretches from the vertical lines left-right? many thanks.
@charset "utf-8";
#wrapper {
    background-color: #CAD0D5;
#container {
    background-color: #CFF;
    width: 1024px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
#banner {
    height: 179px;
    width: 1024px;
#leftbody {
    padding-top: 20px;
#navbar {
    background-image: url(images/blue-grad-bar.png);
    height: 41px;
    width: 1024px;
#navigation {
    font-family: Calibri;
    background-image: url(images/blue-grad-bar.png);
    text-decoration: none;
    color: #FFF;
#navigation ul
    margin: 0;
    padding: 0;
    text-decoration: none;
    height: 41px;
    overflow:hidden;
#navigation ul li
    list-style-type: none;
    height: 41px;
    float:left;
#navigation ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    line-height: 41px;
    padding: 41px 20px;
#navigation a:hover {
    color: #354777;
    text-decoration: none;
    background-color: #FFF;
    height: 31px;
#navigation li:before {
content: "      |       ";
#navigation li:first-child:before {
content: none;
#leftcol {
    float: left;
    width: 640px;
    margin-left: 27px;
#rightcol {
    background-color: #CCF;
    float: right;
    width: 307px;
    margin-right: 24px;
    margin-left: 26px;
#pagename {
    font-family: Cambria, "Bell MT";
    font-size: 30px;
    color: #354777;
    width: 640px;
    margin-top: 10px;
    border-bottom-width: thick;
    border-bottom-style: dotted;
    border-bottom-color: #354777;
    padding-bottom: 10px;

CSS link rel statements appear as comments. Not referenced. Help?

My CSS link rel statements appear as comments and are not referenced by the web page locally.
<link rel="stylesheet" type="text/css" href="/PDGCommTemplates/HTN/css/newmain.css" />
I have a new computer (windows 8 which I've learned to love... durress works miracles). I also had to switch to a designated server from a shared server, at the same time so several variables.
When I created this site on my new computer I first created the site within Dreamweaver and then I opened the remote site and downloaded it's entirety to my hard drive. I've somehow created the problem in this process.
The problem is in how the style sheets are directed. None of the original style sheets show up in the CSS Styles Panel, in either the all or the current tab. However when I open a page the style sheet titles all appear in the menu bar above the page (as short cut icons) and I can select/open them but get a note that the css file is a remote file and cannot be edited. When I hover over the shortcut icon in the menu bar the directory path appears as http://cafetablesserver.newhostingaccount.net/PDGCommTemplates/HTN/css/newmain.css
I can open the css files locally in the file manager and I can create new css files. The remote site is functioning.... however, my nameservers are not yet directed at it and I have had to change my host file to view it.
So what I need to know is how do I direct the local pages to reference a local css page on my hard drive? I need the path to be C:/..../..../webpagename/httpdocs/PDGCommTemplates/HTN/css/newmain.css
The root directory is httpdocs
I ran this site no problem on my old computer as a document root site. I've only changed the computer and the server. Thanks for your help

Thanks for your response,
I may not have been clear in original post. The only time the http:// or the C:// prefix is present is when I hover over the file names in the menu bar above the open web page. I have not enterred them as such.
The link rel comment is currently written as link rel="stylesheet" type="text/css" href="/PDGCommTemplates/HTN/css/newmain.css
My current file tree is as follows:
httpdocs
-/PDGCommTemplates/
     -/HTN/
          -/css/
               -newmain.css
          -home.html
Is the link rel comment above wrong? Do I need to move my html files into the root directory? They are currently in the sub sub folder /HTN/
Thanks

CSS Menu Trouble!

I have an existing menu built with css and now the client
wants a drop down for one of the tabs.
I have implemented the drop down but cannot get anything to
work correctly. Any help would be great. I have attached the css
for the sample page I am working on. If you hover over "services,
you'll see that the hover state expands too wide and the drop down
doesn't line up with the bottom of the navbar.
Here's the url to that page:
test
page

I found the mistakes...
Victoria
"Victoria" <[email protected]> wrote in message
news:ejqdl6$cl$[email protected]..
> Hello everyone,
> I have created a SwapClass CSS Tree Menu using
navigation tutorials from
> Project VII for this site www.ketchum.ca . In IE6 I see
gaps after 1, 2
> and 5th "buttons". There are also lots of random gaps in
submenus.
>
> I am not sure what is causing this and I have to get rid
of the gaps as
> soon as possible. When I preview the site in Firefox or
even IE5.2 on Mac
> everything looks perfect.
>
> I would be very grateful for any advice as to how to fix
this problem.
>
> Victoria
>

How do I add a hover state to a smart shape button on the master slide? CP7

I want to use a button with a hover state on my master slide in CP7. I created a smart shape and checked the box 'use as button.' I then created 3 image files with the "x_up, x_down, x_over' extensions. When I select my smart shape and choose a custom pattern from the fill menu and select my 'x_up' image file, the smart shape does not recognize the hover state. Is there another way to achieve this?
Thanks!

Thanks I think I get it now after reading your post. Shape buttons can only shrink when they are pressed and nothing else. I was thinking a work round for me would be to use a regular button with the up, over, down state, put this regular button on the first slide and set the timing for 'display for rest of project.' However I don't see this option in the timing panel:
Is this option somewhere else?
Thx!

Hover state to work in IE8

I cannot get the hover state to work on <p>
I have assigned a hover state to the paragraph tag.
It works fine in FireFox but I can not get the hover state to work in Internet Explorer 8.
The reason that I gave it a hover state is because it is linked in XML and I want it to look like a Hyperlink when you mouse over it.
Thanks,
Travis
CSS:
#Wrapper   #Top   #LeftColumn   #LeftContent p {
    text-indent: 35px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #777;
    background-image: url(/images/LeftLinksGrayDot.gif);
    background-repeat: no-repeat;
    background-position: 20px 0.4em;
    height: 20px;
    text-align: left;
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
#Wrapper #Top #LeftColumn #LeftContent p:hover {
    color: #0000FF;
    background-image: url(/images/LeftLinksBlueDot.gif);
    background-repeat: no-repeat;
    background-position: 20px .4em;

AFAIK IE only Hovers on <a> tags.
jQuery to the rescue
http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS Menu issues

hi.
Can anyone help tell me why my menu is displaying like shown in the picture?
* I want About Us and Services to be the same height as home and contact
* The sub menus are all weird, as you can see there are three additional items that should be showing but they end up as little grey boxes. There are no sub sub menus.
I have naughtily copied and chopped a menu from another site I did a while back so is probably random bits in there (sub sub menu bits). I don't do sites very often as I am not very good (as you can tell) and have been messing for 90 mins now and getting hardly nowhere so any pointers would be good.
My site will be a fluid width so it adapts to different devices (to a fashion!)
CSS:
@charset "utf-8";
#nav, #nav ul{
    font:Arial, Helvetica, sans-serif;
    font-size:95%;
    align:center;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    /*line-height:30px;*/
    width: 99%;
    Z-index:1000;
    border: 1px solid #000;
#nav a:link, #nav a:active, #nav a:visited{
    display:block;
    color:#000;
    text-decoration:none;
    background:#E0E0E0;
    z-index:1000;
    padding: 8px 5px;
    line-height: 30px;
#nav a:hover{
    background:#CCC;
    color:#000;
    z-index:1000;
#nav li{
    float:left;
    position:relative;
    width:24%;
    background: #CCC;
    z-index:1000;
    text-align: center;
    border: 1px solid #000;
#nav ul {
    position:absolute;
    width:25%;
    top:30px;
    left:-1em;
    display:none;
    z-index:1000;
#nav li ul a{
    width:12em;
    float:left;
    z-index:1000;
#nav ul ul{
    top:auto;
    height:inherit
    z-index:1001;
#nav li ul ul {
    left:12em;
    margin:-1px 0 0 10px;
    z-index:1001;
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
Thanks in advance.

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>CSS Menu</title>
<style>
    padding:0;
    margin:0;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
nav ul {
    list-style-type:none;
    height:0px;
    min-width:440px;
nav li {
    width:25%;
    background-color:gray;
    float:left;
    min-width:100px;
nav a {
    display:block;
    height:100%;
    width:100%;
    padding:5px 8px;
    text-decoration:none;
    color:white;
nav ul li ul {
    display:none;
nav ul li:hover {
    background-color:#B7B7B7;
nav ul li:hover ul {
    display:block;
nav ul li ul li {
    float:none;
    width:100%;
</style>


<title>Kutbax Arboricultural Contractors</title>



<style type="text/css">

</style><link href="../kutbaxmenu.css" rel="stylesheet" type="text/css" />
<link href="../kutbaxmenu.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColLiqCtrHdr">
<div id="header">
    <p class="HEADER"><img src="../Kutbax Logo.jpg" width="100" height="97" hspace="10" vspace="5" align="left" /></p>
    <p class="HEADER">KUTBAX</p>
    <p class="HEADER"><strong> ARBORICULTURAL CONTRACTORS</strong><strong></strong></p>
    <p class="a2">Telephone: 01827 874818 Email: <a href="mailto:[email protected]">[email protected]</a></p>

</div>
</head>
<div><body>
<p> </p>
<div> <nav>
    <ul>
      <li><a href="../index.html">Home</a></li>
      <li><a href="#">About Us</a>
        <ul>
          <li><a href="../company.html">Company</a></li>
          <li><a href="../insurance.html ">Insurance</a></li>
          <li><a href="../policies.html ">Policies</a></li>
          <li><a href="../machinery.html">Machinery</a></li>
          <li><a href="../workscompleted.html ">Works Completed</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a>
        <ul>
          <li><a href="../treesurgery.html">Tree Surgery</a></li>
          <li><a href="../japaneseknotweed.html ">Japanese Knotweed</a></li>
          <li><a href="../siteclearance.html ">Site Clearance</a></li>
          <li><a href="../treeplanting.html">Tree Planting</a></li>
        </ul>
      </li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
    </nav>
</div>

<div id="mainContent">
    <h1> Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    
</div>

<div id="footer">
    <p align="center"><span class="bottomtext">© Copyright 2014 - Kutbax Arboricultural Contractors Ltd - UK Reg No. 06475048 -   All Rights Reserved<br />
Kutbax House, 134 Hurley Common, Hurley, Atherstone, CV9 2LR</span></p>
    <div align="center">
      
    </div>
</div>
</div>
</body>
</html>

CSS Menu incorporated into Image. How is it done?

Hello everyone I hope your weekend if proving fruitful!
I have a little problem with Dreamweaver. Basically it is this:
I have created a banner in Photoshop with a gorgeous artwork image (I am pleased with it to be honest!). To add to its aethetic appeal I have decided to incorporate a CSS Menu into it. Please note the menu will not be at the top (in other words ABOVE the image) or below the image.   I am wanting to position it around 200 pixes from the top.
The technique I have used so far is this:
Create image in Photoshop
Use the slice tool to slice the image and slice the part where I want my CSS Menu to go
Save as "Html and images"
Import into Dreamweaver and remove the part that has been sliced for the navigation bar
Insert a div tag at insertion point and apply my bar
Please note I am okay at putting the html coding and css into the right place (I think!) but the problems I am having is that it seems disjointed and the menu bar is not fitting seamlessly without gaps into the image.
Would a possible solution be to slice up the image save only as "images" (no html) and then incorporate parts of the image (e.g. top, middle, bottom) into div tags and incorporate the menu bar that way?
Please note I am new to this so please don't laugh too hard at my stupidity!
I'll catch you later!
Thank you
Jake

No need to slice the banner image. Simply put your banner in the background with CSS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
/**CSS Reset to fix the box model**/
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    background:#CCC;
    font-size: 100%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding: 0;
    width: 1000px; /*adjust width in px or % as req'd*/
    margin: 0 auto;/**with width, this is centered**/
header h1, header h2 {
    font-size: 26px;
    color: #999;
    display: inline;
    text-align: right;
    padding: 2%
/**TOP MENU**/
nav {
    min-height: 200px; /**same as banner height**/
/**banner in the background**/
    background: #198EBA url(http://placehold.it/1056x200/198EBA/FFFFFF&text=Banner.jpg) no-repeat;
nav ul li {
    list-style: none;
    margin-top: 150px; /**adjust where desired**/
nav li {
    display: inline-block;
    margin: 0 2%;
    font-size: 20px;
nav li a {
    text-decoration: none;
    color: #CCCEEE;
nav li a:hover,
nav li a:active,
nav li a:focus {
    text-decoration:underline;
    color:#0F9}
</style>
</head>
<body>

<header>
<h1>SiteName</h1>
<h2>Some Pithy Slogan</h2>
</header>


<nav>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</nav>

</body>
</html>
Nancy O.

Help needed with CSS menu please

Hello
Could someone give me a hand with a CSS menu I am struggling
with please?
I want each of the blue menus to have a black border around
it (so 4 borders in total). And how do I make each menu have a
closer gap? I need them squashed up a little bit more vertically.
The code is as follows -
<style type="text/css">
#ddblueblockmenu{
width: 179px;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom: 0 solid #FFFFFF;
border-left: 1px solid #FFFFFF;
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 75% 'Trebuchet MS', 'Lucida Grande', Arial,
sans-serif;
border: #000000;
#ddblueblockmenu li a{
display: block;
padding: 5px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and
margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 11px solid #FFFFFF; /*change border gap size
here*/
/*border-left: 1px solid #1958b7;
* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and
margins*/
#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #FFFFFF;
font: bold 60% 'Trebuchet MS', 'Lucida Grande', Arial,
sans-serif;
</style>
<body>
<div id="ddblueblockmenu">
<ul>
<li><a href="whoarewe.htm"><strong>What We
Offer</strong></a></li>
<li><a
href="guidelines.htm"><strong>Professional
Guidelines</strong></a></li>
<li><a
href="workshops.htm"><strong>Workshops</strong></a></li>
<li><a href="contactus.htm"
style="border-bottom-color: white; font-weight:
bold;">Contact</a></li>
</ul>
</div>
</body>
</html>
Any help is very greatfull appreciated!!
Tom

"Gary White" <[email protected]> wrote in message
news:[email protected]..
> On Tue, 23 May 2006 11:42:13 +1000, ".: Nadia :. ACE :."
> <[email protected]> wrote:
>
>>If you want a border the same color around the whole
menu, you can use the
>>short-cut method:
>>
>>border { 1px solid #FFF;}
>
>
> Uh ...
>
> #ddblueblockmenu{
> width: 179px;
> border: 1px solid #fff;
> }
>
um... that's what I meant... the OP had all four sides styled
separately,
with 0 for one side... but mentioned he wanted a border on
all sides....
hence my arrow pointing out the side that had 0 for border
and what could
be used as a shortcut method of styling the border....
Maybe my post wasn't exactly clear ;-)
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html

CSS Menu - Dropdown list help.

Hi guys,
I am re-creating a website for a friend and I am currently finding coding the CSS Menu difficult.
Here is MY version of the website:
http://abacusmortgages.co.uk/index.html
Here is the current version I am trying to copy:
http://sdhmarketing.co.uk/
Pages: Our client types and What do you need have special css menu dropdown lists which come up when you hover over the button.
Here is the CSS code I have so far:
#holding ul {
          margin: 0px;
          padding-left: 0px;
          list-style-type: none;
          font-family: Arial;
          font-size: 14px;
          font-weight: bolder;
          color: #506F1A;
          background-image: url(images/navbg.jpg);
          position: absolute;
          left: 0px;
          top: -3px;
#holding ul li {
          float: left;
          width: 200px;
          margin: 0px;
          font-weight: bold;
#holding ul li a {
          font-family: Arial;
          font-size: 11pt;
          color: #506F1A;
          text-decoration: none;
          background-color: Transparent;
          text-align: center;
          display: block;
          padding: 5px;
#navigation {
#holding ul li a:hover {
          color: #FFF;
          background-color: #333;
          font-weight: bolder;
          font-size: 14px;
.menu {
Here is the HTML I am using:
<ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="ourclienttypes.html">OUR CLIENT TYPES</a></li>
    <li><a href="whatdoyouneed.html">WHAT DO YOU NEED?</a></li>
    <li><a href="casestudies.html">CASE STUDIES</a></li>
    <li><a href="managementteam.html">MANAGEMENT TEAM</a></li>
</ul>
If anyone could help it would be much appreciated.
Thanks all!

You, essentially, have an issue with float: left;
Here's the deal, when you float list items left, they'll line up to the left, even though your navigation is centered.
They have also done this website in a manner that does not line up with what the W3C considers a standard for websites, but that's another issue.
Here's their HTML:
<!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>wanted</title>
<link href="wanted.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="head">
<div style="width:100%; float:left;">
    <div id="name2"></div>
    <div id="name1"></div>
</div>
<div id="slogan"></div>
</div>
<div id="top"><a class="topsel1" href = "http://sdhmarketing.co.uk/index.php">HOME</a><a class="top1" href = "http://sdhmarketing.co.uk/who.php">OUR CLIENT TYPES</a><a class="top1" href = "http://sdhmarketing.co.uk/what.php">WHAT DO YOU NEED?</a><a class="top1" href = "http://sdhmarketing.co.uk/case_studies.php">CASE STUDIES</a><a class="top1" href = "http://sdhmarketing.co.uk/team.php">MANAGEMENT TEAM</a> </div>
<div id="maintop"></div>
</body>
</html>
Now, here's the problem. They have one line with all of their navigation. So they started out with (on the same line):
HOME OUR CLIENT TYPES WHAT DO YOU NEED? CASE STUDIES MANAGEMENT TEAM
Then, they selected each menu item and gave it a style and a link. That's pretty bad practice, because how do you manage that? Also, how do blind people figure out it's a navigation? Also, what if you want sub-menus?
But you like how it's pretty and I respect that.
This is how to really do it:
HTML:
<div id="top">
<ul>
          <li>HOME</li>
    <li>OUR CLIENT TYPES</li>
    <li>WHAT DO YOU NEED?</li>
    <li>CASE STUDIES</li>
          <li>MANAGEMENT TEAM</li>
</ul> 
</div> 
You see here, I have an Unordered List for my navigation. Because it's an unordered list, I can easily add new items, add sub-lists (drop-down menus) and really make this puppy sing. Unfortunately, when you look at this with no style, you'll see something pretty boring and it won't be horizontal. We change all of that in the style sheet.
First, before we do anything else, we'll make everything into a link. We can change those links later on when we build the rest of our pages.
<ul>
          <li><a href="#">HOME</a></li>
    <li><a href="#">OUR CLIENT TYPES</a></li>
    <li><a href="#">WHAT DO YOU NEED?</a></li>
    <li><a href="#">CASE STUDIES</a></li>
          <li><a href="#">MANAGEMENT TEAM</a></li>
</ul> 
An hash "#" is a link that simply calls the page you are on. It's a bona-fide link and it will create what you want.
Now, we need to set up styles.
Let's set up the list by getting rid of bullet points (the default) and give it a little padding:
Make a new style sheet, call it how-to.css. It will be blank so we'll add a style. We will need to link to it from our HTML page, so add the following to the <head> section:
<link href="how-to.css" rel="stylesheet" type="text/css" />
Now, we make a blank CSS page and we call it how-to.css. Put it in the root of your defined site in Dreamweaver for now. And we'll define list objects within the div they naked top:
#top li {
          display: inline;
          list-style-type: none;
          padding-right: 20px;
Now, you'll see that our list is suddenly horizontal! Cool! But links are blue by default and underlined. Did we want that? No. So let's style links:
#top a {
          float:left;
          padding: 5px 20px 2px 20px;
          font-size: 13px;
          height:23px;
          color:#506F1A;
          display: block;
          letter-spacing: -0.2px;
          font-weight: bold;
          text-decoration: none;
Now, I'm borrowing heavily from their styles here.
But we have to set up the #top framework and here's that (it should go before everything else in your style sheet)
#top {
          width:990px;
          padding:0px 10px 0px 0px;
          height:35px;
          margin:0px 0 0 0;
          background-image: url("navbg.jpeg");
          background-repeat: repeat-x;
Now, it's just about done. They used an Arial typeface and the default is Times Roman. Let's add a little more to the #top id:
Now let's make backgrounds change when we hover and when we have one selected.
#top a:hover {
          background-color: #444;
          color: #fff;
And make a background behind the page you are on, with a hover:
.selected {
          background-color:#777777;
          color:white !important;
.selected a:hover {
          background-color: #444;
          color: #fff;
Now you're pretty much done.
Here is how to style the entire thing in CSS:
#top {
          width:990px;
          padding:0px 10px 0px 0px;
          height:35px;
          margin:0px 0 0 0;
          background-image: url("navbg.jpeg");
          background-repeat: repeat-x;
          font-family: Arial, Helvetica, sans-serif;
#top li {
          display: inline;
          list-style-type: none;
          padding-right: 20px;
#top a {
          float:left;
          padding: 10px 20px 5px 20px;
          font-size: 13px;
          height:26px;
          color:#506F1A;
          display: block;
          letter-spacing: -0.2px;
          font-weight: bold;
          text-decoration: none;
          margin-top: -5px;
#top a:hover {
          background-color: #444;
          color: #fff;
.selected {
          background-color:#777777;
          color:white !important;
.selected a:hover {
          background-color: #444;
          color: #fff;

Center css menu

I have a horizontal CSS menu with dynamic drop down sub
menu's
In DW design view it is centered, but when previewed in IE it
is justified
left.. I need to center it on the page. Please Help, where am
I going wrong.
Here is the code:
<script type="text/javascript">

</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: white;
font: 12px Arial, Helvetica, sans-serif;
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
#menu {
left: auto;
z-index:100;
right: auto;
width: 600px;
margin-right: auto;
margin-left: auto;
#menu dl {
float: left;
width: 80px;
margin: 0 1px;
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
#menu dd {
border: 1px solid gray;
#menu li {
text-align: center;
background: #fff;
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
#menu li a:hover, #menu dt a:hover {
background: #eee;
a {text-decoration: none;
color: black;
color: #222;
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:subMenu();"><a
href="">Menu</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:subMenu('smenu1');">Menu
1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
<li><a href="#">Menu 1.4</a></li>
<li><a href="#">Menu 1.5</a></li>
<li><a href="#">Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:subMenu('smenu2');">Menu
2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:subMenu('smenu3');">Menu
3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
<li><a href="#">Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:subMenu('smenu4');">Menu
4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Menu 4.1</a></li>
<li><a href="#">Menu 4.2</a></li>
<li><a href="#">Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
Jeff

thank you very much
Jeff
"z7server" <[email protected]> wrote in
message
news:fcc55u$hf1$[email protected]..
> Hi, you should add to body style:
> text-align: center;
> it will work,
> Titti
>
http://textures.z7server.com/

CSS Menu drop down part not working for ie8 and flashing shut on iPhone 5 browser

My CSS drop down menu will not show up in ie8 and flashes then shuts on iPhone 5 browsers (responsive design)..using code from a themeforest template. I am using CSS (HTML only) in the BC menu system. without further adieu here is the code.
HTML (I removed the BC javascript)______________________
<div id="navigation">
<ul>
<li><a href="/index.htm">Home</a></li>
<li><a href="/about">About</a>
<ul>
<li><a href="/leadership">Leadership</a></li>
<li><a href="/giving">Giving</a></li>
<li><a href="/careers">Careers</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</li>
</ul>
</div>
CSS______________________
#navigation {
float: right;
#navigation ul, #navigation li {
list-style:none;
padding:0;
margin:0;
display:inline;
#navigation ul li{
float:left;
position:relative;
#navigation ul li a {
font-family: Arial, sans-serif;
display: inline-block;
color: #888;
padding: 40px 6px 10px 6px;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
border-bottom: 3px solid transparent;
#navigation ul li a:hover{
border-bottom: 3px solid #555;
#navigation ul ul {
opacity: 0;
margin: -3px 0 0 5px;
filter: alpha(opacity=0);
position: absolute;
top:-99999px;
left: 0;
background: #fff;
border: 1px solid #dddddd;
border-top: 3px solid #555;
z-index: 999;
#navigation ul ul li a:hover {
border-bottom: 1px solid #ddd;
#navigation ul ul li a {
padding: 8px 0;
display: block;
width: 130px;
margin: 0 16px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid #dddddd;
border-top: 1px solid transparent;
#navigation ul ul ul {
position:absolute;
top:-99999px;
left:100%;
opacity: 0;
margin: -3px 0 0 0;
z-index: 999;
#navigation ul ul ul li a {
border-bottom: 1px solid #dddddd !important;
border-top: 1px solid transparent;
#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {
border-bottom: 1px solid transparent
#navigation ul ul ul li:last-child a {
border-bottom: 1px solid transparent !important
#navigation ul li:hover>ul{
opacity: 1;
position:absolute;
top:99%;
left:0;
#navigation ul ul li:hover>ul{
position:absolute;
top:0; left:100%;
opacity: 1;
z-index:497;
background: #fff border: 0;
#navigation ul li:hover > a {
color: #444;
#navigation ul ul li:hover > a {
border-top: 1px solid transparent;
color: #444;
#current {
font-weight: bold !important;
color: #444 !important;
border-bottom: 3px solid #555 !important;

Well to show the menu it runs off opacity, Opacity is not cross browser and IE8 as you noticed will not work with it.
This menu method of a CSS menu is also not mobile friendly.
You will need the MS filters to work in older IE's
http://css-tricks.com/snippets/css/cross-browser-opacity/

Hover State in iOS

I created a submenu that appears using the hover state. Works great with Windows Chrome & IE, and Android Chrome. It does not work on iOS for Chrome or Safari.
I even made a simple test with one div to make sure there too much going on in the code. It just does not respond on iOS.
I'm not sure if this is something that is already being addressed.

I'm not sure that a hover state is gonna work on a mobile touch browser the same way it works on desktop. Since you need to have a constant cursor on desktop, and it does not really work the same for touch devices.
But, we don't yet have things like click for buttons, since it would require javascript to execute the state or css change. Reflow only uses html and css at the moment.
We are continually looking into what users want to use Reflow for, and if this is of interest, please let us know!

CSS menu hover state

Similar Messages

Maybe you are looking for