Flash is in front of a css menu where wmode="direct"

Hello,
Flash Player is always in front of a css menu where wmode="direct"
Thanks

pol2095 wrote:
a real developer don't use an old technology like javascript is 15 years late
I'm not completely sure you're actually serious. Given the number of mobile devices that don't support Flash and how quickly people are abandoning their desktops in favor of tablets and smartphones I have a hard time believing you kept a straight face while typing that...
Adobe Discontinues Development of Flash Player on Mobile Devices
Android latest platform to drop Flash support
Thoughts on Flash - Apple/Steve Jobs
Mobile Now Exceeds PC: The Biggest Shift Since the Internet Began | SEW

Similar Messages

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/

I have added/embedded four videos on my website, but when I scroll down, the videos scroll in front of the top menu instead of behind as it should. I have tried changing layers, etc., and nothing works. Can you help?

I have embedded 4 videos on my website. It is a single page, scrolling site. When I scroll down, the videos scroll in front of the top menu bar, instead of behind it. I have tried changing layers, etc., and nothing works. Please help.
Thanks.
Paul W. Norman

Hi,
Kindly create a new layer, via the Layers panel:
Then, right click on the navigation bar, and choose Move to Layer > Layer 2
Ensure that Layer 2 is on top of the other layers.
Hope it helps,
Sonam

In the spry css menu, how do i know what does what?

I have two questions,
(1) In the spry css menu, is it just a case of trial and error to find out what each one does or is there a recognisable freature of each line to tell me what each one does, there are so many of them and most of them are alike. I cant help thinking there is a simple way of identifying what each one does without having to search around in the dark until i stumble on the right one that dose what i am trying to tweak in the appearance of the menu bar.
(2) When I am inserting the data for each of the navigation links when i first insert the spry menu I.E.... HOME...ABOUT...COURSES....CONTACT and the list items under "COURSES" link successfully to each page when clicked in the browser. When i click the "HOME" button, a drop down menu of the navigation options ( HOME...ABOUT...COURSES...CONTACT) appears under it. How do I eliminate this when i insert the spry menu bar so it does not appear in the browser.

Have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Have proper markup.
Although the above are true answers to your questions, I have reason to believe that it will not satisfy you. Remember that these are user to user forums and that we do not have much time to spare. We can answer most specific questions, but do not have the time to answer generic questions to their fullest extent.
What I am trying to say is, please supply a link to your site with a specific question and we will help where we can.
Gramps

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;

On the Adobe Flash Player web page,the Right Click Menu that near the taskbar can not be pop up.

