desde jah, obrigado
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Mauricio Samy Silva" /> <title>Layout CSS com duas colunas - Exemplo 4</title> <style type="text/css"> body{ margin:5px 10px; font: 12px Arial, Helvetica, sans-serif; background:#e8eae8; } #tudo { width:100%; } #topo { height:80px; background-color:#e8eae8; } #principal { width: 50%; background-color: #e8eae8; border: 2px groove #FFFFFF; margin-top: 60px; float:right; margin-right: 250px; margin-left: 250px; text-align: justify; line-height: 180%; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #navegacao { background-color:#e8eae8; float:left; margin-top: 0px; margin-left: 0px; } #direita { background-color: #e8eae8; float: right; margin-right: 0px; margin-left: 500px; border: 2px groove #fff; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font:Verdana, Arial, Helvetica, sans-serif; text-align:justify; margin-top: 50px; } </style> </head> <body> <div id="tudo"> <div id="topo"> <div align="center"><img src="imagens/logo.jpg" /></div> </div> <div id="principal"> <img src="imagens/small%20logo.jpg" width="50" height="26" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</div> <div id="direita">Scorpions: Wind of Change</div> <div id="navegacao"> <p> <style type='text/css' title="mystyles" media="all"> <!-- navegação {background-color: #e8eae8; color: #416FA8; margin-left: 15px; margin-right: 100px; margin-bottom: 10px; margin-top: 60px; font-family: Verdana, Arial, sans-serif; font-size: 70%; line-height: 130%;} p { text-indent: 3em; } ul { margin= 0; padding: 0; list-style: none; width: 160px; border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 159px; top: 0; display: none; } ul li a{ display:block; text-decoration: none; color:#fff; background: #416FA8; padding: 2px; border: 1px solid #ccc; border-bottom: 0; } ul li a:hover { color:#416FA8; background: #FFF; font-weight:bold; } /*Hover Styles */ /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ li:hover ul, li.over ul {display: block; } { display: block; } startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace (" over", ""); } } } } } window.onload=startList; <ul id="nav"> --> </style> </p> <ul> <li> <a href="#"> Historia do Movimento</a> <ul> <li><a href="#"> O que são as ENS</a></li> <li><a href="#"> Objetivos</a></li> <li><a href="#"> Criação na França e Introdução no Brasil</a></li> <li><a href="#"> Criação das Equipes em São Carlos</a></li> <li><a href="#"> Lançamento das Primeiras Equipes</a></li> <li><a href="#"> Criação do primeiro Setor</a></li> <li><a href="#"> Criação do segundo Setor</a></li> <li><a href="#"> Ens em São Carlos nos dias de hoje</a></li> </ul> </li> <li> <a href="#"> Vida Equipista 2007</a> <ul> <li><a href="#"> Lema e Tema</a></li> <li><a href="#"> Tema de Estudo</a></li> <li><a href="#"> Pré Eacre</a></li> <li><a href="#"> EACRE</a></li> <li><a href="#"> Retiro Aberto</a></li> <li><a href="#"> ...outros a medida em que forem ocorrendo</a></li> </ul> </li> <li> <a href="#"> Momentos de Formação</a> <ul> <li><a href="#"> Retiros</a></li> <li><a href="#"> Mutirões</a></li> <li><a href="#"> Sessões de Formação</a></li> </ul> </li> <li> <a href="#"> Equipes em Pilotagem</a> <ul> <li><a href="#"> Definiçõe e Objetivos</a></li> <li><a href="#"> Em andamento</a></li> </ul> </li> <li> <a href="#"> Experiência Comunitária</a> <ul> <li><a href="#"> Definições e Objetivos</a></li> <li><a href="#"> Grupo em andamento</a></li> <li><a href="#"> Equipe de Trabalho</a></li> </ul> </li> <li> <a href="#"> Grupo de Noivos</a> <ul> <li><a href="#"> Reponsáveis(idéias)</a></li> <li><a href="#"> Definições e objetivos</a></li> <li><a href="#"> Apostolado assumido pelas ENS</a></li> <li><a href="#"> Agenda de Trabalho</a></li> <li><a href="#"> Questionário de avaliação pelos noivos</a></li> </ul> </li> <li> <a href="#"> Pastoral Recém-casados</a> <ul> <li><a href="#"> Responsáveis(idéias)</a></li> <li><a href="#"> Definições e objetivos</a></li> <li><a href="#"> Apostolado assumido pelas ENS</a></li> </ul> </li> <li> <a href="#"> Downloads</a> <ul> <li><a href="#"> Calendário de Eventos</a></li> <li><a href="#"> Agenda Completa</a></li> <li><a href="#"> Agenda Simplificada</a></li> <li><a href="#"> Agenda SCE's</a></li> <li><a href="#"> Agenda de Aniversários</a></li> <li><a href="#"> Organograma Funcional</a></li> </ul> </li> <li> <a href="#"> Contato</a> <ul> <li><a href="#"> Casal Responsável Regional</a></li> <li><a href="#"> Casal Responsável Setor A</a></li> <li><a href="#"> Casal Responsável Setor B</a></li> <li><a href="#"> Casal Responsável Curso de Noivos</a></li> <li><a href="#"> Conselheiros Espirituais</a></li> <li><a href="#"> Atualize seu cadastro</a></li> </ul> </li> <li> <a href="#"> Links</a> <ul> <li><a href="#"> Site Oficial ENS</a></li> </ul> </li> </ul> <p> </p> </div> </div> </body> </html>
Edição feita por: kaka_22, 12/02/2007, 08:42.