Menu horizontal algo está errado

[davidpt 0]

Viva,

 

Estou a dar os primeiros passos no XHTML CSS. Já li bastante sobre o assunto e fiz vários exercicios agora estou a passar para a prática. Ando de volta de um site que tem um pouco mais informação que aquela que aprendi.

 

Nas mais de 600 páginas de um livro sobre o assunto xhtml não vinha nada sobre menu horizontal nem vertical. Porém vinha toda a informação sobre listas.

 

Estou com alguns problemas no menú que quero fazer. Este é o resoltado que optive até agora - http://jsfiddle.net/j498eavo/1/

 

Não é bem assim que quero.

 

1º Quero que quero que o menu do lado direito toque no border-left;

 

Um outro erro que reparei que o menu tem é a sua resolução. Se em vez de branco fosse vermeho vocês iriam ver que o menu vermelho é mais pequeno que o retangulo amarelo. Não devia de ser assim, deviam ser ambos do mesmo tamanho. Já tentei de tudo para serem do mesmo tamanho mas nada resultou.

 

Por último queria que o border-left não fosse do tamanho exato do paddding-left. Queria que fosse um pouco mais pequeno.

 

Alguém me consegue ajudar?

 

Obrigado.

[Electronic 124]

 

1º Quero que quero que o menu do lado direito toque no border-left;

 

Não sei o que você quis dizer com isso, mas dei uma mudada no css, veja se é isso:

tinha muita coisa repetida que retirei.

        <style>
            #nav{
                width: 1280px;
                margin-top: 24px;
            }

            #nav ul{
                font-family: globerthin, Verdana, Arial, Geneva, sans-serif;
                font-size: 12px;
                list-style: none;
            }
            #nav ul li{
                display: inline;
                color: black;
                font-weight: bold;
                ;
            }
            #nav a:link{
                border-left: thin gray solid ;
                padding: 25px;
                color: black;
                text-decoration: none;
            }
            #nav a:visited {
                color: black;
            }
            #nav a:hover{
                background-color: #faf6eb;
            }
            #nav a:active{
                text-decoration: underline;
            }    
        </style>

[davidpt 0]

 

 

Não sei o que você quis dizer com isso, mas dei uma mudada no css, veja se é isso:

tinha muita coisa repetida que retirei.

        <style>
            #nav{
                width: 1280px;
                margin-top: 24px;
            }

            #nav ul{
                font-family: globerthin, Verdana, Arial, Geneva, sans-serif;
                font-size: 12px;
                list-style: none;
            }
            #nav ul li{
                display: inline;
                color: black;
                font-weight: bold;
                ;
            }
            #nav a:link{
                border-left: thin gray solid ;
                padding: 25px;
                color: black;
                text-decoration: none;
            }
            #nav a:visited {
                color: black;
            }
            #nav a:hover{
                background-color: #faf6eb;
            }
            #nav a:active{
                text-decoration: underline;
            }    
        </style>

 

 

 

Não sei o que você quis dizer com isso, mas dei uma mudada no css, veja se é isso:

tinha muita coisa repetida que retirei.

        <style>
            #nav{
                width: 1280px;
                margin-top: 24px;
            }

            #nav ul{
                font-family: globerthin, Verdana, Arial, Geneva, sans-serif;
                font-size: 12px;
                list-style: none;
            }
            #nav ul li{
                display: inline;
                color: black;
                font-weight: bold;
                ;
            }
            #nav a:link{
                border-left: thin gray solid ;
                padding: 25px;
                color: black;
                text-decoration: none;
            }
            #nav a:visited {
                color: black;
            }
            #nav a:hover{
                background-color: #faf6eb;
            }
            #nav a:active{
                text-decoration: underline;
            }    
        </style>

Ola,

 

E quase isso... Transcrevendo o seu codigo para o fiddle. Mas colocando ele no site que estou a fazer fica tudo errado...

 

No entanto agradeço a ajuda.

[reebr 94]

Cara, ta meio complicado ler o seu código. Tem várias propriedades "padding" setadas e não consegui identificar como estão sendo aplicadas no html. De qualquer forma, eu editei o css que você passou e ficou assim:

 

http://jsfiddle.net/rnxn/j498eavo/2/

 

Ajuda em algo?

[davidpt 0]

Cara, ta meio complicado ler o seu código. Tem várias propriedades "padding" setadas e não consegui identificar como estão sendo aplicadas no html. De qualquer forma, eu editei o css que você passou e ficou assim:

 

http://jsfiddle.net/rnxn/j498eavo/2/

 

Ajuda em algo?

Sim.

 

Valeu a força :)