#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    247
    Rep Power
    12

    CSS - theme switch, link bg q's


    Hello all, I have started to get to grips with css but am having trouble finding questions to some problems I have which I hope you can help me with. Please note: I have searched first before posting but couldn't find nothing

    1. How do I have 3 coloured images which when one is clicked the css stylesheet switches to the one of that colour plz?

    2. Is it possible to have more then one backgroud image?
    In order to have one placed at the top of a 'box' and one at the bottom.

    3. Is it possible to (using css) create links which have the same background effect as seen in Cute php?
    where the row changes colour when you hover over the links

    Click Here to see the page I am going working on and here is the css code:

    body {

    margin:0px;
    background-color: #0066CC;
    color: #FFFFFF
    padding:0px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size:8pt;


    }

    .behindbox {
    position:absolute;
    top:110px;
    left:150px;
    width:709px;
    Height:450px;
    padding:0px;
    background-color: #C1E0FF;
    COLOR: #000000;
    border-width: 1px 4px 4px 1px;
    border-style: solid;
    line-height:0px;
    z-index: 0;

    }


    .header {
    position:absolute;
    top:30px;
    left:150px;
    width:709px;
    Height:60px;
    padding:0px;
    background: transparent url(header.jpg) no-repeat;
    COLOR: #000000;
    border-width: 1px 4px 4px 1px;
    border-style: solid;
    line-height:0px;

    }

    .linkone {
    position:absolute;
    top:130px;
    left:170px;
    width:150px;
    Height:120px;
    padding:0px;
    background: #FFFFFF url(navigationtitle.jpg) no-repeat;
    COLOR: #000000;
    border-width: 1px;
    border-style: solid;
    line-height:0px;
    z-index: 1;

    }

    .linktwo {
    position:absolute;
    top:270px;
    left:170px;
    width:150px;
    Height:120px;
    padding:0px;
    background: #FFFFFF url(siterelatedtitle.jpg) no-repeat;
    COLOR: #000000;
    border-width: 1px;
    border-style: solid;
    line-height:0px;
    z-index: 1;

    }

    .linkthree {
    position:absolute;
    top:410px;
    left:170px;
    width:150px;
    Height:120px;
    padding:0px;
    background: #FFFFFF url(navigationtitle.jpg) no-repeat;
    COLOR: #000000;
    border-width: 1px;
    border-style: solid;
    line-height:0px;
    z-index: 1;

    }

    .mainbox {
    position:absolute;
    top:130px;
    left:345px;
    width:490px;
    Height:400px;
    padding:0px;
    background: #FFFFFF url(maintitle.jpg) no-repeat;
    COLOR: #000000;
    border-width: 1px;
    border-style: solid;
    line-height:0px;
    z-index: 1;

    }
    Of course, I have not done the link colors yet etc.
    I appreciate any help.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    247
    Rep Power
    12
    Anyone able to help plz?
    I really need help with switching styesheets
    I have visited sites like a list apart, but it still doesn't work, plz help
  4. #3
  5. :(){ :|:&};:
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Germany
    Posts
    297
    Rep Power
    12
    1. www.e-lusion.com
    It seems like you've been to a page like this >_< Why don't you look at his code and try to understand it and then ask for help mor specificly to your problem

    2. Not for one <div> but you can create to with each having a different background image.

    3. This can be done in several ways. One is using a <div> and change its color, the other using a cell and change it's background color when your mouse hovers over it.
    regards >_<

    ws. fgeller.de
    em. felix@fgeller.de
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    247
    Rep Power
    12
    Thank you, by checking it now you will be able to see the switch is working!

    Could you help me out by telling how I will go about using coloured boxes instead please.

    Thank you for your help so far.

IMN logo majestic logo threadwatch logo seochat tools logo