Ease in CSS fade rollovers

Hi all,
Trying to create the ease-in effect for the nav buttons, but to no avail.
I've pasted in the code, but doesn't seem to target the :hover.
http://makingdesign.com.au/index-new.html
What am I doing wrong?
Michael

Nancy,
Thank you for your reply.
I am using this example you gave me for my menu list:
Multi-Colored List Menu ~
http://alt-web.com/DEMOS/Multi-colored-list-menu.shtml
It is looking good except for a couple of things.
I can not figure out how to change the box size of the Vertical List Menu.
Here is my work for the vertical menu. These boxes should be 260px wide x 54 px high.
On the horizontal list, is there a way to make the active area larger? (like hotspots)? When you cursor over them they do not change unless you move the cursor to the top of the link name. Also, in the browser, when i click any link, they all change to the "visited" state. That work is here.
I am learning this by reverse designing the code. I took your code and changed a bit at a time. Since I am using both vertical and horizontal menus on the same page, I assume that I have to change the name of one of the lists from #rollover to #somethingElse?
Thank you,
Matt

Similar Messages

  • Multiple CSS image rollovers on a page

    Hi there,
    So, I have miraculously managed to create my first ever CSS image rollover navigation button on my webpage. This page is an online art gallery so there will be several small image rollover buttons linking to different pages of art.
    My question is now that I've created one CSS rollover, do I have to create a brand new one for each additional button or is there  a way to change the image and name of the existing button?
    Here is my CSS and HTML for the existing image rollover:
    /** Declaration for the a.singleRollover selector **/
    a.singleRollover {
        display: block;
        width: 90px;
        height: 90px;
        overflow: hidden;
        text-indent: 0px;
        font-size: 0px;
        line-height: 0px;
        background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
    /** Declaration for the additional states of the a.singleRollover selector **/
    a:hover.singleRollover {
        background-position: 0 -90px;
        background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
    <div id="smallBox01a"><a class="singleRollover" title="Tobi rollover" href="Images/CSS Rollover/ButtonTOBI.jpg"></a></div>
    The problem is that the background image is already set as ButtonTOBI. Is there a way to specify the image in the HTML each time individually rather than in the main a.singleRollover item? It seems very repetitive to have to go in and create lots of individual CSS rollover buttons.
    Thanks in advance for any help.

    Go here -
    http://www.alistapart.com/articles/sprites
    http://www.tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.a sp
    Read about how to use a single image for all of your menu 'rollovers'.  It works great!

  • CSS disjointed rollovers with animation?

    im redesigning my site and for some reason my rollovers arent working. the top two thumbs are active.. nike and coke:
    http://www.toddheymandirector.com/SPOTS/index_2010.html
    would it make sense to try this in CSS? and can CSS do disjointed rollovers with animated gifs?

    They work for me, but you are not doing yourself a favor by letting the QT file auto-play. It will block UI interavctivity in many cases. As for you otehr question - an image is an image. CSS doesn't care whether the format in itself is animated or static.
    Mylenium

  • CSS Disjointed Text Rollovers help?

    Hi All
    I am new to the site and have a question to ask,
    I have been playing around with the demo created by Nancy O, for css disjointed text rollover. What i would like to find out is, once i have created the rollover and i hover over it, the text in the window is all active. is there a way to "de-activate that text? so once i have created it all, have the "read more" on my page, click on it and the rollover opens. i have say for example three paragraphs, but my cursor shows that the whole window is active. i want to change that so that there might only be a little image to say close and that the cursor goes back to normal within that window.
    It sounds simple if i think about it but cannot get it to work.
    This is the demo i have been paying around with. http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml#
    any help would be greatly appreciated.
    please let me know if i need to give any more info.
    Thank
    Craig S

    Instead of CSS disjointed rollovers, sounds like you need show/hide layers
    http://alt-web.com/DEMOS/Show-Hide-Layers.html
    Or perhaps an accordion panel like this extension from Project Seven
    http://www.projectseven.com/products/tools/accordion/index.htm
    Nancy O.

  • New CSS Rollovers not align same as Image Rollovers - Dreamweaver CC

    I have put together a test page replacing Javascript Image Rollovers for CSS Image Rollovers and the alignment of items in the 3 columns (DIVS) is not the same as when old style rollovers. I cannot seem to find the error in my CSS and would like another pair of eyes to see if I'm missing something. Here is the screenshot of new page from Firefox, followed by the CSS. Images are loading into #sidebar1 (left column), #sidebar2 (right column) and #MainContent. #MainContent seems off centered and #sidebar outside margins are different. Any help would be greatly appreciated.
    CSS:
    <style type="text/css">
    <!--
    body {
        font: 81.3% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
    .oneColFixCtrHdr #container {
        width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
        background: #FFFFFF;
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        border: 1px solid #000000;
        text-align: left; /* this overrides the text-align: center on the body element. */
    .oneColFixCtrHdr #header {
        background: #DDDDDD;
        padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .oneColFixCtrHdr #header h1 {
        margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .oneColFixCtrHdr #mainContent {
        background: #FFFFFF;
        width: 200px;
        margin-top: 0;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 0px;
    .oneColFixCtrHdr #sidebar1, #sidebar2, #mainContent {
        text-align: center;
        width: 200px;
        padding-top: 0px;
        padding-right: 30px;
        padding-bottom: 0;
        padding-left: 30px;
    .oneColFixCtrHdr #footer {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        background:#CFAF86;
        clear:both
    .teammembers #nav #teammembers a {
        color: #FFF;
    .oneColFixCtrHdr #memberdues {
        padding-right: 315px;
        padding-left: 315px;
    .oneColFixCtrHdr #footer p {
        margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
        padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        text-align: center;
        letter-spacing: 4px;
    #container #nav {
        line-height: 2em;
        font-weight: normal;
        background-color: #CFAF86;
        text-align: center;
        margin: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 10px;
        list-style-type: none;
        padding-left: 10px;
    #container #nav li {
        font-weight: bold;
        display: inline;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
    #container #nav li a {
        color: #000;
        text-decoration: none;
    #container #nav li a:hover {
        color: #FFF;
        text-decoration: none;
    .renegadestext {
        font-style: italic;
        font-weight: bold;
        color: #000;
    .oneColFixCtrHdr #AboveMainContent {
        padding-top: 0px;
        padding-right: 20px;
        padding-bottom: 0px;
        padding-left: 20px;
    .oneColFixCtrHdr #AboveMainContent h2 {
        text-align: center;
    .oneColFixCtrHdr #sidebar1 {
        background-color: #FFF;
        float: left;
        width: 200px;
    .oneColFixCtrHdr #sidebar2 {
        background-color: #FFF;
        float: right;
        width: 200px;
    #thomasbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/thomas_barber.gif);
         background-repeat: no-repeat 0 0;
    #thomasbarber:hover {
        background-position: 0px -50px;
    #thomasbarber span {
        position: absolute;
        top: -999em;
    #janetbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/janet_barber.gif);
         background-repeat: no-repeat 0 0;
    #janetbarber:hover {
        background-position: 0px -50px;
    #janetbarber span {
        position: absolute;
        top: -999em;
    #karenallen {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/karen_allen.gif);
         background-repeat: no-repeat 0 0;
    #karenallen:hover {
        background-position: 0px -50px;
    #karenallen span {
        position: absolute;
        top: -999em;
    #davidboudreaux {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/david_boudreaux.gif);
         background-repeat: no-repeat 0 0;
    #davidboudreaux:hover {
        background-position: 0px -50px;
    #davidboudreaux span {
        position: absolute;
        top: -999em;
    #melbahanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/melba_hanna.gif);
         background-repeat: no-repeat 0 0;
    #melbahanna:hover {
        background-position: 0px -50px;
    #melbahanna span {
        position: absolute;
        top: -999em;
    #kentunderwood {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/kent_underwood.gif);
         background-repeat: no-repeat 0 0;
    #kentunderwood:hover {
        background-position: 0px -50px;
    #kentunderwood span {
        position: absolute;
        top: -999em;
    #shawntrainor {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/shawn_trainor.gif);
         background-repeat: no-repeat 0 0;
    #shawntrainor:hover {
        background-position: 0px -50px;
    #shawntrainor span {
        position: absolute;
        top: -999em;
    #eddieokonski {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/eddie_okonski.gif);
         background-repeat: no-repeat 0 0;
    #eddieokonski:hover {
        background-position: 0px -50px;
    #eddieokonski span {
        position: absolute;
        top: -999em;
    #scotthartman {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/scott_hartman.gif);
         background-repeat: no-repeat 0 0;
    #scotthartman:hover {
        background-position: 0px -50px;
    #scotthartman span {
        position: absolute;
        top: -999em;
    #titoescobar {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/tito_escobar.gif);
         background-repeat: no-repeat 0 0;
    #titoescobar:hover {
        background-position: 0px -50px;
    #titoescobar span {
        position: absolute;
        top: -999em;
    #debbiehanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/debbie_hanna.gif);
         background-repeat: no-repeat 0 0;
    #debbiehanna:hover {
        background-position: 0px -50px;
    #debbiehanna span {
        position: absolute;
        top: -999em;
    #robertbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/robert_barber.gif);
         background-repeat: no-repeat 0 0;
    #robertbarber:hover {
        background-position: 0px -50px;
    #robertbarber span {
        position: absolute;
        top: -999em;
    #gregallen {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/greg_allen.gif);
         background-repeat: no-repeat 0 0;
    #gregallen:hover {
        background-position: 0px -50px;
    #gregallen span {
        position: absolute;
        top: -999em;
    #johnmcclung {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/john_mcclung.gif);
         background-repeat: no-repeat 0 0;
    #johnmcclung:hover {
        background-position: 0px -50px;
    #johnmcclung span {
        position: absolute;
        top: -999em;
    #miketisdel {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/mike_tisdel.gif);
         background-repeat: no-repeat 0 0;
    #miketisdel:hover {
        background-position: 0px -50px;
    #miketisdel span {
        position: absolute;
        top: -999em;
    #butchhanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/butch_hanna.gif);
         background-repeat: no-repeat 0 0;
    #butchhanna:hover {
        background-position: 0px -50px;
    #butchhanna span {
        position: absolute;
        top: -999em;
    #kimberlyshepherd {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/kimberly_shepherd.gif);
         background-repeat: no-repeat 0 0;
    #kimberlyshepherd:hover {
        background-position: 0px -50px;
    #kimberlyshepherd span {
        position: absolute;
        top: -999em;
    #katrinabartkowiak {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/katrina_bartkowiak.gif);
         background-repeat: no-repeat 0 0;
    #katrinabartkowiak:hover {
        background-position: 0px -50px;
    #katrinabartkowiak span {
        position: absolute;
        top: -999em;
    #michelehartman {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/michele_hartman.gif);
         background-repeat: no-repeat 0 0;
    #michelehartman:hover {
        background-position: 0px -50px;
    #michelehartman span {
        position: absolute;
        top: -999em;
    #aliciaallen {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/alicia_allen.gif);
         background-repeat: no-repeat 0 0;
    #aliciaallen:hover {
        background-position: 0px -50px;
    #aliciaallen span {
        position: absolute;
        top: -999em;
    #melissalockwood {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/melissa_lockwood.gif);
         background-repeat: no-repeat 0 0;
    #melissalockwood:hover {
        background-position: 0px -50px;
    #melissalockwood span {
        position: absolute;
        top: -999em;
    #rustyhanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/rusty_hanna.gif);
         background-repeat: no-repeat 0 0;
    #rustyhanna:hover {
        background-position: 0px -50px;
    #rustyhanna span {
        position: absolute;
        top: -999em;
    #karenbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/karen_barber.gif);
         background-repeat: no-repeat 0 0;
    #karenbarber:hover {
        background-position: 0px -50px;
    #karenbarber span {
        position: absolute;
        top: -999em;
    #chrishillman {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/chris_hillman.gif);
         background-repeat: no-repeat 0 0;
    #chrishillman:hover {
        background-position: 0px -50px;
    #chrishillman span {
        position: absolute;
        top: -999em;
    #frankmarshall {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/frank_marshall.gif);
         background-repeat: no-repeat 0 0;
    #frankmarshall:hover {
        background-position: 0px -50px;
    #frankmarshall span {
        position: absolute;
        top: -999em;
    #dorisboudreaux {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/doris_boudreaux.gif);
         background-repeat: no-repeat 0 0;
    #dorisboudreaux:hover {
        background-position: 0px -50px;
    #dorisboudreaux span {
        position: absolute;
        top: -999em;
    #johnburkett {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/john_burkett.gif);
         background-repeat: no-repeat 0 0;
    #johnburkett:hover {
        background-position: 0px -50px;
    #johnburkett span {
        position: absolute;
        top: -999em;
    #lisaburkett {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/lisa_burkett.gif);
         background-repeat: no-repeat 0 0;
    #lisaburkett:hover {
        background-position: 0px -50px;
    #lisaburkett span {
        position: absolute;
        top: -999em;
    #andreagordon {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/andrea_gordon.gif);
         background-repeat: no-repeat 0 0;
    #andreagordon:hover {
        background-position: 0px -50px;
    #andreagordon span {
        position: absolute;
        top: -999em;
    #jeffwilliams {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/jeff_williams.gif);
         background-repeat: no-repeat 0 0;
    #jeffwilliams:hover {
        background-position: 0px -50px;
    #jeffwilliams span {
        position: absolute;
        top: -999em;
    #taylordavis {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/taylor_davis.gif);
         background-repeat: no-repeat 0 0;
    #taylordavis:hover {
        background-position: 0px -50px;
    #taylordavis span {
        position: absolute;
        top: -999em;
    #leearnold {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/lee_arnold.gif);
         background-repeat: no-repeat 0 0;
    #leearnold:hover {
        background-position: 0px -50px;
    #leearnold span {
        position: absolute;
        top: -999em;
    -->
    </style>

    The text isn't centered within the containers for two reasons.
    1. Their display is set to block and
    2. There is nothing telling them to be centered
    One way to fix it would be to change the <a> tags to inline-block and add text-align:center to their parents and everything should center nicely within the columns.

  • Dreamweaver CS6-  jquery and jquery cycle to have 5 images slide (as a fade) in a banner code failure- help?

    Dreamweaver CS6- I am trying to use jquery and jquery cycle to have 5 images slide (as a fade) in a banner. I thought I got the code right but it stacked the images. I suspect I have the incorrect code for the position or I haven't properly added cycle.
    my head code:
    <title>slider</title>
    <script type="text/javascript" src="JS/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="JS/jquery.cycle2.min.js"></script>
    <script type="text/javascript">
    $('#slider').cycle({
    </script>
    <style type="text/CSS">
    #slider {margin:auto;}
    </style>
    My div code:
    <div id="slider">
      <p> 
        <img src="Leather web page/DSC_0531_4925.JPG"/>
        <img src="Leather web page/DSC_0035_edited-1.JPG"/>
        <img src="Leather web page/DSC_1593_edited-1.jpg"/>
        <img src="Leather web page/DSC_1595_edited-1.jpg"/>
        <img src="Leather web page/DSC_1821.jpg"/>
        </div>
    Any help would be greatly appreciated.

    1. You can use a constructor to change the defaults. The default values can be seen in jquery.cycle2.js starting at line 659 as per the following. As you can see at the bottom, the code automatically runs the slideshow(s)
    // @see: http://jquery.malsup.com/cycle2/api
    $.fn.cycle.defaults = {
        allowWrap:        true,
        autoSelector:     '.cycle-slideshow[data-cycle-auto-init!=false]',
        delay:            0,
        easing:           null,
        fx:              'fade',
        hideNonActive:    true,
        loop:             0,
        manualFx:         undefined,
        manualSpeed:      undefined,
        manualTrump:      true,
        maxZ:             100,
        pauseOnHover:     false,
        reverse:          false,
        slideActiveClass: 'cycle-slide-active',
        slideClass:       'cycle-slide',
        slideCss:         { position: 'absolute', top: 0, left: 0 },
        slides:          '> img',
        speed:            500,
        startingSlide:    0,
        sync:             true,
        timeout:          4000,
        updateView:       0
    // automatically find and run slideshows
    $(document).ready(function() {
        $( $.fn.cycle.defaults.autoSelector ).cycle();
    2. To center the slideshow, merely center the container as in
    div.cycle-slideshow {
        width: 1000px;
        margin: auto;

  • 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>

  • Default image in CSS disjointed rollover

    I have 5 pics that come up as CSS disjointed rollovers with 5 links. How can I make the first one the default, that shows up when the page loads, before the user hovers over one of the links? I tried placing the first pic on the page, just like you would any graphic, but I can't get the rollover pics to line up with it in Safari AND FF. When I get it aligned in one browser, it's slightly off in the other one. I've tried positioning by pixels, percentage and ems with no luck. Shouldn't there be something in the CSS that makes one of the pics the default? Thanks.
    /** rollover change color **/
    #rollover {
        padding: 0 1px 1px;
        margin-left: 0;
        font: bold 10px Verdana, sans-serif;
        text-align: center;
    #rollover li {
        list-style: none;
        margin: 0;
        display: inline;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        text-align: left;
    #rollover li a {
        text-decoration: none;
        background-color: #FFFFFF;
    #rollover li a:link {
        color: #448;
        text-align: center;
    #rollover li a:visited {
        color: #667;
        text-align: center;
    #rollover li a:hover, #rollover li a:active, #rollover li a:focus{
        color: #FFF;
        visibility: visible;
        text-align: center;
        background-color: #000000;
    /**disjointed image rules**/
    #rollover li a span {
        visibility:hidden;
        display:block;
        position:absolute;
        left:27.8%; /**adjust image position in % or px as needed**/
        top:0%; /**adjust image position in % or px as needed**/
        text-align: center;/*color:#666;*/
    #rollover li a:hover span, #rollover li a:active span, #rollover li a:focus span {
    visibility:visible;

    Sorry to be such a pain, but a new problem presents. The nav boxes are cut off at the top in IE 7, or, rather, IE 8 in compatibility mode.
    http://www.paulcbuff.com/pcb2009/rollemover.html
    No significant errors when I validated the CSS and HTML, except for  _height:200px, which I tried commenting out to no avail.
    Thanks!
    #Relative {position: relative; margin:0 auto 14px auto; min-height:200px; _height:200px /**for IE6 Only**/ }
    /**menu**/
    #navlist {
        padding: 0 1px 1px;
        margin-left:0;
        font-family: Verdana, sans-serif;
        font-size: 10px;
        font-weight: bold;
        color: #FFFFFF;
    #navlist li {
    list-style: none;
    margin: 0;
    display: inline;}
    #navlist li a {
        padding: 0.5em 0.5em 0.5em 0.75em;
        text-decoration: none;
        background-color: #ffcc33;
        border-width: 1px;
        border-style: solid;
        border-top-color: #000000;
        border-left-color: #AAB;
        color: #FFFFFF;
    #navlist li a:link {
        color: #448;
        border: 1px solid #000000;
    #navlist li a:visited {
        color: #ffcc33;
    #navlist li a:hover, #navlist li a:active, #navlist li a:focus{
        /**border-color: #FF9900;**/
        color: #FFF;
        visibility: visible;
        background-color: #6633cc;
        border: 1px solid #000000;
    /**Default Image container**/
    #defaultImage {
    visibility:visible;
    display:block;
    position:absolute;
    left:110px; /**adjust position in pixels or % **/
    top:50px; /**adjust position in pixel or %**/
    /**disjointed image rules**/
    #navlist li a span {
    visibility:hidden;
    display:block;
    position:absolute;
    left:110px; /**position same as default image layer above**/
    top:50px; /**position same as default image layer above**/
    /*color:#666;*/ }
    #navlist li a:hover span, #navlist li a:active span, #navlist li a:focus span {
    visibility:visible;}
    a img {border:none}
    /**end menu**/

  • Slicing images/Css

    Hello,
    I am working on a site with a number of large-ish photos (
    http://www.rosieroo.com/design_one_home.html)
    I was on this forum awhile back asking advice on slicing and
    positioning with CSS and since then I have been working through
    suggested tutorials. but I am still confused.
    Most of the tutorials I have come acroos seem to be around
    slicing/CSS image rollovers. I simply want the images to load
    faster no need for roll over functionality.
    I have also come across some sites saying slicing is a thing
    of the past and no longer needed.
    Can anyone offer advice on:
    1) Does slicing increase the speed a page is loaded or does
    it jus appear to load faster?
    2) With regards to my link above would slicing help this page
    load faster?
    3) If slicing is reccomended would it work to simply:
    slice images > export images only
    >Put the images piece by piece into a div (this is what I
    have done with the large images so i am assuming it would work with
    mutiple smaller images? I have not used any positoning other than
    inserting each piece -is that bad form?)
    4) or would it be better to position the images with CSS? If
    so can anyone reccomend simple tutorial that would help me achieve
    a fast loading CSS positioned page
    thank you,
    Shontelle

    Ok I understand now and thanks for the comments.
    Cheers
    Pablo
    An Eye of Menorca
    www.dellimages.com
    "Michael Hager" <[email protected]> wrote in message
    news:[email protected]...
    > Guess you missed my point and after re-reading I see I
    didn't really
    > communicate it. My comment was only a response to your
    comment that you
    > couldn't imagine creating a site without image slicing.
    I can't imagine
    > creating a site that needs to use image slicing.
    >
    >
    >
    > I just take the approach of design simplicity. I don't
    start with a big
    > image as the basis for my site. It's just my style.
    Maybe not yours.
    > Sites don't need to be designed in such a way that they
    require image
    > slicing, but they can be and the Zen garden page is a
    good example. I
    > don't particularly care for it so I simply would avoid
    that kind of
    > design.
    >
    >
    >
    > It's not a matter of what is correct. It's a matter of
    preference. You
    > like to slice, I generally don't.
    >
    >
    >
    > I really do like your web site by the way and I'm sure I
    could not
    > recreate that without using sliced images. I probably
    would have simply
    > designed it in such a way that it didn't need them.
    >
    >
    >
    > By the way Pablo, your photographs are simply stunning.
    Makes me want to
    > visit Menorca. While we may not agree on web design, we
    do have a love of
    > photography in common.
    >
    >
    >
    > Michael Hager
    >
    > www,cmhager.com
    >
    >
    >
    > "Pablo" <[email protected]> wrote in
    message
    > news:[email protected]...
    >> How would you create this
    >>
    http://www.csszengarden.com/?cssfile=/202/202.css&page=0
    and thousands of
    >> other great looking sites without slicing? I'm
    baffled to say the least.
    >>
    >> --
    >> Cheers
    >>
    >> Pablo
    >> .................................
    >> An Eye of Menorca
    >> www.dellimages.com
    >> .................................
    >> "Pablo" <[email protected]> wrote in
    message
    >> news:[email protected]...
    >>> So how do you build your interface? Do you
    create loads of images? I
    >>> create one and slice it, what do you do? How
    would you create my site
    >>> without using slices? This image for example:
    >>>
    >>>
    http://www.dellimages.com/images/cssstuff/topheader.jpg
    >>>
    >>> Overflowing into the nav buttons
    >>>
    >>> Or the right side faux column?
    >>>
    >>> How?
    >>>
    >>>
    >>>
    >>> --
    >>> Cheers
    >>>
    >>> Pablo
    >>> .................................
    >>> An Eye of Menorca
    >>> www.dellimages.com
    >>> .................................
    >>> "Michael Hager" <[email protected]>
    wrote in message
    >>> news:[email protected]...
    >>>>> What a load of tosh that is, where have
    you seen this? I cannot for
    >>>>> the life of me think of a way of
    creating a web layout without having
    >>>>> to slice images, unless you create
    something that is nearly all text.
    >>>>
    >>>> Wow!... I can't think of a reason in the
    world to create a web page
    >>>> where you NEED to slice images.
    >>>>
    >>>>
    >>>
    >>>
    >>
    >>
    >
    >

  • CSS opacity statements seem to strip PNG opacity values. Any way to circumvent?

    I noticed it's apparently impossible to make a PNG (with
    various levels of
    opacity) semi-transparent via the usual channels, listed
    below :
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
    opacity: 0.75;
    -moz-opacity: 0.75;
    This trio of CSS statements did a pretty good job of covering
    all the usual
    bases when it came to making an image partially transparent.
    However, as
    mentioned above, it seems to force all of the pixels in the
    PNG to be
    exactly *that* transparent (in this case, 75%).
    So if your PNG is a gradient that goes from 100% opaque to 0%
    gracefully,
    applying the above statements to it will cause it to appear
    to become
    opaque, as the alpha information is stripped and replaced
    with "75%" across
    the board.
    My question is... is there a way for me to make a PNG image
    -- one which has
    various levels of opacity in it (like a gradient going from
    opaque to
    transparent) -- semi-transparent while retaining the
    proportionate
    individual alpha levels of each pixel?
    In other words, if I want the PNG to be 75% opaque when shown
    in a specific
    situation (like a button that will become 100% opaque on
    hover/mouseover),
    while the more opaque pixels of the PNG remain more opaque
    than the more
    transparent ones.
    Is this at all do-able?

    "Michael Fesser" <[email protected]> wrote in message
    news:[email protected]...
    > .oO(Mike)
    >
    >>Good idea, although that would double the number of
    images.
    >
    > Not necessarily. You can keep multiple images in the
    same file and use
    > different CSS background positions to show them. Ian
    already suggested
    > it, here are actual examples of that technique:
    >
    >
    http://wellstyled.com/css-nopreload-rollovers.html
    >
    http://www.alistapart.com/articles/sprites/
    >
    > Micha
    Granted, but the amount of data being transfered is the same
    as if I'd
    doubled the number of images.
    All I'm looking to do, really, is have a PNG with a slight
    shadow effect
    (thus, various levels of opacity in the same image) display
    in a 90% opaque
    natural state, then switch to 100% opaque on mouseover.
    For example :
    a {
    filter:alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    a:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
    90% is just subtle enough to not make the image pale, but
    stil give you a
    "light up" effect on mouseover.
    In Firefox, no problem. CSS's 90% opacity attribute will make
    each pixel in
    the PNG *proportionately* more transparent (by 10%). In other
    words, opaque
    pixels become a bit transparent, while already-transparent
    pixels become
    even MORE transparent. So to the viewer, the entire image
    simply became a
    bit more transparent.
    But in IE -- even IE7 -- the behavior is completely
    different. IE will set
    ALL the pixels in the PNG (regardless of how transparent or
    opaque they are)
    to the value set by the attribute. In this case, all pixels
    become exactly
    90% opaque, equally, across the board, as if the PNG was a
    flat opaque
    document to begin with (which it wasn't... it had various
    levels of opacity
    within the same image).
    This means that you can't use PNG to do a traditional a:hover
    opacity
    effect, unless the PNG had no transparency in it to begin
    with (in which
    case you'd probably use JPG instead).
    I've scoured the web for a possible hack around this
    limitation, but not
    only did I not find one, I didn't find a single mention of
    this behavior in
    *any* of the PNG transparency primers, tutorials and blogs
    that I've found.
    If I could at least find someone who so much as NOTICED this
    problem before,
    I'd feel a little less crazy. :-)

  • CSS     Javascipt or a:hover???????

    Hello,
    I am reading and hearing conflicting things on what to use
    for rollovers. I am interested in what people are using, either
    Javascript or a: hover or both? And if you write the reason you are
    using it that would be very helpful.
    Thanks, JIm

    I use CSS for rollovers. Why?
    * it doesn't requre javascript, so there is no additional
    coding added to
    the head of the page
    * it doesn't require javascript, so it works even if
    javascript is disabled
    * it allows me to keep my menu options in plain HTML text,
    and yet still use
    graphics for the buttons if I want (as background images)
    * if I am using a single graphic for all of the buttons, then
    I don't have
    to fiddle with an image preload
    * it removes lots of functional code from the page (all of
    the mouseover
    calls), and makes for a slimmer page, that is easier to
    understand when
    looking at the code
    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
    ==================
    "Wonderwendy" <[email protected]> wrote in
    message
    news:eu0i0r$qe0$[email protected]..
    > Hello,
    > I am reading and hearing conflicting things on what to
    use for rollovers.
    > I am
    > interested in what people are using, either Javascript
    or a: hover or
    > both? And
    > if you write the reason you are using it that would be
    very helpful.
    > Thanks, JIm
    >

  • How to make thumbnails enlarge when using grid navigation effects with jquery

    I have used a grid navigation effect with jquery to display several thumbnail images but i would like the images to enlarge to a bigger size when they are clicked on, i dont want another window to open but for the image to appear on the same page like lightbox, except i dont need a gallery, just the enlarging function. Please see the code below of my page and the link to see the demo of the grid nav with jquery that i used (effect- 'rows move', example 9).
    http://tympanus.net/codrops/2011/06/09/grid-navigation-effects/comment-page-2/#comments
    <!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>My gallery</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <link href="gridNavigation.css" rel="stylesheet" type="text/css" />
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
              background-color: #000000;
    a:link {
              text-decoration: none;
              color:#f1d379;
    a:visited {
              text-decoration: none;
              color: #f1d379;
    a:hover {
              text-decoration: none;
              color: #9d6f1b;
    a:active {
              text-decoration: none;
              color: #f1d379;
    </style>
            <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
                        <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
                        <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
                        <script type="text/javascript" src="scripts/jquery.gridnav.js"></script>
    <script type="text/javascript">
    $(function() {
                                            $('#tj_container').gridnav({
                                                      type          : {
                                                          rows    : 2,
                                                                mode                    : 'rows',                               // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
                                                                speed                    : 1000,                                        // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                                easing                    : 'easeInOutBack',          // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                                factor                    : 150,                                        // for seqfade, sequpdown, rows
                                                                reverse                    : ''                                        // for sequpdown
    </script>
    </head>
    <body>
    <div class="container" id="container">
    <div id="navbar_gallery" class="#navbar_gallery">
    <ul>
              <li><a  href="index.html">Homepage</a></li>
              <li><a  href="about_me.html" >About me</a></li>
              <li><a  href="gallery.html">Gallery</a></li>
              <li><a  href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div class="maintext" id="page_maintext">
      <p class="page_heading">My Gallery</p>
    </div>
    <div class="content example5">
    <div id="tj_container" class="tj_container">
                                                      <div class="tj_nav">
                                                                <span id="tj_prev" class="tj_prev">Previous</span>
                                                                <span id="tj_next" class="tj_next">Next</span>
                                                      </div>
              <div class="tj_wrapper">
                                                                <ul class="tj_gallery">
                                                                          <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
                                                                          <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
                                                                          <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
                                                                          <li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
                                                                          <li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
                                                                          <li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
                                                                          <li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
                                                                          <li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
                                                                          <li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
                                                                          <li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
                                                                          <li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
                                                                          <li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
                                                                          <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
                                                                          <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
                                                                          <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
                                                                          <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
                                                                          <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
                                                                          <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
                                                                          <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
                                                                          <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
                                                        </ul>
                </div>
      </div>
    </div>
    </body>
    </html>

    Ok so i've tried to do the above as suggested but i've obviously gone wrong somewhere as the fancybox function doesnt work, all that happens when clicking on thumbnail is the bigger version is opened in another browser window?
    <!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>My gallery</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <link href="gridNavigation.css" rel="stylesheet" type="text/css" />
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <style type="text/css">
    body {
              background-color: #000000;
    a:link {
              text-decoration: none;
              color:#f1d379;
    a:visited {
              text-decoration: none;
              color: #f1d379;
    a:hover {
              text-decoration: none;
              color: #9d6f1b;
    a:active {
              text-decoration: none;
              color: #f1d379;
    </style>
            <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
                        <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
                        <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
                        <script type="text/javascript" src="scripts/jquery.gridnav.js"></script>
            <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
            <script type="text/javascript">
    $(function() {
                                            $('#tj_container').gridnav({
                                                      type          : {
                                                          rows    : 2,
                                                                mode                    : 'rows',                               // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
                                                                speed                    : 1000,                                        // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                                easing                    : 'easeInOutBack',          // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                                factor                    : 150,                                        // for seqfade, sequpdown, rows
                                                                reverse                    : ''                                        // for sequpdown
    </script>
    <script type="text/javascript">
              $(document).ready(function() {
                        $(".fancybox").fancybox();
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
                  $("#single_1").fancybox({
              helpers: {
                  title : {
                      type : 'float'
        $("#single_2").fancybox({
                  openEffect          : 'elastic',
                  closeEffect          : 'elastic',
                  helpers : {
                            title : {
                                      type : 'inside'
        $("#single_3").fancybox({
                  openEffect : 'none',
                  closeEffect          : 'none',
                  helpers : {
                            title : {
                                      type : 'outside'
                   $("#single_4").fancybox({
                  helpers : {
                            title : {
                                      type : 'over'
    </script>
    </head>
    <body>
    <div class="container" id="container">
    <div id="navbar_gallery" class="#navbar_gallery">
    <ul>
              <li><a  href="index.html">Homepage</a></li>
              <li><a  href="about_me.html" >About me</a></li>
              <li><a  href="gallery.html">Gallery</a></li>
              <li><a  href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div class="maintext" id="page_maintext">
      <p class="page_heading">My Gallery</p>
    </div>
    <div class="content example5">
    <div id="tj_container" class="tj_container">
                                                      <div class="tj_nav">
                                                                <span id="tj_prev" class="tj_prev">Previous</span>
                                                                <span id="tj_next" class="tj_next">Next</span>
                                                      </div>
              <div class="tj_wrapper">
                                                                <ul class="tj_gallery">
                                                                          <li><a id="single_1" href="images/1-big.jpg" title="Row of beach huts"><img src="images/1.jpg" alt="Row of beach huts" /></a>
                                                                          <li><a id="single_2" href="images/2-big.jpg" title="Bees collecting pollen"><img src="images/2.jpg" alt="Bees collecting pollen" /></a></li>
                                                                          <li><a id="single_3" href="images/3-big.jpg" title="Frank"><img src="images/3.jpg" alt="Frank" /></a>
                                                                          <li><a id="single_4" href="images/4-big.jpg" title="New zealand beach"><img src="images/4.jpg" alt="Beach" /></a></li>
                                                                          <li><a id="single_5" href="images/5-big.jpg" title="Sonning river"><img src="images/5.jpg" alt="River" /></a></li>
                                                                          <li><a id="single_6" href="images/6-big.jpg" title="Steaming post in the morning sun"><img src="images/6.jpg" alt="steaming post" /></a></li>
                                                                          <li><a id="single_7" href="images/7-big.jpg" title="Portrait lady"><img src="images/7.jpg" alt="Portrait of lady" /></a></li>
                                                                          <li><a id="single_8" href="images/8-big.jpg" title="A great day at the coast"><img src="images/8.jpg" alt="Dog running along beach" /></a></li>
                                                                          <li><a id="single_9" href="images/9-big.jpg" title="Jam hut in new zealand"><img src="images/9.jpg" alt="Jam hut in new zealand" /></a></li>
                                                                          <li><a id="single_10" href="images/10-big.jpg" title="New zealand lake"><img src="images/10.jpg" alt="new zealand lake" /></a></li>
                                                                          <li><a id="single_11" href="images/11-big.jpg" title="Full speed ahead"><img src="images/11.jpg" alt="Dog running" /></a></li>
                                                                          <li><a id="single_12" href="images/12-big.jpg" title="Portsmouth docks"><img src="images/12.jpg" alt="Portsmouth docks" /></a></li>
                                                                          <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
                                                                          <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
                                                                          <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
                                                                          <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
                                                                          <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
                                                                          <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
                                                                          <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
                                                                          <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
                                                        </ul>
                </div>
      </div>
    </div>
    </body>
    </html>

  • Disjointed rollover and jQuery (CS4)

    Hi there,
    I made a simple page that starts with a gif animation, when the animation is done, a div fades up and quickly after that another div fades up, both using jQuery. This last div holds just an image. Now I have to change that image for a simple disjointed rollover (show/hide) so that on mouseover a second image is shown. I made that rollover in FireWorks CS4 and exported it as html and images. Then I inserted the html of the rollover in place and did a preview and ouch, everyting is broken. The first hidden div doens't fade up and the second div is shown from the start. How do I fix this?

    I made that rollover in FireWorks CS4 and exported it as html and images.
    It's a huge mistake to rely on graphics apps to generate HTML code and scripts for you.  For best results, use DW to build your HTML & rollover behaviors.  Use graphics apps for images only.
    everyting is broken. The first hidden div doens't fade up and the second div is shown from the start.
    Evidently, you have script conflicts or some other egregious code errors that are killing your page.
    Validate your code:
         CSS - http://jigsaw.w3.org/css-validator/
         HTML - http://validator.w3.org/
    How do I fix this?
    No way to tell without seeing your page.  To simplify things, you could try a CSS Rollover method rather than another JavaScript.
    Pure CSS Button Rollover (Sprite).
    http://alt-web.com/DEMOS/CSS-Button-Sprite.shtml
    Pure CSS Disjointed Rollovers
    http://alt-web.com/DEMOS/CSS-Disjointed-Rollover-1.shtml
    Pure CSS Disjointed Menu Rollovers
    http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

  • Problem with GRID NAVIGATION EFFECTS WITH JQUERY

    Hi All,
    Im having problem with this image gallery with navigation (please see link below to see running demo). I am trying to use the 'Row move' style but am having problems getting the function to work. I have the images and everything set up fine but the actual function/navigation isn't working. I have downloaded all the relevant files to my computer but nothing happens when i click on the arrows. Also all of the 20 images are showing instead of just the 2 rows of 3? There should be 2 rows of 3 iamages showing then when the arrows are clicked the next two rows are shown and so on.
    http://tympanus.net/codrops/2011/06/09/grid-navigation-effects/
    This is the code i have -
    <!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>My gallery</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <link href="gridNavigation.css" rel="stylesheet" type="text/css" />
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
              background-color: #000000;
    a:link {
              text-decoration: none;
              color:#f1d379;
    a:visited {
              text-decoration: none;
              color: #f1d379;
    a:hover {
              text-decoration: none;
              color: #9d6f1b;
    a:active {
              text-decoration: none;
              color: #f1d379;
    </style>
            <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
                        <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
                        <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
                        <script type="text/javascript" src="scripts/jquery.gridnav.js"></script>
    <script type="text/javascript">
                                  $(function() {
                                            $('#tj_container').gridnav({
                                                      type          : {
                                                          rows    : 2,
                                                                mode                    : 'rows',                               // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
                                                                speed                    : 1000,                                        // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                                easing                    : 'easeInOutBack',          // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                                factor                    : 150,                                        // for seqfade, sequpdown, rows
                                                                reverse                    : ''                                        // for sequpdown
                        </script>
    </head>
    <body>
    <div class="container" id="container">
    <div id="navbar" class="#navbar">
    <ul>
              <li><a  href="index.html">Homepage</a></li>
              <li><a  href="about_me.html" >About me</a></li>
              <li><a  href="gallery.html">Gallery</a></li>
              <li><a  href="contact.html">Contact</a></li>
      </ul>
    </div>
                                                      <div class="tj_nav">
                                                                <span id="tj_prev" class="tj_prev">Previous</span>
                                                                <span id="tj_next" class="tj_next">Next</span>
                                                      </div>
                                                      <div class="tj_wrapper">
                                                                <ul class="tj_gallery">
                                                                          <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
                                                                          <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
                                                                          <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
                                                                          <li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
                                                                          <li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
                                                                          <li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
                                                                          <li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
                                                                          <li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
                                                                          <li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
                                                                          <li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
                                                                          <li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
                                                                          <li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
                                                                          <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
                                                                          <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
                                                                          <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
                                                                          <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
                                                                          <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
                                                                          <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
                                                                          <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
                                                                          <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
                                                        </ul>
                </div>
    </div>
    </body>
    </html>

    Not sure what example you are using but it looks like you have missed out a couple of important <divs> in your code which surround the main <div>:
    If the case of example five:
    <div class="content example5'>
    <div id="tj_container" class="tj_container">
    MAIN STUFF GOES HERE
    </div>
    </div>
    I dont know if its my computer or not but I found the animation a bit flaky.

  • Making Text Box Shrink To Text

    I'm designing a form with a text box that can grow, which I've done successfully.  The problem is as the user is typing on the next line the previous line scrolls up and is hidden from view.  It expands when the user exits but I think it would be useful if they saw all that they were typing.
    I was playing with mouseEnter setting the height to say 2" which would be more than enough, then on mouseExit setting back to the default of .25" expand to fit is checked but  the text box maintains the .25" no matter how much text and the scroll bars appear.  I don't want to start shrinking font size.
    Thanks Mike

    Pure CSS Disjointed Rollovers (tooltips)
    http://alt-web.com/DEMOS/CSS-Disjointed-Image-Rollover.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

Maybe you are looking for