Environment：Win8/64bit Ent JP、IE10 JP、、Adobe Flash Player 11.3.372.94
(when the language is English it happened too )　
Problem:
On the Adobe Flash Player web page，the Right Click Menu that near the taskbar can not be pop up.
And On the Flash Player Help home page(http://helpx.adobe.com/en/flash-player.html) has the same problem,
and menu round the red circle on the below picture is the problem Right Click Menu.
As this problem，If we program use the Flex，the problem that the Right Click Menu can not be pop up must occur.
eg:
IF there is many lines when we use the ListController ,the data nears the taskbar can not be used the Right Click Menu。
Relation:
The problem does not happen when the environment is below
1、IE10(Win7/64bit)
2、Google Chrome(Win8/64bit Ent JP)
Question：
Whether this problem is resolved? If yes，please tell me the solution，thank you!

Can you try to update Flash Player to a newer version (using Windows Update)?

Link BC blog to html/css menu

Re the Blog
Client site is not using BC Dynamic Menus - I'm using html/css menu.
How can I link the menu item to the BC Blog in Admin or DW
Appreciate all your support
Will

Hi
Is this what you're looking for: http://screencasteu.worldsecuresystems.com/AP/menu.swf
Here's the kb on this as well: http://helpx.adobe.com/business-catalyst/partner/create-menu.html
Kind Regards,
Alex

Inserting iFrame and css menu script

Something in this isn't working.
I've downloaded the css menuscript from css menu generator, uploaded the "menu" folder to the root folder www.widman.biz/Corvair
then put the following in the html widget
Time for help.
this is what I'm getting instead of a menu across the top where the menu should be
"The requested URL /Corvair/English//Englishfiles/widget0markup.html was not found on this server."
I uploaded the "menu" folder from CSS menu maker to the "Corvair" folder of www.widman.biz
This is what I put in the snippet:
<iframe src="http://www.widman.biz/Corvair/menu/menu_style.css" frameborder="0" width="775" height="90" scrolling="no"></iframe>
<textarea>
<head>
<link rel="stylesheet" type="text/css" href="/menu/menu_style.css" />
</head>
followed by all the rest of the text generated by the css menu site, which if I post here actually ends up as a text menu instead of the script. (see other post
(http://discussions.apple.com/thread.jspa?threadID=2209476&tstart=25)
I'm supposed to end up with a drop down menu across the top
I'm guessing I'm not putting the script in right, or what?

There's a lot wrong with [your HTML Snippet|http://www.widman.biz/Corvair/English//Englishfiles/widget1markup.html]:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><body></p>
<textarea>
<head>
<link rel="stylesheet" type="text/css" href="http://www.widman.biz/Corvair/menu/menu_style.css" />
</head>
<More code that should be displayed but isn't.>
The body, p and textarea elements should not be there. Plus a body element in the place where it should be is missing.
[Here's the page you want.|http://www.wyodor.net/_Discussions/widman.html] Save it as HTML and copy/paste the entire code in the HTML Snippet.
[Using the HTML Snippet in iWeb|http://www.wyodor.net/blog/archives/2009/07/entry_213.html]
Paying attention to detail is the name of the game.

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 Maker Dreamweaver CS5

Hi folks,
Newb to Dreamweaver CS5 & CSS (yay!) I've read the online tutorials and quite frankly, I'm about ready to smash my head against my desk. This is very confusing. I haven't made any progress with my web site....unless staring at a white screen mocking me is progress.
I got some good feedback from a few users in my first post (this is my 2nd post) for which I'm very greatful btw and figured out that frames aren't the way to go. CSS confused the heck out of me, so I did some research and stumbled upon a website : http://www.cssmenumaker.com
I was able to create & download a horizontal CSS menu that looks very appealing. Problem is, I can't seem to get it to work using Dreamweaver CS5. Perhaps somebody can help me. (God how I hope somebody can help me!)
For starters, I've created a "site" in Dreamweaver CS5. The site in Dreamweaver CS5 connects successfully to my hosting server. The directory structure on my hard drive that holds my files is :
C:\HTML
C:\HTML\images (where I keep any images used for my site)
C:\HTML\menu (this was produced by the CSS menumaker website - has a CSS file in it & an "images" subdirectory within)
Below are the instructions that were included when I unzipped the cssmenumaker's zip file :
INSTALLATION INSTRUCTIONS
1) Upload the "Menu" folder to the root directory of your website.
2) Copy and paste the code below to the desired spot in your site.
<head>
     <link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>
<div class="menu bubplastic horizontal aqua">
     <ul>
         <li class="highlight"><span class="menu_r"><a href="index.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
         <li><span class="menu_r"><a href="products-services" target="_self"><span class="menu_ar">Products/Services</span></a></span></li>
         <li><span class="menu_r"><a href="faq" target="_self"><span class="menu_ar">FAQs</span></a></span></li>
         <li><span class="menu_r"><a href="contactus" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
     </ul>
     <br class="clearit" />
</div>
NOTE:
1) Open the "sample.html" to view a sample of your menu.DO NOT use this code in your site.
2) If you run into a problem getting your menu to work or have suggestions for the site please Contact Us and let us know. We will try to help as much as possible.
Can somebody walk me through this step by step? I thought it was fairly simple but obviously I'm doing something wrong.

John,
As I mentioned in my first post I've been through the tutorials already. I just can't seem to get this to work. Working off what I told you in my first post, assume you're working with a blank index.html and you enter in the CSS Menu Maker's code to the blank html file.
The HTML code should look like this, should it not ? :
<!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</title>
<link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>
<div class="menu bubplastic horizontal aqua">
    <ul>
        <li class="highlight"><span class="menu_r"><a href="index.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
        <li><span class="menu_r"><a href="products-services" target="_self"><span class="menu_ar">Products/Services</span></a></span></li>
        <li><span class="menu_r"><a href="faq" target="_self"><span class="menu_ar">FAQs</span></a></span></li>
        <li><span class="menu_r"><a href="contactus" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
    </ul>
    <br class="clearit" />
</div>
<body>
</body>
</html>

Css menu over other div

I made a css-menu which on Mouse over is shown; In Firefox on
Mac it works fine, but on IE/PC it disappears when it comes over
another layer. On Mac Firefox the scrollbar from a text-layer is
going over the menu-div. I made the z-index of the menu-div the
highest from all.. Does someone know how I can solve this?
http://www.dedaadcom.nl/onnovlaanderen/bureau.php

I've actually worked it out ! so dont worry

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/

Flash is in front of a css menu where wmode="direct"

Similar Messages

Maybe you are looking for