Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Preis85

Tamanho do menu não bate com tamanho dos itens dele

Por , em Desenvolvimento frontend

Recommended Posts

Preis85    0

Preis85
Postado

Estou fazendo um site que tem 980px de largura, o menu dele tem 100% mas tem uma borda de 2px, logo a área disponivel para o menu ficou 976px.

Eu resolvi colocar tamanho fixo nos itens do menu, conforme esta no codigo seguinte, mas se vocês somarem o tamanho dos itens do menu vão ver que o tamanho utilizado deveria ser de 946px só, mas ta usando todo os 976px.

 

Onde foi parar esses 30px que tão faltando? Ou que parte da conta que eu fiz errado?

 

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style>
#meio { width:980px; margin:0 auto; padding:10px 0 0 0;}
#menu { border:2px solid #eaeaea; border-bottom:4px solid #ce4241; font:16px tahoma; color:#3c3c3c; }
#menu a {display:inline-block;text-align:center;}
#men1 { width:95px;}
#men2 { width:200px;}
#men3 { width:105px;}
#men4 { width:165px;}
#men5 { width:155px;}
#men6 { width:155px;}
#men7 { width:71px;}
</style>
</head>

<body>
<div id='meio'>
        <div id='menu'>
            <a id='men1' href='#'>Empresa</a>
            <a id='men2' href='#'>Políticas de Governança</a>
            <a id='men3' href='#'>Informativos</a>
            <a id='men4' href='#'>Escritório de Família</a>
            <a id='men5' href='#'>Trabalhe Conosco</a>
            <a id='men6' href='#'>Venda de Usados</a>
            <a id='men7' href='#'>Contato</a>
        </div>
    </div>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Inline-block tem um probleminha, ele dá uma margem entre os elementos, não sei porque, e não tem como tirar.

Solução: usar [inline]display: block[/inline] + [inline]float:left[/inline]

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito