SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    ohio
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    OK, i'm gonna take the CSS plunge. Need advice.

    Well, i've decided to create a new version to eventually replace my site. I'd like to do it primarily in CSS.

    But i want to make sure i start off correctly.

    First, i'm going to do the graphical layout in photoshop. I will design it for 800x600(unless someone can talk me into going in another direction). Since most of the families that frequent the site use this resolution.

    Here's my main concern/question.

    I plan on having 95% of all my graphical elements as part of the background. However, i plan on having a few graphics that will have some sort of mouse over for navigation. I plan on creating small graphics that look like poloroid pictures, then when moused over, they will turn to black and white. Or some similar effect. These will serve as links to my gallery, schedules, etc.

    How should i go about starting out so that this won't be terribly difficult when i come to it? Should i have the "off state" versions as part of the bg, then the over state will simply hide the off state instead of replacing it?(I think i read this online somewhere)

    Just trying to make sure i start out correctly so i don't end up with a big headache.

    Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    plan on creating small graphics that look like poloroid pictures, then when moused over, they will turn to black and white. Or some similar effect. These will serve as links to my gallery, schedules, etc.

    How should i go about starting out so that this won't be terribly difficult when i come to it? Should i have the "off state" versions as part of the bg, then the over state will simply hide the off state instead of replacing it?(I think i read this online somewhere)
    Yes thats correct

    Place the rolover state in the background of a parent. e.g. If you are using lists for menus then put the rollover state in the background of the list (li). Put the normal state in the background of the anchor (a). On hover set the background to transparent.

    This makes the images pre-loaded and faster than loading an image on hover.

    If you have different images you will just need to set up classes for each image. Its quite straight forward really

    Heres an example to get you started

    http://www.pmob.co.uk/temp/cssrollover12.htm

    Hope that helps.

    paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    ohio
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    Paul, thanks for the reply. That's the advice i was looking for.

    Not to sound stupid, but what your saying is that when i create the main bg image i should put the "mouse over" image in the bg or the image as it appears before a mouse over?

    Thanks.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Both images are in the background (see my example as its exactly what you want) and they are just stacked on top of each other.

    The rollover state (mouse over) is put in the background of the parent (li). The normal state is inthe background of the anchor. Thesde both occupy the same space and are therefore stacked on top of each other. On a:hover we just make the anchors background transparent and the image underneath shows through.

    This makes the images preloaded as they are always there but just stacked on top of each other.

    Play with the example I gave you - just go to view source and copy it all

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •