13 replies [Last post]
goodpasture
goodpasture's picture
Offline
newbie
Last seen: 14 years 27 weeks ago
Timezone: GMT-5
Joined: 2007-05-17
Posts: 9
Points: 0

I'm not sure what i need to say here but try to describe it as best as possible. I have a standard vertical css menu on left side using

    and a big picture on right side. All I want to do is have that picture change to a different picture as i roll over hte menu items on the left. Is this possible?

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 3 years 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    This is called a disjointed

    This is called a disjointed rollover, which will help you search for it.

    I think it likely stu nicols will have done a demo at cssplay.co.uk

    I know Paul O'Brien has a demo at pmob.co.uk

    Triumph (not verified)
    Anonymous's picture
    Guru

    ClevaTreva wrote:This is

    ClevaTreva wrote:
    This is called a disjointed rollover, which will help you search for it.

    I think it likely stu nicols will have done a demo at cssplay.co.uk

    I know Paul O'Brien has a demo at pmob.co.uk
    Don't forget Eric Meyer: http://meyerweb.com/eric/css/edge/popups/demo2.html

    Smile

    goodpasture
    goodpasture's picture
    Offline
    newbie
    Last seen: 14 years 27 weeks ago
    Timezone: GMT-5
    Joined: 2007-05-17
    Posts: 9
    Points: 0

    Thanks everybody. I think

    Thanks everybody. I think I'm getting it. Now my problem seems to be with the position:absolute - top -- left

    I can set these but now when I change my browser size and the image changes position.

    How can you solve this? I don't like fixed with websites.

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 4 days 17 hours ago
    Joined: 2004-06-30
    Posts: 9679
    Points: 815

    Er, show us all the code

    Er, show us all the code you've got so far?

    Verschwindende wrote:
    • CSS doesn't make pies

    goodpasture
    goodpasture's picture
    Offline
    newbie
    Last seen: 14 years 27 weeks ago
    Timezone: GMT-5
    Joined: 2007-05-17
    Posts: 9
    Points: 0

    thepineapplehead wrote:Er,

    thepineapplehead wrote:
    Er, show us all the code you've got so far?

    OK here is what i have currently.

    My HTML:

    AND MY CSS:

    a span
    {
    display: none;
    }

    a:hover span
    {
    display:block;
    position:absolute;
    top:236px;
    left:400px;
    padding: 5px;
    margin: 10px;
    z-index: 100;
    }

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 41 weeks 5 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    Congratulations! You are,

    Congratulations! You are, by actual count, the 632nd poster here this week who cannot see, or does not understand, the word "all". ALL your code, please.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 3 years 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    EdGive the OP a break.

    Ed

    Give the OP a break. They are new to the forum and he/she is looking for help, not sarcasm. Granted, were it an old hand, I would agree they should know better, but he/she is a noob.

    Goodpasture, we need a full page (at least one that has a head, docytpe, etc) that is trimmed back to show the poblem. Ideally, whenever images are involved, a live url is preferable, but make it a test page you can later remove.

    If you don't want bots finding it, just change it so we humans can copy it and edit it, e.g.

    www DOT mypage DOT com

    Code snippets are, my experience tells me, often misleading.

    The posts at the top of each forum are called stickies in that they stay there. There is some useful advice on how you can help us help you.

    CT

    goodpasture
    goodpasture's picture
    Offline
    newbie
    Last seen: 14 years 27 weeks ago
    Timezone: GMT-5
    Joined: 2007-05-17
    Posts: 9
    Points: 0

    Sorry ... Also I can't give

    Sorry ...

    Also I can't give you live anything with this project because it is our corporate intranet and it doesn't have outside access.

    The CSS:

    #wrapper
    {
    width:720px;
    margin:0 auto;
    text-align:left;
    }

    /* BEGINNING TOP MENU NAVIGATION CSS */
    a.start
    {
    display:block;
    width:110px;
    height:22px;
    background-image:url(images/menu_startbar.jpg);
    background-repeat:no-repeat;
    }

    p
    {
    font-family:Verdana;
    font-size:.8em;
    color:Gray;
    }

    a.home
    {
    display:block;
    width:110px;
    height:22px;
    background-image:url(images/menu_home.jpg);
    background-repeat:no-repeat;
    }
    a.home:hover
    {
    background-image:url(images/menu_home_rollover.jpg);
    }

    a.search
    {
    display:block;
    width:110px;
    height:22px;
    background-image:url(images/menu_search.jpg);
    background-repeat:no-repeat;
    }
    a.search:hover
    {
    background-image:url(images/menu_search_rollover.jpg);
    }

    a.website
    {
    display:block;
    width:110px;
    height:22px;
    background-image:url(images/menu_website.jpg);
    background-repeat:no-repeat;
    }
    a.website:hover
    {
    background-image:url(images/menu_website_rollover.jpg);
    }

    a.feedback
    {
    display:block;
    width:110px;
    height:22px;
    background-image:url(images/menu_feedback.jpg);
    background-repeat:no-repeat;
    }
    a.feedback:hover
    {
    background-image:url(images/menu_feedback_rollover.jpg);
    }

    a.help
    {
    display:block;
    width:110px;
    height:22px;
    background-image:url(images/menu_help.jpg);
    background-repeat:no-repeat;
    }
    a.help:hover
    {
    background-image:url(images/menu_help_rollover.jpg);
    }

    a.end
    {
    display:block;
    width:110px;
    height:22px;
    background-image:url(images/menu_endbar.jpg);
    background-repeat:no-repeat;
    }
    /* ENDING TOP MENU NAVIGATION CSS */

    /* BEGINNING LEFT MENU NAVIGATION CSS */

    ul.mainmenu
    {
    list-style-type: none;
    margin-left: 0;
    border-bottom: none;
    float:left;
    }

    ul.mainmenu a
    {
    display:block;
    text-decoration: none;
    width: 15em;
    border: 1px solid #FFAA00;
    padding: .3em .5em;
    background: #FFAA00;
    color: #FFF;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    font-family:Verdana;
    font-size: .9em;
    font-weight: bold;
    }

    ul.mainmenu a:hover
    {
    color: #F01D24;
    }

    ul.mainmenu li
    {
    display:inline;
    }

    /* ENDING LEFT MENU NAVIGATION CSS */
    /* BEGINNING DISJOINTED ROLLOVER EFFECT CSS */
    a span
    {
    display: none;
    }

    a:hover span
    {
    display:block;
    position:absolute;
    top:236px;
    left:400px;
    padding: 5px;
    margin: 10px;
    z-index: 100;
    }
    /* ENDING DISJOINTED ROLLOVER EFFECT CSS */

    and the HTML:

    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>



    SEMHNet - Southeast Missouri Hospital Intranet - HOME PAGE





     Southeast Missouri Hospital Intranet
    Southeast Missouri Hospital Intranet





















    <%=FormatDateTime(Now(),vbLongDate)%>















    LOGO

    Southeast Hospital




    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 4 days 17 hours ago
    Joined: 2004-06-30
    Posts: 9679
    Points: 815

    ClevaTreva wrote:Ed Give

    ClevaTreva wrote:
    Ed

    Give the OP a break. They are new to the forum and he/she is looking for help, not sarcasm.

    I know we've been over this, Trev, but it is infuriating.

    Verschwindende wrote:
    • CSS doesn't make pies

    goodpasture
    goodpasture's picture
    Offline
    newbie
    Last seen: 14 years 27 weeks ago
    Timezone: GMT-5
    Joined: 2007-05-17
    Posts: 9
    Points: 0

    I'm sorry I didn't read "The Rules"

    I'm sorry I didn't read "The Rules" or know to put the entire code on a post. I was simply trying to save disk space and figured the snippets I sent would make sense for someone who really understood the problem and knew CSS. I really find it disapponting with all the snickering and criticisms that goes on here (and unfortunately many other forums as well). Talk about a waste of disk space.

    I am definately in need of some help if anyone is interested. I just need to know how to position the rollover image relative to the width of the browser because it's not a fixed width web page.

    thanks,
    Jonathan

    goodpasture
    goodpasture's picture
    Offline
    newbie
    Last seen: 14 years 27 weeks ago
    Timezone: GMT-5
    Joined: 2007-05-17
    Posts: 9
    Points: 0

    AHH I got it.. All I needed

    AHH I got it..

    All I needed to do is place {position:relative;} within the wrapper div and all is good!

    Thanks for all your help!

    Jonathan

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 47 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    I'm not sure if this is what

    I'm not sure if this is what you're after but make the '.mainnav a' position:relative then the 'a span' offsets will refer to the anchor position then and remain true to it's position on the page.

    Posting snippets unless you know what your doing seldom proves helpful, think about it a problem is presented and yet the person with the problem borne out of lack of knowledge presumes to think they know enough to isolate the code to present to us, they're usually wrong.

    As for the comments " really understood the problem" and "knew CSS" they are not called for , I understand your frustrations but don't belittle forums or the members please.

    You might find things disappointing but look at things from our point of view having to repeat simple stuff that we would hope people would have the courtesy of doing first like reading stickies in preparation of posting.

    Hugo.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 41 weeks 5 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    Actually I was trying a

    Actually I was trying a humorous approach with a little exaggeration. Guess it didn't work, eh?

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.