Publicado em 3 de nov.

Ideia de como fazer um modelo de menu

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">](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>

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<html xmlns="[http://www.w3.org/1999/xhtml">](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; }

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">Menu1</li> <li class="menu">Menu2</li> <li class="menu">Menu3</li> <li class="menu">Menu4</li> <li class="menu">Menu5</li> <li class="menu">Menu6</li> <li class="menu">Menu7</li> <li class="menu">Menu8</li> </ul> </div> <div id="conteudo" style="display: table-cell; width: 76%; margin: 3px; border: 1px solid #A8B3C2; border-left: none; background-color: #F0F0F0;"> </div> </div> </body> </html>