lazy2pickname
New Member
So, I am creating this website for a Bio project on the school and I am having 2 problems, first the title tag is not working, I don't know why, second I want a text to show up when you hover over an image, can someone please help me?
Here is the source code:
Here is the source code:
Code:
<!DOCTYPE html>
<html>
<head>
<title>CoBRA wiki - Project</title>
<meta charset="utf-8">
<style>
*{margin:0px;padding:0px;}
body{overflow-x:hidden;overflow-y: scroll;}
ul{list-style-type:none;font-size:15pt;font-family:verdana;}
a{text-decoration: none;}
img#promoter{
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Opera, Chrome, and Safari */
}
.prom_info{display:none;}
.RBS_info{display:none;}
.GOT1_info{display:none;}
.GOT2_info{display:none;}
.Term_info{display:none;}
#promoter:hover .prom_info{display:inline;}
</style>
<link rel="icon" href="CoBRA-Icon.png">
</head>
<body>
<div style="height:50px;width:100%;background-color:#000000;position:absolute;top:0px;left:0px;">
<a href="index.html">
<div style="border-right-style:solid;border-color:#ffffff;border-width:1px;position:absolute;top:0px;left:0px;height:50px;width:155px;">
<img src="CoBRA-IGenLogo2.png" width="120px" style="position:relative;left:30px;top:3px;">
</div>
</a><!--link to main page-->
</div><!--header-->
<div style="position:absolute;top:50px;">
<div style="position:absolute;left:50px;top:-50px;transform:rotate(15deg);-ms-transform:rotate(15deg); /* IE 9 */-webkit-transform:rotate(15deg); /* Opera, Chrome, and Safari */">
<img id="circle" src="diagram/circle.png" style="position:absolute;top:25px;left:30px;"><!--Just an ordinary circle :) -->
<img id="promoter" src="diagram/promoter.png" style="position:absolute;top:125px;left:-20px;height:70px;transform:rotate(-90deg);-ms-transform:rotate(-90deg); /* IE 9 */-webkit-transform:rotate(-90deg); /* Opera, Chrome, and Safari */"><!--Promoter-->
<img id="RBS" src="diagram/rbs.png" style="position:absolute;top:60px;left:10px;height:50px;transform:rotate(-60deg);-ms-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);"><!--Ribosome binding site-->
<img id="GOI1" src="diagram/goi.png" style="position:absolute;top:15px;left:100px;height:50px;transform:rotate(-15deg);-ms-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);">
<img id="GOI1" src="diagram/goi.png" style="position:absolute;top:35px;left:215px;height:50px;transform:rotate(30deg);-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);">
<img id="Terminator" src="diagram/Terminator.png" style="position:absolute;top:100px;left:285px;height:50px">
</div><!--Project image-->
<div id="txt" style="position:absolute;top:80px;left:60px;height:200px;width:250px;z-index:-1;">
<br>
<div class="prom_info">
<b>
Name: <br>
Function: Promoter<br>
DNA sequence: <br>
</div>
<div class="RBS_info">
Name: <br>
Function: Ribosome binding site<br>
DNA sequence: <br>
</div>
<div class="GOI1_info">
Name: <br>
Function: <br>
DNA sequence: <br>
</div>
<div class="GOI2_info">
Name: <br>
Function: <br>
DNA sequence: <br>
</div>
<div class="Term_info">
Name: <br>
Function: Terminator<br>
DNA sequence: <br>
</b>
</div>
</div>
</div><!--Body-->
<br><br>
<div style="background-color:#000000;width:1500px;height:50px;position:absolute;bottom:0px;">
<a href="http://igem.org/Main_Page" target="_blank"><img src="IGEM_basic_Logo_white_stylized.png" width="54" style="position:relative;left:10px;top:5px;"></a>
<a href="http://cochrane.rockyview.ab.ca/" target="_blank"><img src="Cobra.png" width="37" style="position:relative;left:30px;top:5px;"></a>
</div><!--footer-->
</body>
</html>
Last edited by a moderator: