Hi all,
I have two sets of CSS code (shown below) that need to be used in the same survey. Ideally, I would like to apply the first set of CSS code to a specific question ID and the other one to another different question ID. I have been putting it in custom look and feel in CSS and have worked out how to do each one separately, but do not know how to apply them to specific questions in my survey (both sets of code need to be used in the same survey).
I’ve tried other suggested methods but none have worked.
Does anyone know how to do this? Thank you!
Set #1:
HTML:
Just look at this little white poof of cuteness.
CSS:
div {
position: relative;
display: inline;
}
.imtip {
position: relative;
bottom: 10px;
height: 40px;
right: -50px;
width: 40px;
}
span{
background:url(https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png);
color: black;
font-size: 13px;
height: 30px;
width: 200px;
letter-spacing: 1px;
line-height: 20px;
position: relative;
text-align: center;
text-transform: uppercase;
bottom: 50px;
right:-120px;
display:none;
font-size: 1.5em;
}
p{
margin:100px;
float:left;
position:absolute;
cursor:pointer;
width: 100px;
left: -150px;
height: 1%;
bottom: 300px;
}
p:hover span{
display:block;
}
Set #2:
HTML:
Just look at this little white poof of cuteness.
CSS:
div {
position: relative;
display: inline;
left:10px;
bottom: -10px;
}
.imtip {
position: relative;
height: 50px;
bottom: 510px;
right: 70px;
width: 50px;
}
span{
background:#F8F8F8;
color: #FFA500;
font-size: 13px;
height: 50px;
width: 300px;
letter-spacing: 1px;
line-height: 20px;
position: relative;
text-align: center;
text-transform: uppercase;
top: -540px;
left: 40px;
display:none;
}
span:after{
content:'';
position:absolute;
bottom:-5px;
width:10px;
height:10px;
border-bottom:1px solid #dfdfdf;
border-right:1px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
p{
margin:100px;
float:left;
position: absolute;
cursor:pointer;
width: 500px;
height: 5px;
right: -60px;
}
p:hover span{
display:block;
}