• Locked
No replies
Tue, 2015-11-24 22:34
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.

Top
Tags: