Hi Guys! I've created a separate stylesheet and want to know where to insert it.

[algoodbody]

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

[karinne]

Moving to appropriate forum!

[karinne]

I don't get it!?

Could you explain a bit more? Maybe give us a link? Show us an example of what it's suppose to look like/do?

[algoodbody]

Hi Karinne,
the site is 'goodbody.create.com' however I have been rebuilding it with seperate stylesheets within dreamweaver 8, but only have the original site online. Basically it looks perfect on a high res mac via firefox or safari, but all over the place in ie7. These are problems that I'm fixing but haven't uploaded the new site.

The original looks great (as I said - on a mac), but the hotspot code I'm refering to is used in the portfolio and misc pages.

If you go to goodbodycreate.com then click on the word portfolio or misc at the top of the page, then you'll see where I've placed the original hotspots, which I made in design mode.

Hope that makes sense to you,

Thanks, Al

[Lchad]

Hotspots go in the html of the code.