Ir para conteúdo

POWERED BY:

Arquivado

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

rafaeldorazio

Ideia de como fazer um modelo de menu

Por , em Desenvolvimento frontend

Recommended Posts

rafaeldorazio    2

rafaeldorazio
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Buzzo    0

André Buzzo
Postado

Fala Compadre!!!

 

Seguinte...na sua div "#menu", coloque as seguintes linhas CSS:

 

float:left;
display:inline /*Para exibição no IE*/
margin:0;
height:quantidade-de-pixels-que-precisar;

É para funcionar legal.

 

Se não rolar do jeito que precisa, procure algo sobre Position Relative e Absolute, assim como trabalhar com Z-Index, para sobrepor uma div em cima da outra.

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafaeldorazio    2

rafaeldorazio
Postado

André , a div Conteudo nao tem nenhum texto, e ela está com a largura bem pequena.

COmo eu resolvo esse problema ?

 

Detalhe, se eu retirar os brs a div geral ela vai vai ocupar todo o espaço atras das divs

 

<!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;  }
        #menu {  
		float:left;
		display:inline; /*Para exibição no IE*/
		margin:0;
		height: 100%;
		width: 24%;
	}

/********************* 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">
            <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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Buzzo    0

André Buzzo
Postado

Fala Compadre!!

 

Aí depende...eu acho que ela está se apresentando com pouca largura porque você definiu o width dele como 100%.....

 

Ou você está dizendo que o problema é o menu "tomando conta" de uma parte do seu layout?

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafaeldorazio    2

rafaeldorazio
Postado

Fala Compadre!!

 

Aí depende...eu acho que ela está se apresentando com pouca largura porque você definiu o width dele como 100%.....

 

 

isso mesmo. Nao teria como definir uma largura em porcentagem, sendo que nao havendo conteudo ele fique com essa porcentagem ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Buzzo    0

André Buzzo
Postado

Na realidade não...rs......

 

O que você poderia fazer é "projetá-lo" para uma tela já definidade...no caso, você deve "subtrair" 40px para não dar barra vertical de rolagem...por exemplo:

 

Se a resolução for de 800x600, o correto é um width de 760px;

 

Se for 1024x768, o correto é width de 984px....

 

E assim por diante....

 

Abraços!

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