Hello everyone!
Below I have placed my original stylesheet.
css. Below that I have the same stylesheet with
css hotspots within the content div. However, when I try to get the hotspots to work, they don't...?
Any ideas as to why would be greatly appreciated!!
All the best! Here we go:
original
css:
- Code: Select all
/* CSS Document */
body{
padding:0px;
margin:0px;
background:#fff;
font-family: Helvetica, Arial, sans-serif;
color:#333333;
font-size:small;
}
a{
color:#333333;
text-decoration:none;
}
/*change page width here*/
#wrapper{
margin: 0px;
padding:0px;
width:760px;
}
#header ul{
margin:0;
padding:0;
list-style:none;
}
/*change header size here*/
#header li{
font-size:36px;
text-transform:uppercase;
display:inline;
}
#home a:hover{
color:#999999;
}
#port a{
color:#009933;
}
#port a:hover{color:#FF9933;
}
#misc a:hover{color:#FFCC33;
}
#contact a:hover{
color:#FFFF33;
}
#misc a{
color:#FFCC33;
}
#contact a{
color:#00FF33;
}
/* changed min height to height 480px */
#content{
height: 480px;}
div {
border:1px;
margin:0px;
padding:0px;
}
div.container {
width:760px;
height:550px;
background-image:url(../../Web Site/Images/MiscPage.jpg)
}
#transport ul{
margin: 0px;
padding: 0px;
list-style-type: none;
text-decoration: none;
text-align:center;
}
#transport li{
text-transform:uppercase;
display:inline;
}
#left img{
border:none;}
#right img{
border:none;
}
/* put in a closing bracket */
#command a{
margin: 0px;
}
/* put in a closing bracket */
/*change transport size here*/
transport_text_size{
font-size:18px;}
#tablecontainer{
margin:0 auto;
}
Below with 'hotspots' added....
- Code: Select all
/* CSS Document */
body{
padding:0px;
margin:0px;
background:#fff;
font-family: Helvetica, Arial, sans-serif;
color:#333333;
font-size:small;
}
a{
color:#333333;
text-decoration:none;
}
/*change page width here*/
#wrapper{
margin: 0px;
padding:0px;
width:760px;
}
#header ul{
margin:0;
padding:0;
list-style:none;
}
/*change header size here*/
#header li{
font-size:36px;
text-transform:uppercase;
display:inline;
}
#home a:hover{
color:#999999;
}
#port a{
color:#009933;
}
#port a:hover{color:#FF9933;
}
#misc a:hover{color:#FFCC33;
}
#contact a:hover{
color:#FFFF33;
}
#misc a{
color:#FFCC33;
}
#contact a{
color:#00FF33;
}
/* changed min height to height 480px */
#content{
height: 480px;}
div {
border:1px;
margin:0px;
padding:0px;
}
div.container {
width:760px;
height:550px;
background-image:url(../../Web Site/Images/MiscPage.jpg)
}
div.div1 {
width:230px;
height:150px;
float:left;
position:relative;
left:15px;
top:30px;
z-index:1;
}
div.div2 {
width:230px;
height:150px;
float:left;
position:relative;
left:35px;
top:30px;
z-index:1;
}
div.div3 {
width:230px;
height:150px;
float:right;
position:relative;
left:-15px;
top:30px;
z-index:1;
}
div.div4 {
width:230px;
height:150px;
float:left;
position:relative;
left:15px;
top:50px;
z-index:1;
}
div.div5 {
width:230px;
height:150px;
float:left;
position:relative;
left:35px;
top:50px;
z-index:1;
}
div.div6 {
width:230px;
height:150px;
float:right;
position:relative;
left:-15px;
top:50px;
z-index:1;
}
div.div7 {
width:230px;
height:150px;
float:left;
position:relative;
left:15px;
top:70px;
z-index:1;
}
div.div8 {
width:230px;
height:150px;
float:left;
position:relative;
left:35px;
top:70px;
z-index:1;
}
div.div9 {
width:230px;
height:150px;
float:right;
position:relative;
left:-15px;
top:70px;
z-index:1;
}
#transport ul{
margin: 0px;
padding: 0px;
list-style-type: none;
text-decoration: none;
text-align:center;
}
#transport li{
text-transform:uppercase;
display:inline;
}
#left img{
border:none;}
#right img{
border:none;
}
/* put in a closing bracket */
#command a{
margin: 0px;
}
/* put in a closing bracket */
/*change transport size here*/
transport_text_size{
font-size:18px;}
#tablecontainer{
margin:0 auto;
}
Cheers in advance, Al
Hi Guys! I've created a separate stylesheet and want to know where to insert it.
Jul 27th, 2007, 17:20
Similar Threads
