Home centralizada
<!DOCTYPE html> <html> <head> <title>Gabriel Sardinha</title> <meta charset="utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> <meta name="description" content="Meu site pessoal"> <meta name="keywords" content="gabriel, sardinha, gsardinha, anjosarda"> <meta name="reply-to" content="gabriel@gsardinha.net"> </head> <body> <div id="page"> <div id="box1"> <ul id="nav"> <li><a href="http://www.facebook.com/anjosarda">Facebook</a></li> <li><a href="https://www.youtube.com/channel/UCI03a6Hta0CUqR4cX-oVJfQ">YouTube</a></li> <li><a href="http://gsardinha.net/photos/">Photos</a></li> <li><a href="https://twitter.com/anjosarda">Twitter</a></li> <li><a href="http://gsardinha.net/9gag/">9gag Traduzido</a></li> </ul> </div> <div id="main"> <iframe width="400" height="250" src="https://www.youtube.com/embed/mEV20Iod974" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> <span style="position:absolute;bottom:0;right:15px;">gabriel@gsardinha.net</span> </div><!-- end of main --> </div><!-- end of page --> </body> </html>
Em funcionamento aqui.
CSS da pagina:
body { color: #666; background-color: #666; font-family: Verdana; font-size: 18px; width: 500px; } #page { background-color: #fff; visibility: visible; margin: auto; position: absolute; width: 700px; height: 400px; left:50%; top:50%; margin-left:-350px; margin-top:-200px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 2px solid white; -moz-border-top-colors: #292929 white; -moz-border-right-colors: #292929 white; -moz-border-bottom-colors: #292929 white; -moz-border-left-colors: #292929 white; -webkit-box-shadow: 0 -1px 2px #292929; } #box1 { background-color: #fff; position: absolute; top: 50px; left: 25px; width: 150px; height: 200px; border-right:2px solid #666; } #main { position: absolute; top: 50px; left: 250px; width: 400px; height: 300px; } /* inicio do CSS do Menu */ ul { text-align: left; margin: 0; padding: 0; list-style: none; width: 120px; border-bottom: 1px solid #fff; } ul li { position: relative; } li ul { position: absolute; left: 119px; top: 0; display: none; } ul li a { display: block; text-decoration: none; color: #666; background: #fff; padding: 5px; border: 1px solid #fff; border-bottom: 0; } /* correcao \*/ * html ul li {float: left;} * html ul li a {height: 1%;} /* fim da correcao */ ul li a:hover { color:#666; background: #fff; border-left: 4px solid #666; padding-left: 15px; } li:hover ul ul, li.over ul ul {display:none;} li:hover ul, li li:hover ul, li.over ul, li li.over ul {display: block;} /* regra magica */ /* final do CSS do Menu */