No replies
tryjohnny
tryjohnny's picture
Offline
newbie
Last seen: 3 years 51 weeks ago
Joined: 2015-11-24
Posts: 1
Points: 2

my code

html

<html>
 
<head>
 
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
 
 
 
 
 
<body>
 
<div class="red">
 
 
	<div class="barra">
		<div class="logo">		
		<h1>LOGO</H1>
		</div>
		<div class="table">
			<ul id="menu">
				<li>
					<h4>Pagina Inicial</h4>
				</li>
				<li>
					<h4>Generos</h4>
				</li>
			<ul>	
		</div>
		<div class="quadrado">
		</div>
		<div class="quadrado1">
		</div>	
		<div class="quadrado2">
		</div>	
		<div class="quadrado3">
		</div>	
	</div>
	<div class="retangulo">
    	<h2>Qual e o teu tipo de filme?</h2>
    	<div class="lista" >	
    		<ul id="double"  >
    			<a href="file://C:\Users\Johnny\Desktop\joao\3 ano\Programação\site\codigo2\teste1.html"><li class="li">Animaçao<div><div class="circle"></div></div></li></a>
    			<li class="li1">Ação<div><div class="circle1"></div></div></li>
    			<li class="li2">Comedia<div><div class="circle2"></div></div></li>
    			<li class="li3">Terror<div><div class="circle3"></div></div></li>
    			<li class="li4">Romance<div><div class="circle4"></div></div></li>
    			<li class="li5">Ficção Cientifica<div><div class="circle5"></div></div></li>
			<ul>
		</div>
	</div>
 
</body>
</html>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
.red{
	width: 100%;
	height: 100%;
}
 
 
 
body{
	background-image: url(fundo.jpg) ;
	background-size: 100% 100%;
	background-repeat: no-repeat;
 
	width: 100%;
	height: :100%;
 
 
}
 
 
.barra{
 
 
	float: left;
	width:100%; 
	height:20%;
	background-color: black;
	top:0%;
}
 
.logo{
	z-index: 4;
	font-family: Stencil;
	font-size:2.5vw;
	color: white;
	margin-top:4.5%;
	margin-left:10%;
 
}
 
 
.quadrado{
 
	float: inline;
	z-index: 12;
	width: 2.5%;
	height: 5%;
	background-color: #A9A8A8;
	border-radius: 25%;
	position: absolute;
	margin-left:1.8%;
	margin-top: 4.25%;
	left:2.5%;
	top:-0.5%;
 
}
 
.quadrado1{
	display: inline;
	float: left;
	z-index: 13;
	width: 2.5%;
	height: 5%;
	background-color: #A9A8A8;
	border-radius: 25%;
	position: absolute;
	margin-left: 1.8%;
	margin-top: 7.5%;
	left:2.5%;
	top:0.5%;
 
 
}
 
.quadrado2{
	display: inline;
	float: left;
	z-index: 14;
	width: 2.5%;
	height: 5%;
	background-color: #A9A8A8;
	border-radius: 25%;
	position: absolute;
	margin-left:1.8%;
	margin-top: 10.75%;
	left:2.5%;
	top:1.5%;
 
}
 
.quadrado3{
	display: inline;
	float: left;
	z-index: 15;
	width: 2.5%;
	height: 5%;
	background-color: #A9A8A8;
	border-radius: 25%;
	position: absolute;
	margin-left:1.8%;
	margin-top: 14%;
	left:2.5%;
	top:2.5%;
 
}
 
ul#menu {
   	margin-left: 27%;
	list-style: none;
	padding-top: 0%;
}
 
ul#menu li {
 
display: inline;
padding-left: 10%;
 
}
 
h4{
 
	font-family: Stencil;
	font-size:1.5vw;
 
	color: white;
	top:9%;
	left:10%;
}
 
.retangulo {
	z-index:16;
	width:60%; 
	height:45%;
	background-color: #434343;
	position:absolute;
	top:40%;
	left:20%;
	box-shadow: inset 0 0 50px #000000;
}
 
h2{
	font-family: Stencil;
	font-size:2vw;
	text-align: center;
	padding-top: 3.5%
}
 
 
 
ul{
 
 
	padding-left:25%;
	padding-top: 7%; 
	overflow: hidden;
	list-style-position: inside;
 
}
 
li{
 
	font-family: Chaparral Pro;
	font-size: 1.35vw;
	color: white;
	font-style: bold;
	height: 15%;
	float:left;
	display:inline;
}
 
 
 
 
 
 
#double li{
	width:50%;
}
 
.circle{
	border-radius: 50%;
	width:4%;
	height:25%;
	color: #F1E912;
	margin-top: -5.3%;
	margin-left: -7.5%;
	background: #434343;
	box-shadow: inset 0 0 4px #000000;
 
}
 
.circle1{
	border-radius: 50%;
	width:4%;
	height:25%;
	color: #F1E912;
	margin-top: -5.3%;
	margin-left: -7.5%;
	background: #434343;
	box-shadow: inset 0 0 3px #000000;
}
 
.circle2{
	border-radius: 50%;
	width:4%;
	height:25%;
	color: #F1E912;
	margin-top: -5.5%;
	margin-left: -7.5%;
	background: #434343;
	box-shadow: inset 0 0 3px #000000;
 
}
 
.circle3{
	border-radius: 50%;
	width:4%;
	height:25%;
	color: #F1E912;
	margin-top: -5.5%;
	margin-left: -7.5%;
	background: #434343;
	box-shadow: inset 0 0 3px #000000;
 
}
 
.circle4{
	border-radius: 50%;
	width:4%;
	height:25%;
	color: #F1E912;
	margin-top: -5.5%;
	margin-left: -7.5%;
	background: #434343;
	box-shadow: inset 0 0 3px #000000;
}
 
.circle5{
	border-radius: 50%;
	width:4%;
	height:25%;
	color: #F1E912;
	margin-top: -5.5%;
	margin-left: -7.5%;
	background: #434343;
	box-shadow: inset 0 0 3px #000000;
 
}

I have a problem on the list. the circles are light up when the mouse is moved away from the words. how can decrease the size of the read without deforming the list.