(Resolvido) Estou com um problema ao criar o menu e o conteudo

rafaeldorazio · Novembro 3, 2010

Hoje está assim :

http://img294.imageshack.us/f/13007521.jpg/

Como eu faço para que o menu fique assim ?

http://img215.imageshack.us/img215/6691/94534903.jpg

<!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>
    <title></title>

    <style type="text/css">
    
        li{ list-style: none; }

        #geral { width: 100%; padding: 3px 2px 3px 0px; border: 1px solid #A8B3C2; background-color: #E5E7EA; display: table; }
        #menu {  width: 24%; margin:0 auto; padding:0 auto;  }

/********************* MENU *********************/           
        
        li.menu
        {
            list-style: none;   
            height: 35px;
            background-color: #E5E7EA;
            border-left: 1px solid #A8B3C2;
            border-right: 1px solid #A8B3C2;
            border-bottom: 1px solid #DEE1E7;
            font-family: Verdana;
            font-size: 12px;
        }

        
        li.selected
        {
            background-image: url('selected_left.png');
            background-repeat: no-repeat;
            background-position: top left;
            height: 35px;
            background-color: #F0F0F0;
            border-top: 1px solid #A8B3C2;
            border-bottom: 1px solid #A8B3C2;
            font-family: Verdana;
            font-size: 12px;
            font-weight: bold;
        }

        
        span.link
        {
            line-height: 35px;
            margin: 0 20px 0 20px;        
        }
   
    
    </style>

</head>
<body>
    
    <div id="geral">
        <div id="menu" style="display: table-cell;">
            <ul class="teste" style="margin: 0 auto; margin-left: -38px;">
                <li class="selected"><span class="link">Menu1</span></li>
                <li class="menu"><span class="link">Menu2</span></li>
                <li class="menu"><span class="link">Menu3</span></li>
                <li class="menu"><span class="link">Menu4</span></li>
                <li class="menu"><span class="link">Menu5</span></li>
                <li class="menu"><span class="link">Menu6</span></li>
                <li class="menu"><span class="link">Menu7</span></li>
                <li class="menu"><span class="link">Menu8</span></li>
            </ul>
        </div>
        
        <div id="conteudo" style="display: table-cell; width: 76%;  margin: 3px; border: 1px solid #A8B3C2; border-left: none; background-color: #F0F0F0;">
            
                <br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </div>
</body>
</html>

_Vinny_ · Novembro 3, 2010

Interessante... pois o menu e o conteúdo estão dentro do mesmo elemento que é #geral, assim como você quer ter o menu sem aquele área se ela existe?

O que você pode fazer e colocar o menu fora da div #geral e alinhar as divs para esquerda e direita usando float.

rafaeldorazio · Novembro 3, 2010

então, hoje a tarde tive essa ideia mas não consegui, ficou uma melaca.

Sei que é chato, mas teria como dar uma luz ?

_Vinny_ · Novembro 4, 2010

Joga a div com o menu:

<div id="menu" style="display: table-cell;">
            <ul class="teste" style="margin: 0 auto; margin-left: -38px;">
                <li class="selected"><span class="link">Menu1</span></li>
                <li class="menu"><span class="link">Menu2</span></li>
                <li class="menu"><span class="link">Menu3</span></li>
                <li class="menu"><span class="link">Menu4</span></li>
                <li class="menu"><span class="link">Menu5</span></li>
                <li class="menu"><span class="link">Menu6</span></li>
                <li class="menu"><span class="link">Menu7</span></li>
                <li class="menu"><span class="link">Menu8</span></li>
            </ul>
        </div>

Para fora da div geral.

Adicione float: left em #menu e float: right em #geral.

rafaeldorazio · Novembro 4, 2010

eu tenho a div Menu e a Conteudo, elas são divididas por uma borda. Porem o menu selecionado ele não tem a borda direita.

Existe algum modo pra que eu faça um sobreposição da imagem de fundo na borda ?

_Vinny_ · Novembro 4, 2010

Posta como esta atualmente o seu codigo.

Editado Novembro 4, 2010 por _Vinny_

rafaeldorazio · Novembro 4, 2010

<!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>
    <title></title>

    <style type="text/css">
    
        li{ list-style: none; }

        #geral { width: 100%; margin:0 auto; padding: 7px 4px 7px 0px; display: table; border: 1px solid #A8B3C2; background-color: #E5E7EA;  }
        #menu {  
            float:left;
            display:inline; /*Para exibição no IE*/
            margin:0;
            height: 100%;
            width: 15%;
        }

        #conteudo {  
            float:left;
            display:inline; /*Para exibição no IE*/
            margin: 0;
            height: 100%;
            width: 84.9%;
            border: 1px solid #A8B3C2; 
            border-left: none; 
            background-color: #F0F0F0;
            margin-left: -2px;     
        }

/********************* MENU *********************/           
        
        li.menu
        {
            list-style: none;   
            /*background-color: #E5E7EA;
            border-left: 1px solid #A8B3C2;
            border-right: 1px solid #A8B3C2;
            border-bottom: 1px solid #DEE1E7;*/
            font-family: Verdana;
            font-size: 12px;
            background-image: url('fundo_menu.png');
            background-position: top left;
        }

        
        li.selected
        {
            background-image: url('fundo_selected.png');
            background-repeat: no-repeat;
            background-position: top 100% -100%;
            z-index: 10;
            height: 33px;
            /*background-color: #F0F0F0;*/
            font-family: Verdana;
            font-size: 12px;
            font-weight: bold;
        }

        
        span.link
        {
            line-height: 33px;
            margin: 0 20px 0 20px;        
        }
   
    
    </style>

</head>
<body>
    
    <div id="geral">
    
        <div id="menu">
        
            <ul style="margin: 0 auto; margin-left: -40px;">
                <li class="selected"><span class="link">Menu1</span></li>
                <li class="menu"><span class="link">Menu2</span></li>
                <li class="menu"><span class="link">Menu3</span></li>
                <li class="menu"><span class="link">Menu4</span></li>
                <li class="menu"><span class="link">Menu5</span></li>
                <li class="menu"><span class="link">Menu6</span></li>
                <li class="menu"><span class="link">Menu7</span></li>
                <li class="menu"><span class="link">Menu8</span></li>
            </ul>

        
        </div>

        <div id="conteudo">
           <div style="margin: 15px 35px 15px 35px;"> Testando o texto<br />Testando o texto<br />Testando o texto<br />
                Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br />
                Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br />
                Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br />
                Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o

texto<br />

</div>

</body>

</html>

Editado Novembro 4, 2010 por rafaeldorazio

Ricardo - PTR · Novembro 4, 2010

você pode tirar a altura 100% do menu e deixar uma altura fixa.

do jeito que tá ele vai estica de acordo com a página.

Editado Novembro 4, 2010 por Ricardo - PTR

rafaeldorazio · Novembro 4, 2010

Consegui arrumar o meu problema, porem quando eu mudo a resolução do windows fica zuado.

<!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>
    <title></title>

    <style type="text/css">
    
        li{ list-style: none; }

        #geral { width: 100%; margin:0 auto; padding: 7px 4px 7px 0px; display: table; border: 1px 

solid #A8B3C2; background-color: #E5E7EA;  }
        #menu {  
            float:left;
            display:inline; /*Para exibição no IE*/
            margin:0 auto;
            height: 100%;
            width: 14.7%;
        }

        #conteudo {  
            float:left;
            display:inline; /*Para exibição no IE*/
            margin: 0;
            height: 100%;
            width: 84.9%;
            border: 1px solid #A8B3C2; 
            /*border-left: none;*/
            background-color: #F0F0F0;
        }

