Jump to content

Help Centering a Drop down menu and positioning footer


Recommended Posts

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...