Ir para conteúdo
Fórum Script Brasil
  • 0

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


rafaeldorazio

Pergunta

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>

Link para o comentário
Compartilhar em outros sites

18 respostass a esta questão

Posts Recomendados

  • 0

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.

Link para o comentário
Compartilhar em outros sites

  • 0

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

</div>

</div>

</body>

</html>

Editado por rafaeldorazio
Link para o comentário
Compartilhar em outros sites

  • 0

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>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...