/********************* MENU *********************/           
        
        li.menu
        {
            list-style: none;   
            /*background-color: #E5E7EA;
            border-left: 1px solid #A8B3C2;
            border-right: 1px solid #A8B3C2;
            border-bottom: 1px solid #DEE1E7;*/
            font-family: Verdana;
            font-size: 12px;
            background-image: url('fundo_menu.png');
            background-position: top left;
            margin-left: 0px;
        }

        
        li.selected
        {
            background-image: url('fundo_selected.png');
            background-repeat: no-repeat;
            background-position: top left;
            z-index: 10;
            height: 33px;
            /*background-color: #F0F0F0;*/
            font-family: Verdana;
            font-size: 12px;
            font-weight: bold;            
            margin-left: -7px;   
            position: absolute;
            width: 100%;
        }

        
        span.link
        {
            line-height: 33px;
            margin: 0 20px 0 20px;        
        }
   
    
    </style>

</head>
<body>
    
    <div id="geral">
    
        <div id="menu">
        
            <ul style="margin: 0 auto; padding:0 auto; margin-left: -40px;">
                <li class="selected"><span class="link">Menu1</span></li>
                <li class="menu"><span class="link">Menu2</span></li>
                <li class="menu"><span class="link">Menu3</span></li>
                <li class="menu"><span class="link">Menu4</span></li>
                <li class="menu"><span class="link">Menu5</span></li>
                <li class="menu"><span class="link">Menu6</span></li>
                <li class="menu"><span class="link">Menu7</span></li>
                <li class="menu"><span class="link">Menu8</span></li>
            </ul>

        
        </div>

        <div id="conteudo">
           <div style="margin: 15px 35px 15px 35px;"> Testando o texto<br />Testando o texto<br 

/>Testando o texto<br />
                Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br 

/>Testando o texto<br />
                Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br 

/>Testando o texto<br />
                Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br 

/>Testando o texto<br />
                Testando o texto<br />Testando o texto<br />Testando o texto<br />Testando o texto<br 

/>Testando o texto<br />                
            </div>
        </div>
    
    </div>

</body>
</html>

Ricardo - PTR · Novembro 4, 2010

tira o position: absolute; do li.selected

rafaeldorazio · Novembro 4, 2010

é que se eu tirar essa position: Absolute, a minha imagem não vai sobrepor a borda do id="conteudo".

alguém tem alguma ideia de como sobrepor essa borda esquerda do id="conteudo" ?

Detalhe essa sobreposição tem que ser apenas no li.selected .

Ricardo - PTR · Novembro 4, 2010

desculpe mais não entendi o que você quuer fazer então :huh:

visualizando no ff e no ie, o li.selected sempre fica na mesma posição (com ou sem o position).

a única coisa que muda é que ao tirar o position, o menu abaixo dele pula uma linha (o que não ocorre com o position:absolute)

rafaeldorazio · Novembro 4, 2010

O que acontece é que a imagem ela tem borda top e bottom. E quando a resolução fica abaixo dos 1280, a borda da imagem invade o id conteudo !

Ricardo - PTR · Novembro 4, 2010

não é possivel inserir esta borda direto no li em vez de deixar na imagem?

rafaeldorazio · Novembro 4, 2010

rsrs vou tentar aqui, inicialmente eu tinha feito assim mas resolvi mudar XD

Vou testar a sua ideia .

rafaeldorazio · Novembro 4, 2010

acho que eu consegui fazer com que o layout se adeque com a resolução.

Agora o que falta é fazer a parte de baixo do menu que fica sem nada. Irei pensar em algo.

Obrigado Ricardo pela ideia

Ricardo - PTR · Novembro 4, 2010

não foi grande coisa mais, tamo ae pra se ajuda =D

boa sort ^^

rafaeldorazio · Novembro 4, 2010

Com mais calma em casa eu analisei e usei um comando que ajeitou tudo XD não precisei usar a borda mas vlw a ajuda.

_Vinny_ · Novembro 4, 2010

@rafaeldorazio

Poderia postar como resolveu o problema?

Entrar

(Resolvido) Estou com um problema ao criar o menu e o conteudo

Pergunta

Link para o comentário

Compartilhar em outros sites

18 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns