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