Matrix CSS navigation

Trying to follow this CSS tutorial. Seems really easy and is
only using one image. But when I try it I just get a solid image.
What am I doing wrong? How do I down load the image to use? In the
CSS file it refers to nav_f_2.png but I have no idea where this is.
http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/

ROGM wrote:
> It's not about what you experience. It's the effect or
requirements for
> others.
Minorities you mean? I don't do minorities because that's not
where the
revenue is.
When I had a slow link I often disabled images to speed
things up.
Most people surfing the web won't know you can or even how to
disable
images, certainly dont know what css or javascript is so
disabling those
is completely out of the question. Only geeky web developers
do that
kind of nonsense and that is NOT the majority of user, thank
christ.
Lots
> of people put unoptimised images on their pages.
They do I agree but you think anyone other than a web
developer is going
to deduce that and turn the images off....your living in
la-la-land if
you do. They will just go to another site, not mess around
with the
browser settings.
Some people with image
> problems turn them off but still want your message.
What sort of problems are we talking about here? If they are
blind then
they won't know the images exist in the first instance so how
can
turning images off affect them. If they don't have a user
agent that
shows images get one.
The analogy is entirely
> inappropriate!
It might be a little exaggerated but I don't think its
entirely
inappropriate. If endless options are given to people then
its not the
responsibility of the web-developer to entertain everybody
and
everything. Its impossible anyway, although some like to
think they can
do, which I have proven on numerous ocassions in the past
they can't.
Each developers has to make a judgement as to what they feel
is
important and what they feel is not so important to address.
Its amazing how many of these so-called accessiblity gurus
there are
floating around and even more amazing when you visit their
site......or
sites they have built.... guess what it/they fall down on
accessibility.
Most of these gurus can't get regular paid work so they spend
their time
patting each other on the back and writting books and blog
entries on
web utopia. (even then they seem to disagree)
It should be easy enough to have a placeholder for images.
Have
> a look at some accessibility websites!
I'm not really interesting in accesibility sites addressing a
minority
entity.

Similar Messages

How can I use my Html/CSS Navigation bar to control an Edge Stage?

I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage.
Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
sym.play("home");
and animate a 6000px width symbol across my 1000px stage in 1000px increments.
I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
Many thanks to anyone who can help with this!
Here is the code for the navbar:
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
Full HTML:
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>Untitled</title>

    <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-57204389 { visibility:hidden; }
              .block-menu {
                              display: block;
                              background: #000;
                    .block-menu li {
                              display: inline-block;
                    .block-menu li a {
                              color: #fff;
                              display: block;
                              text-decoration: none;
                              font-family: 'Passion One',Arial,sans-serif;
                              -webkit-font-smoothing: antialiased;
                              -moz-font-smoothing: antialiased;
                              font-smoothing: antialiased;
                              text-transform: uppercase;
                              overflow: visible;
                              line-height: 20px;
                              font-size: 24px;
                              padding: 15px 10px;
                    /* animation domination */
                    .three-d {
                              -webkit-perspective: 200px;
                              -moz-perspective: 200px;
                              perspective: 200px;
                              -webkit-transition: all .07s linear;
                              -moz-transition: all .07s linear;
                              transition: all .07s linear;
                              position: relative;
                              .three-d:not(.active):hover {
                                        cursor: pointer;
                              .three-d:not(.active):hover .three-d-box,
                              .three-d:not(.active):focus .three-d-box {
                                        -moz-transform: translateZ(-25px) rotateX(90deg);
                                        -webkit-transform: translateZ(-25px) rotateX(90deg);
                                        -o-transform: translateZ(-25px) rotateX(90deg);
                                        transform: translateZ(-25px) rotateX(90deg);
                    .three-d-box {
                              -webkit-transition: all .3s ease-out;
                              -moz-transition: all .3s ease-out;
                              -ms-transition: all .3s ease-out;
                              -o-transition: all .3s ease-out;
                              transition: all .3s ease-out;
                              -webkit-transform: translatez(-25px);
                              -moz-transform: translatez(-25px);
                              -o-transform: translatez(-25px);
                              transform: translatez(-25px);
                              -webkit-transform-style: preserve-3d;
                              -moz-transform-style: preserve-3d;
                              -ms-transform-style: preserve-3d;
                              -o-transform-style: preserve-3d;
                              transform-style: preserve-3d;
                              pointer-events: none;
                              position: absolute;
                              top: 0;
                              left: 0;
                              display: block;
                              width: 100%;
                              height: 100%;
                    .front {
                              -webkit-transform: rotatex(0deg) translatez(25px);
                              -moz-transform: rotatex(0deg) translatez(25px);
                              -o-transform: rotatex(0deg) translatez(25px);
                              transform: rotatex(0deg) translatez(25px);
                    .back {
                              -webkit-transform: rotatex(-90deg) translatez(25px);
                              -moz-transform: rotatex(-90deg) translatez(25px);
                              -o-transform: rotatex(-90deg) translatez(25px);
                              transform: rotatex(-90deg) translatez(25px);
                              color: #FFE7C4;
                    .front, .back {
                              display: block;
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              top: 0;
                              left: 0;
                              background: black;
                              padding: 15px 10px;
                              color: white;
                              pointer-events: none;
                              -moz-box-sizing: border-box;
                              box-sizing: border-box;
    </style>

</head>
<body>
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
<div id="Stage" class="EDGE-57204389">
</div>
</body>
</html>

I've come across this from the Edge API:
Edge.getComposition(compId)
Anyone having trouble with this same issue should try this:
var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
   targetComp.getStage().play();
in their trigger or event handler.
How I got it to work:
<li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
   targetComp.getStage().play();" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>

Css navigation doesn't work in IE

I used the directions on this site,
http://htmldog.com/articles/suckerfish/dropdowns/,
to help me create navigation using css that would be compatible
with IE However it doesn't seem to work, when I load it in IE I get
"errors on page" and the drop down menu doesn't work. It seems to
work fine in firefox. Here's the page
http://whatcom-mrc.wsu.edu/mrc_base.htm
Is this a problem with my css or the javascript. Any help
would be appreciated.

Been there, done that burnt the T-shirt.
Although the suckerfish drop-downs look really good I got
into the same sort
of mess that you did. Found this newsgroup, took their advice
and now use
the menus at www.projectseven.com. Free to use their
tutorials or
reasonably-priced ready-made.
Jo
"karrimac" <[email protected]> wrote in
message
news:e2beer$k58$[email protected]..
>I used the directions on this site,
>
http://htmldog.com/articles/suckerfish/dropdowns/,
to help me create
> navigation
> using css that would be compatible with IE However it
doesn't seem to
> work,
> when I load it in IE I get "errors on page" and the drop
down menu doesn't
> work. It seems to work fine in firefox. Here's the page
>
http://whatcom-mrc.wsu.edu/mrc_base.htm
>
> Is this a problem with my css or the javascript. Any
help would be
> appreciated.
>

CSS Navigation with list problem

Hello all,
I'm attempting a left side navigation bar using CSS and list
items. I'm using a change of background color for the hover state.
For some reason the hover states don't show up at all in IE6, and
on Firefox my first link ("Home") is not lined up with the other
links. The page in question is www.greenforlife.net.
Any help would be greatly appreciated.
John

CSS :hover is supported but on the a tag only which you do
have it on. To
fix your problem add an IE ( 6 and below ) only rule.
* html #leftnav a {
height: 1%;
You have some weird margining goin on there in the leftnav.
If you set the
margin and padding to 0 on your <ol> you won't need to
use negative margins
to push your links to the left.
ADD THIS...
#leftnav ol {new
margin: 0;
padding: 0;
AND ....
#leftnav li {
list-style: none;
margin-left: -25px;<-- REMOVE THIS
padding: 0;
margin: 0;
Regards,
..Trent Pastrana
www.fourlevel.com
"John Ciccolini" <[email protected]> wrote
in message
news:eh90m9$b0l$[email protected]..
> Hello all,
> I'm attempting a left side navigation bar using CSS and
list items. I'm
> using
> a change of background color for the hover state. For
some reason the
> hover
> states don't show up at all in IE6, and on Firefox my
first link ("Home")
> is
> not lined up with the other links. The page in question
is
> www.greenforlife.net.
> Any help would be greatly appreciated.
> John
>

CSS navigation bar on MAC - problem with layering?

Hello,
I'm building a Web site with CSS. I'm using a navigation bar
that I found at CSS PLaY (
http://www.cssplay.co.uk/menus/dd_valid.html).
The flyout menu goes under a page item on the MAC. I have no idea
how to even approach a fix for this. Any suggestions would be much
appreciated.
A sample page is available here:
http://ccdb.hypermart.net/BIRNDEVWEB/TEST-SITE/birntest_TEMPLATE_HOME_2col.html
CSS files are linked in the HTML document.
The CSS file for the main page elements is
http://ccdb.hypermart.net/BIRNDEVWEB/TEST-SITE/birntest_TEMPLATE_HOME_main.css
The CSS file for the navigation is
http://ccdb.hypermart.net/BIRNDEVWEB/TEST-SITE/birntest_TEMPLATE_HOME_nav.css
AND
http://ccdb.hypermart.net/BIRNDEVWEB/TEST-SITE/birntest_TEMPLATE_HOME_nav_IE.css
I can be reached at [email protected]
Thanks!

Lisa -
This is something for your application developers to remedy
-if they can, they need to call the browser window without the
address bar. If it's a web app, they can use the document.open
method, and specify "address=0."
If for some reason that can't be done, you can create a
temporary topic that only exists to redirect the user to a window
of your own, with the document.open method, and no address bar.
Your original startup window, with all the toolbars stuff, closes
itself after launching the trimmed window.
Not sure what an internet server would do for you in this
case - are you trying to keep folks off the web, or out of a server
area?

How do i link an Html and Css navigation to elements on my DPS pages?

Basically i am trying to have a static navigation on the left side and content on the right. The Navigation i coded is a mix of an accordian and a carousel. Is it possible to make href links in my code to items on the Indesign page?

I have actually already tried that, but still no luck. Could you tell me if in am doing something wrong?
<div id="content1">
<div id="con1A"><img src="images/slideshow.png"><a href="navto://element#3" id="button"></a></div>
<div id="con1B"><img src="images/designer.png"><a href="navto://element#13" id="button"></a></div>
<div id="con1C"><img src="images/specs.png"><a href="navto://element#15" id="button"></a></div>
</div>

Can't edit the text in drop down css navigation menu bar

Hi All,
I'm just setting up contribute for a client to be able to edit a particular page on their website. The page they need to edit is essentially a huge CSS menu from which customers can choose location, then product and it will show them the price per product. The menu is a hover menu so as someone progresses through the menu they reach the price.
The client needs to be able to review and amend the prices reasonably regularly and can't afford to have full blow CMS so I thought contribute might work for them. I've connected to the web page and can select the CSS menu tree but when I then go to select the text for any of the hover overs the menu disappears back down to the initial menu item i.e. the hovered menu item doesn't stay visible and so I can't amend it.
Does anyone know if this is possible to do in contribute and if so can you explain how for me please?
Thanks
Andy
PS. The page in question can be found at http://www.visionltd.co.uk/price-calculator.html

Hi,
He can try editing that web page in an external application through Contribute. So, after browsing to the web page, he can click Ctrl+Shift+E, to edit the web page in an external application, there he can change the prices, save his changes, and publish the web page.
Hope this helps.

How do I get rid of the white space between my header and my spry navigation bar?

I have been grappling with a problem for the past 2 days and cannot seem to work my way around it. I have been working on a page in dreamweaver cs4 that seems to have whitespace between the header and my spry menu bar ONLY in Firefox. Google Chrome and Safari show it correctly. Could you steer me in the right direction for getting rid of that space. Here is the page: http://www.margaritascafe.com/margaritas_layout.html
Here is my code and thanks in advance for your help:
<!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>
<link href="margaritastyles.css" rel="stylesheet" type="text/css" />
<script src="Margaritas_temp_spry/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="250" id="FlashID" tabindex="10" title="Margarita's Cafe header 2">
      <param name="movie" value="flash_movies/Margaritas Header 3.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="flash_movies/Margaritas Header 3.swf" width="1000" height="250">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="9.0.45.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object>
</div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Menus</a>
        <ul>
          <li><a href="#">Lunch</a></li>
          <li><a href="#">Dinner</a></li>
          <li><a href="#">Cocktail</a></li>
          <li><a href="#">Take Out</a></li>
        </ul>
      </li>
      <li><a href="#">Photos</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Catering</a>
        <ul>
          <li><a href="#">Private Parties</a></li>
        </ul>
      </li>
      <li><a href="#">Reservations</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Reviews</a></li>
      <li><a href="#">Directions</a></li>
    </ul>
</div>
<div id="maincontentlayout3">Content for id "maincontentlayout3" Goes Here</div>
<div id="specials"><img src="png-gif-jpg/Tuesday Night Banner.jpg" width="200" height="70" alt="Margarita's Tuesday Night Special" /><img src="png-gif-jpg/Wednesday Banner.jpg" width="200" height="70" alt="Wednesday 2 for 1 dinner special at Margarita's" /><img src="png-gif-jpg/Thursday Banner.jpg" width="200" height="70" alt="Ladie's Night Thursdays at Margarita's Cafe" /><img src="png-gif-jpg/Friday Banner.jpg" width="200" height="70" alt="TGIF Happy Hour on Friday's at Margarita's Cafe" /><img src="png-gif-jpg/Sunday Banner.jpg" width="200" height="70" alt="Sunday Kids Eat Free at Margarita's Cafe!" /></div>
<div id="footer"><img src="png-gif-jpg/Margaritas Facebook logo.png" alt="Facebook" width="40" height="25" align="absmiddle" /> <img src="png-gif-jpg/Margaritas Twitter logo.png" alt="Twitter Logo" width="40" height="25" align="absmiddle" /><img src="png-gif-jpg/merchantcircle_mini.png" alt="Merchant Circle Logo" width="63" height="25" align="absmiddle" /></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

CSS:
#navigation {margin-top: -3px;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How do I change the background image for a single tab on the navigation bar

I'm creating a movie website for TDKR and for the navigation bar, I intend to have a different character for each tab. However, I'm having trouble putting a single image each separate tab. Instead one image appears on each of the tabs. Here's an example of the source and CSS.
<td width="200"><ul id="navigation"><br />
      <li><a href="../pages/index.html">Home</a></li><br />
      <li><a href="../pages/cast.html">Cast</a></li><br />
      <li><a href="../pages/pictures.html">Pictures</a></li><br />
      <li><a href="../pages/soundtrack.html">Music</a></li><br />
      <li><a href="../pages/interview.html">Interviews</a></li><br />
      <li><a href="../pages/links.html">Links</a></li><br />
    </ul>
    </td>
#navigation {
          list-style-type: none;
          padding: 0px;
          margin: 0px;
#navigation li {
          margin: 0px;
          padding: 0px;
          list-style-type: none
#navigation li a:link, #navigation li a:visited {
          display: block;
          width: 200px;
          height: 100px;
          text-decoration: none;
          text-align: center;
          line-height: 100px;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-weight: bold;
          -webkit-transition: 1000ms ease;
          -moz-transition: 1000ms ease;
          -ms-transition: 1000ms ease;
          -o-transition: 1000ms ease;
          transition: 1000ms ease;
          color: #648AAE;
          background-repeat: no-repeat;
          background-image: url(../Images/gifs/Batman-still-2.gif);
          background-position: center bottom;
          text-transform: uppercase;
          letter-spacing: 0.79em;
          border-radius: 5px;
#navigation li a:focus, #navigation li a:hover, #navigation li a:active {
          color: #000000;
          background-image: url(../Images/gifs/Batman-animation-2.gif);
          background-repeat: no-repeat;
          background-position: center bottom;
          background-color: #454545;
          border-radius: 25px;
So, how do I put a single image on each tab (home, cast, pictures, etc). Thank you for your help in advance.

Assign a class to the item and use CSS to apply an image as in
<li><a href="../pages/index.html" class="home;">Home</a></li><br />
<li><a href="../pages/cast.html">Cast</a></li><br />
<li><a href="../pages/pictures.html">Pictures</a></li><br />
<li><a href="../pages/soundtrack.html">Music</a></li><br />
<li><a href="../pages/interview.html">Interviews</a></li><br />
<li><a href="../pages/links.html">Links</a></li><br />
and the CSS
#navigation li a:link.home, #navigation li a:visited.home {
     background-image: url(../Images/gifs/Batman-still-2.gif);

Some nagging CSS image rollover questions

Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.
Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.
Thanks, Frank B.

brightbelt wrote:
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s
brightbelt wrote:
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.
Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.
brightbelt wrote:
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.
brightbelt wrote:
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
li's do have default padding and margins set so these need to be zeroed out.
li {
margin: 0;
padding: 0;
As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.
<!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">
#navcontainer {
width: 775px;
margin: 0 auto;
background-image: url(navUp.gif);
background-repeat: repeat-y;
overflow: hidden;
#navcontainer ul {
width: 547px;
padding: 0;
margin: 0 auto;
background-image: url(navUp.gif);
#navcontainer ul li {
width: 90px;
float: left;
margin: 0;
padding: 0;
list-style: none;
#navcontainer ul li a {
background-image: url(navUp.gif);
background-repeat:no-repeat;
color: #fff;
text-decoration: none;
font-weight:bold;
width: 90px;
display: block;
text-align: center;
float: left;
border-right: 1px solid #069;
padding: 5px 0;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
</style>
</head>
<body>
<div id="navcontainer">
    <ul>
    <li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
    <li><a href="Contact_Us.htm">Contact</a></li>
    <li><a href="Profiles.htm">Profiles</a></li>
    <li><a href="Catalogue.htm">Songs</a></li>
     <li><a href="BBL.htm">BBL Label</a></li>
    <li><a href="Jazz_links.htm">Links</a></li>
    </ul>
</div>
</body>
</html>

CSS rollover Problem

I am new to CSS navigation rollover. Below is a link to a
site that I am working on. My navigation is working ok exept once
you view a page then the rollover is no loger working. It then uses
the "visited" css attributes. Is there a way to make the "over"
attribute still work when a user rolls over the text links
http://screaminlizard.com/beta/street.asp
My code
a:link {
color: #000000;
font-style: normal;
text-decoration: none;
a:hover {
color: #FF0000;
text-decoration: underline;
a:visited {
color: #990000;
font-style: normal;
text-decoration: none;

You never closed your Bumpers And Accessories anchor tag. You
have this:
<a href="index.asp">Bumpers &
Accessories<br>
No closing anchor tag!
Change it to this:
<a href="index.asp">Bumpers &
Accessories</a><br>
Alec Fehl, MCSE, A+, ACE, ACI
Adobe Community Expert
AUTHOR:
Microsoft Office 2007 PowerPoint: Comprehensive Course
(Labyrinth
Publications)
Welcome to Web Design and HTML (Labyrinth Publications)
CO-AUTHOR:
Microsoft Office 2007: Essentials (Labyrinth Publications)
Computer Concepts and Vista (Labyrinth Publications)
Mike Meyers' A+ Guide to Managing and Troubleshooting PCs
(McGraw-Hill)
Internet Systems and Applications (EMC Paradigm)

PHP Code, Variables & CSS. Would this work?

Hello,
I am new to PHP, this is my first script I have made without any help, I am using xammp to test my site, but the basics of the code is this. I am adding an include code into the navigation menu and in the CSS I have defined certain rules for the nav. Now in the code when you click on one of the links, it will change the variable to a corresponding number. The Code is pretty much self explanatory.
Menu.php:
<?
$active = 1;
?>
    <ul>
      <li><a href="#" onclick="<? $active = 1; ?>" class="<? if ($active = 1){?>#navigation ul li a.active<? } ?>">Portfolio</a></li>
      <li><a href="#" onclick="<? $active = 2; ?>" class="<? if ($active = 2){?>#navigation ul li a.active<? } ?>">Web Examples</a></li>
      <li><a href="#" onclick="<? $active = 3; ?>" class="<? if ($active = 3){?>#navigation ul li a.active<? } ?>">Contact Me</a></li>
    </ul>
Menu CSS:
#navigation { text-align: right; font-weight: bold; text-transform: uppercase; font-size:14px; line-height:18px; height:70px;}
#navigation ul{ list-style-type: none; }
#navigation ul li{ display:inline; padding-left:15px; }
#navigation ul li a{ text-decoration: none; color:#fff; }
#navigation ul li a:hover,
#navigation ul li a.active { color:#ffe6a5; }
Now what I want to happen is when you click on one of the links, it will change to active, changing the color of the text to tell the visitor that, that link is active. Now normally I would do it though CSS, changing the texts rule to the active, but in order to be able to change buttons without having to do it though all the pages and also because I want to start using PHP more.
The Include works, as you can see below, but the code above does not work, because the home button should be a light yellow color.

I can't comment on your PHP, but you can achieve your desired result quite simply using this demo from Nancy.
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

CSS box - hidden\show & overlapping

Hi!
We have 2 zones.
In one zone we have a box which contains a CSS navigation
list/buttons.
In the second zone we would like, when the mouse is over one
of the list item/button, to be able to show a specific box (with
identical sizes and position's definitions).
The required mechanism, from the user point of view, is
expected to be like the "show layers (visible/hidden property) on
mouse over behavior".
How we can stack more than one box, one on the top of each
other, in a way that we see all the time only one of the boxes
(overlapping), and that without disturbing the general layout of
the page.
I have tried to use the "visibility properties
(visible/hidden)" on two boxes with identical "box properties"
definitions and different visibility properties (visible/hidden).
The boxes were not stacked each on the top of the other, and the
second box have taken its natural "float place.
For example we have a container box with 3 boxes with the
following "box properties":
#ButtonFirstDetails {
height: 233px;
width: 516px;
margin-top: 2px;
margin-right: auto;
margin-bottom: 2px;
margin-left: 0px;float: left;
#FreeZone01 {
height: 153px;
width: 256px;
margin-top: 2px;
margin-right: auto;
margin-left: 0px;
float: left;
#FreeZone02 {
height: 153px;
width: 256px;
margin-top: 2px;
margin-right: auto;
margin-left: 4px;
float: left;
TIA
Nanu

Thanks
Nanu
>>> Murray
*ACE*<[email protected]> 23/02/2007 19:41:33
>>>
Then stick with the behaviors.
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
==================
"Nanu Kalmanovitz" <[email protected]> wrote in
message
news:[email protected]...
> I'm a beginner, not understanding yet, completely, how
buttons change
> their fonts & colors when the mouse move over them.
>
> TIA
>
> Nanu
>
>>>> Murray
*ACE*<[email protected]> 22/02/2007 22:30:54
>>>
> It is possible to use CSS for this, but it's tricky.
What is your comfort
> level with CSS?
>
> --
> 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
> ==================
>
>
> "Nanu Kalmanovitz" <[email protected]> wrote
in message
> news:[email protected]...
>> Thanks,
>>
>> Is the DW "bahaviours" function , the only way to
switch between the
>> hidden\show boxes?
>> Is it possible to do the switch using definitions in
CSS same way as the
>> Hover made on bottons?
>>
>> TIA
>>
>> Nanu
>>
>>>>> Murray
*ACE*<[email protected]> 22/02/2007 17:45:39
>>>
>> Use absolute positioning on the stacked elements.
>>
>> --
>> 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
>> ==================
>>
>>
>> "Nanu Kalmanovitz" <[email protected]>
wrote in message
>> news:[email protected]...
>>> Hi!
>>>
>>> We have 2 zones.
>>> In one zone we have a box which contains a CSS
navigation list/buttons.
>>> In the second zone we would like, when the mouse
is over one of the list
>>> item/button, to be able to show a specific box
(with identical sizes and
>>> position's definitions).
>>> The required mechanism, from the user point of
view, is expected to be
>>> like the "show layers (visible/hidden property)
on mouse over behavior".
>>>
>>>
>>> How we can stack more than one box, one on the
top of each other, in a
>>> way
>>> that we see all the time only one of the boxes
(overlapping), and that
>>> without disturbing the general layout of the
page.
>>> I have tried to use the "visibility properties
(visible/hidden)" on two
>>> boxes with identical "box properties"
definitions and different
>>> visibility
>>> properties (visible/hidden). The boxes were not
stacked each on the top
>>> of
>>> the other, and the second box have taken its
natural "float place.
>>> For example we have a container box with 3 boxes
with the following "box
>>> properties":
>>>
>>> #ButtonFirstDetails {
>>> height: 233px;
>>> width: 516px;
>>> margin-top: 2px;
>>> margin-right: auto;
>>> margin-bottom: 2px;
>>> margin-left: 0px;float: left;
>>> }
>>> #FreeZone01 {
>>> height: 153px;
>>> width: 256px;
>>> margin-top: 2px;
>>> margin-right: auto;
>>> margin-left: 0px;
>>> float: left;
>>> }
>>> #FreeZone02 {
>>> height: 153px;
>>> width: 256px;
>>> margin-top: 2px;
>>> margin-right: auto;
>>> margin-left: 4px;
>>> float: left;
>>> }
>>>
>>> TIA
>>>
>>> Nanu
>>
>>
>>
>>
>>
>
>
>
>
>

Imported Fireworks Nav Bar Animation Looping

Hi
I have imported a navigation bar I made in fireworks into dreamweaver and when I preview in browser it keeps looping. In fireworks I added a rollover effect so that when you rollover each bit of text, e.g. home, contact, games it goes bold, and when previewing it loops so they all keep going bold without my control. In Fireworks I made it using slices and several states, and so just when I rollover state one it changes to state 2 for example. Very simple, but it keeps looping, how can I stop this? Thanks. I have attached the png file for fireworks if you need to take a look.

Hi
You do not require the fireworks/javascript to achieve the effect you require for your links.
This effect can be made using simple css a:link, (visited, hover, active) statements, I would also recommend using css to style your page and not tables/image slices .
For the css links, see - http://www.w3schools.com/css/css_link.asp and http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml.
Moving from tables based design to css based - http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html.
PZ

How to create effects like this ...

Dear webmates :
I'd like to know how to create rollover menus like this :
http://perfeccionate.urp.edu.pe/server/rumbo/index.php/comunidad/programa-tv
As you can see it shows you more than one option and big rollover menus... what tools ca I use to achieve this ? thanks in advance...

Hi Sw Jiten,
Check this cool Dreamweaver extension from DMXzone - Universal CSS Navigation Menu
Regards,
M.Zografski.
DMXzone.com

Matrix CSS navigation

Similar Messages

Maybe you are looking for