August 28th, 2003, 05:17 PM
|
|
Contributing User
|
|
Join Date: Aug 2003
Posts: 245
Time spent in forums: 3 Days 1 h 48 m 2 sec
Reputation Power: 5
|
|
|
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:
Quote: 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. 
|
Dev Shed Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
