1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Problem no CSS e HTML em menu horizontal

Discussão em 'Web Development' iniciada por Fil__, 20 de Dezembro de 2007. (Respostas: 11; Visualizações: 1306)

  1. Fil__

    Fil__ Power Member

    Tenho este codigo

    CSS
    ul#menu{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:36px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:bold;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    background-color: transparent;
    background-image: url(images/OFF.gif);
    background-repeat: repeat-x;
    background-position: top;
    }
    ul#menu li{
    display:block;
    float:left;
    margin:0;
    padding:0;
    }
    ul#menu li a{
    display:block;
    float:left;
    color:#000000;
    text-decoration:none;
    font-weight:bold;
    padding:12px 20px 0 20px;
    height:24px;
    background-color: transparent;
    background-image: url(images/DIVIDER.gif);
    background-repeat: no-repeat;
    background-position: right top;
    }
    ul#menu li a:hover{
    background:transparent url("images/HOVER.gif") no-repeat top right;
    }

    HTML
    <table width="837" border="0" align="center">
    <tr>
    <th scope="col">
    <ul id='menu'>
    <li ><a href='http://' >Home</a></li>
    <li ><a href='http://' >Empresa</a></li>
    <li ><a href='http://' >Instalações</a></li>
    <li ><a href='http://' >Ementa</a></li>
    <li ><a href='http://' >Contactos</a></li>
    </ul>
    </th>
    </tr>
    </table>


    So que os botoes ficam sempre encostados a esquerda. O que pretendo e ter os botoes centrados, com o restanto espaço a ser o fundo.
    Alguem sabe como fazer isso? Expliquei-me bem? Thanks malta
     
  2. Rui Marto

    Rui Marto Power Member

    Porque é que tens o "float: left" no ul#menu li?
     
  3. Fil__

    Fil__ Power Member

    Ter ou nao ter e igual amigo, vai sempre alinhar a esquerda
    A menos que meta float right mas eu tambem nao quero a esquerda, quero ao centro
     
  4. naoliveira

    naoliveira Power Member

    Experimenta assim:

    <div align="center">
    <ul id='menu'>
    <li ><a href='http://' >Home</a></li>
    <li ><a href='http://' >Empresa</a></li>
    <li ><a href='http://' >Instalações</a></li>
    <li ><a href='http://' >Ementa</a></li>
    <li ><a href='http://' >Contactos</a></li>
    </ul>
    </div>
     
  5. Fil__

    Fil__ Power Member

    naoliveira, nao funcionou :005:
     
  6. Rui Marto

    Rui Marto Power Member

    experimenta um destes:
    text-align: center;
    background-position: center center;
     
  7. hasta.g5

    hasta.g5 I quit My Job for Folding

    Comigo está centrado.
    [​IMG]
    Não é isto que pretendes?
    Edit: Limitei-me a copiar o código que puseste, não alterei nada.
     
    Última edição: 20 de Dezembro de 2007
  8. Fil__

    Fil__ Power Member

    é isso mas os items tem que estar na horizontal e nao na vertical
    nao te esqueças do css para ficar na vertical e veres o que pretende
    thanks :003:
     
  9. K0mA

    K0mA Power Member

    Será isto?
     
  10. p3dro

    p3dro Power Member

    Não sei se já resolveste o problema, mas vê se funciona desta maneira:

    Código:
      th#menu_container{
        font-family:Helvetica,Arial,Verdana,sans-serif;
        font-size:12px;
        font-weight:bold;
        height:36px;
      }
      
      ul#menu{
        margin:0;
        padding: 0;
        list-style-type:none;
        text-transform:uppercase;
        background: transparent url("images/OFF.gif") repeat-x top;
      }
      
      ul#menu li{
        display:inline;
      }
      
      ul#menu li a{
        color:#000000;
        text-decoration:none;
        height: 24px;
        padding:12px 20px 0 20px;
        background: transparent url("images/DIVIDER.gif") no-repeat right top;
      }
      
      ul#menu li a:hover{
        background:transparent url("images/HOVER.gif") no-repeat top right;
      }
    


    Código:
    <table width="837" border="0" align="center">
    <tr>
      <th scope="col" id='menu_container'>
        <ul id='menu'>
          <li ><a href='http://' >Home</a></li>
          <li ><a href='http://' >Empresa</a></li>
          <li ><a href='http://' >Instalações</a></li>
          <li ><a href='http://' >Ementa</a></li>
          <li ><a href='http://' >Contactos</a></li>
        </ul>
      </th>
    </tr>
    </table>
    
    Claro que também não sei se isto fica correctamente com os backgrounds que estás a usar, mas vê se pelo menos te ajuda em alguma coisa ...
     
  11. hasta.g5

    hasta.g5 I quit My Job for Folding

    Pois, tinha-me esquecido do CSS.

    Vi que o problema é o conteúdo da célula não estar centrado, isto é, a lista. Na teoria, utilizando text-align: center; no td funcionaria (th neste caso) mas por alguma razão não funciona.

    Contornando o problema, em vez de usares uma lista para por os links podes tentar usar uma célula para cada link. Se estás a usar listas por ética de programação, nesse caso não devias usar uma tabela para centrar a div mas sim usar margin-left: auto; e margin-right: auto; dentro de um div geral com text-align: center; para centrar (acho que é uma coisa assim do género).
     
    Última edição: 21 de Dezembro de 2007
  12. Fil__

    Fil__ Power Member

    Thanks a todos ppl mas usei outra estrategia. Criei menu na vertical e assim ja nao me chateio mais lol
    Thanks malta :009:
     

Partilhar esta Página