jpkuelho Posted April 10, 2012 Share Posted April 10, 2012 http://pastehtml.com/view/buakxo9oj.html I know it lacks the images but I think you can see what I having a problem with: the dropdown menu isn't vertically centered with the page, I tried margin:auto; but it didn't work. In the bottom the footer is overlapping with an upper section, I tried positioning it but it won't go any further down this the HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Via Zen</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body> <ul id="menu"> <li class="itens"><a href="#">QUEM SOMOS</a> <ul> <li><a href="#">Apresentação</a></li> <li><a href="#">Visão, Missão, Valores</a></li> <li><a href="#">Diretoria</a></li> <li><a href="#">Nossa História</a></li> <li><a href="#">Nossos Mestres</a></li> <li><a href="#">Nossos Monges</a></li> <li><a href="#">Nossa Sanga</a></li> </ul> </li> <li class="itens"><a href="#">O ZEN BUDISMO</a> <ul> <li><a href="#">Prática</a></li> <li><a href="#">Datas Comemorativas</a></li> <li><a href="#">Textos e Sutras</a></li> <li><a href="#">Sugestão de Leituras</a></li> </ul></li> <li class="itens"><a href="#">COMO PARTICIPAR</a> <ul> <li><a href="#">Zazen para iniciantes</a></li> <li><a href="#">Programação regular</a></li> <li><a href="#">Retiros e Práticas Intesivas</a></li> <li><a href="#">Doações</a></li> <li><a href="#">Tornar-se membro</a></li> <li><a href="#">Oficinas</a></li> </ul></li> <li><a href="#"><img src="imagens/logo.gif" width="84" height="102" alt="Via Zen" /></a></li> <li class="itens"><a href="#">VILA ZEN</a></li> <li class="itens"><a href="#">GALERIA DE IMAGENS</a></li> <li class="itens"><a href="#">MAIS</a> <ul> <li><a href="#">Links</a></li> <li><a href="#">Aconteceu</a></li> <li><a href="#">Relatos de Experiências</a></li> <li><a href="#">Parcerias</a></li> </ul> </li> </ul> <div id="noticias"><img src="imagens/noticias-frame.gif" alt="noticias" /><h4 class="maisnoticias"><a href="#">Mais Notícias >></a></h4></div><div id="outrassessoes"><div id="sessao"><img src="imagens/nossa_sanga.jpg" class="thumbnail" alt="Nossa Sanga" /><p class="descricao"><a href="#"><h2>Nossa Sanga</h2></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent suscipit dignissim ligula, ac ornare nullaadipiscing vitae. Pellentesque sed vestibulum ligula.Aliquam erat volutpat</p></div><div id="sessao_direita"><img src="imagens/textos_e_sutras.jpg" class="thumbnail" alt="Nossa Sanga" /><p class="descricao"><a href="#"><h2>Textos e Sutras</h2></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent suscipit dignissim ligula, ac ornare nullaadipiscing vitae. Pellentesque sed vestibulum ligula.Aliquam erat volutpat</p></div></div><div id="outrassessoes"><div id="sessao"><img src="imagens/pratica_zen_budista.jpg" class="thumbnail" alt="Nossa Sanga" /><p class="descricao"><a href="#"><h2>Prática Zen Budista</h2></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent suscipit dignissim ligula, ac ornare nullaadipiscing vitae. Pellentesque sed vestibulum ligula.Aliquam erat volutpat</p></div><div id="sessao_direita"><img src="imagens/retiros.jpg" class="thumbnail" alt="Nossa Sanga" /><p class="descricao"><h2><a href="#">Retiros e outras práticas</a></h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent suscipit dignissim ligula, ac ornare nullaadipiscing vitae. Pellentesque sed vestibulum ligula.Aliquam erat volutpat</p></div></div><div id="destaques"><div id="destaque"><h2><a href="#">Como Participar</a></h2><p class="descricao">A participação no Via Zen é aberta a todos osinteressados. Sugerimos, entretanto que,dentro do possível, se inicie peloZAZEN PARA INICIANTES.</p><p class="descricao"><br />Caso o horário da oficina seja inviável, por favor,faça contato conosco pelo fone: 3381-5539ou pelo e-mail viazenrs@gmail.com</p><h2><a href="#">Zazen</a></h2><p class="descricao"><ul><li>Terças-feiras, 10h30</li><li>Quintas-feiras, 19h</li><li>Domingos às 19h</li></ul></p></div><div id="destaque"><h2><a href="#">Zazen para iniciantes</a></h2><p class="descricao">Destina-se a todos os interessados em conhecera prática do Zazen (meditação estilo Zen) e tomarcontato com a tradição Zen-budista.</p><p class="descricao">Todos os domingos, das 16h30 às 18h00.Contribuição sugerida de R$10,00.</p><p class="descricao">Não é necessário fazer inscrições com antecedência,basta vir trajando roupas confortáveis. Em caso decancelamento, informaremos na capa do site..</p></div><div id="destaque"><h2><a href="#">Localização</a></h2><img src="imagens/mapa.gif" /></div></div><div id="rodape"><div id="coluna"><img src="imagens/logo-rodape.gif" class="logorodape" alt="Via Zen"/><p class="infotexto"><b>© 2012 - Associação Zen Budista<br />do Rio Grande do Sul</b><br />Rua Ivo Corseuil, 169. <br />Bairro Petrópolis.<br />Porto Alegre (RS) - Brasil<br />Tel.: 51-3381-5539<br />CEP: 90690-410<br /></p></div><div id="menurodape"><div id="coluna"><h4>Quem Somos</h4><ul><li>Apresentação</li><li>Visão, Misão, valores</li><li>Diretoria</li><li>Nossa história</li><li>Nossos Mestres</li><li>Nossos Monges</li><li>Nossa Sanga</li></ul></div><div id="coluna"><h4>O Zen budismo</h4><ul><li>Prática Zen-Budista</li><li>Datas comemorativas</li><li>Textos e Sutras</li><li>Sugestão de Leituras</li></ul></div><div id="coluna"><h4>Como Participar</h4><ul><li>Zazen para iniciantes</li><li>Programação regular</li><li>Retiros e Práticas intensivas</li><li>Doações</li><li>Tornar-se membro</li><li>Oficinas</li></ul></div><div id="coluna"><h4>Vila Zen</h4><h4>Galeria de imagens</h4><h4>Mais</h4><ul><li>Links</li><li>Aconteceu</li><li>Relatos de Experiências</li><li>Parcerias</li></ul></div></div></div></body></html> and the CSS @charset "utf-8";/* CSS Document *//*font*/@font-face { font-family: 'LoraBold'; src: url('fonts/lora-bold-webfont.eot'); src: url('fonts/lora-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/lora-bold-webfont.woff') format('woff'), url('fonts/lora-bold-webfont.ttf') format('truetype'), url('fonts/lora-bold-webfont.svg#LoraBold') format('svg'); font-weight: normal; font-style: normal;}@font-face { font-family: 'LoraItalic'; src: url('fonts/lora-italic-webfont.eot'); src: url('fonts/lora-italic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/lora-italic-webfont.woff') format('woff'), url('fonts/lora-italic-webfont.ttf') format('truetype'), url('fonts/lora-italic-webfont.svg#LoraItalic') format('svg'); font-weight: normal; font-style: normal;}@font-face { font-family: 'LoraRegular'; src: url('fonts/lora-regular-webfont.eot'); src: url('fonts/lora-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/lora-regular-webfont.woff') format('woff'), url('fonts/lora-regular-webfont.ttf') format('truetype'), url('fonts/lora-regular-webfont.svg#LoraRegular') format('svg'); font-weight: normal; font-style: normal;}html {background-image:url(imagens/bg.gif);background-attachment:fixed;background-repeat:no-repeat;width:100%;}body {width:960px;margin:auto;min-height: 100%;}*{ margin:0; padding:0; }/* menu*/#menu{ padding: 10px 0 0 0; list-style: none; margin-top:20px; font-family:Lora, serif; margin-left:auto; margin-right:auto; display:block; position:relative;}li.itens { position:relative; margin-top:45px;}#menu li{ float: left; padding: 0 0 10px 0; position: relative; }#menu a{ float: left; height: 25px; padding: 0 20px 0 0; color: #666; text-transform: uppercase; font: bold 12px Lora, serif; text-decoration: none;}#menu li:hover > a{ color: #163a24;}*html #menu li a:hover /* IE6 */{ color: #163a24;}#menu li:hover > ul{ display: block;}/* Sub-menu */#menu ul{ list-style: none; margin:auto; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999;border-radius:5px; background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(21,59,35) 56%);background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(21,59,35) 56%);background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(21,59,35) 56%);background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(21,59,35) 56%);background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(21,59,35) 56%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(0,0,0)),color-stop(0.56, rgb(21,59,35)));}#menu ul li{ float: none; margin: 0; padding: 0; display: block;}/* submenu */#menu ul a{ padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none;color:#FFF;font-weight:normal; }*html #menu ul a /* IE6 */{ height: 10px; width: 150px;}*:first-child+html #menu ul a /* IE7 */{ height: 10px; width: 150px;}#menu ul a:hover{ background: #FFF;opacity:0.8; }/*#menu ul li:first-child a{ -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;}*//*#menu ul li:first-child a:hover:after{ border-bottom-color: #04acec;}*//*#menu ul li:last-child a{ -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;}*//* Clear floated elements */#menu:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}* html #menu { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 *//* fim menu */#noticias {margin-top:70px;}.maisnoticias {float:right;margin-top:10px;margin-right:50px;font-weight:normal;font-family:Lora, serif; }.maisnoticias a {color:#000;text-decoration:none;}.maisnoticias a:hover {text-decoration:underline;}.maisnoticias a:active {font-weight:bold;} #outrassessoes {margin-top:90px;margin-bottom:45px;font-family:Arial, Helvetica, sans-serif;font-size:12px;}#sessao {width:460px;height:189px;color:#7b7979;float:left;margin-right:20px;}#sessao_direita {width:460px;height:189px;color:#7b7979;float:right;}.thumbnail { float:left; width:150px; height:144px; overflow:hidden; box-shadow:3px 3px 5px #555; margin:7px 15px 0 0;}.descricao {float:right;color:#7b7979;line-height:16px;margin-top:1em;}h2 {margin:0 0 0.83em 0;font-weight:normal;font-family:Lora, serif;}h2 a {color:black;text-decoration:none;font-size:24px;} h2 a:hover {text-decoration:none;}#destaques {margin-top:100px;color:#7b7979;font-size:12px;}#destaque {width:300px;height:223px;float:left;color:#7b7979;font-family:Arial, Helvetica, sans-serif;margin-right:20px;}#destaques ul {list-style-type:circle;}#rodape {color:#7b7979;margin-bottom:120px;margin-top:500px;}.infotexto {float:right;font-family:Arial, Helvetica, sans-serif;font-size:14px;}.logorodape {float:left;margin-right:15px;}#menurodape {width:640px;float:right;}#coluna {float:left;margin-right:15px; } #menurodape ul {list-style-type:none;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:22px;}h4 {font-weight:normal;margin-bottom:25px;} Thanks in advance Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.