Estilizar um Menu

[Cintia_Ribeiro 0]

Galera tenho um menu com a seguinte estrutura:

 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentMenu" Runat="Server">  

<div id = "DivMenu">
   <asp:Menu ID="Menu" runat="server">
       <Items>
           <asp:MenuItem Text="Polo" Value="Polo">
               <asp:MenuItem Text="Polo1" Value="Polo1" NavigateUrl="~/login.aspx"></asp:MenuItem>
               <asp:MenuItem Text="Polo2" Value="Polo2"></asp:MenuItem>
           </asp:MenuItem>
           <asp:MenuItem Text="Curso" Value="Curso">
               <asp:MenuItem Text="Curso1" Value="Curso1"></asp:MenuItem>
               <asp:MenuItem Text="Curso2" Value="Curso2"></asp:MenuItem>
           </asp:MenuItem>
           <asp:MenuItem Text="Disciplina" Value="Disciplina">
               <asp:MenuItem Text="Disciplina1" Value="Disciplina1"></asp:MenuItem>
               <asp:MenuItem Text="Disciplina2" Value="Disciplina2"></asp:MenuItem>
           </asp:MenuItem>
           <asp:MenuItem Text="Endereço" Value="Endereço">
               <asp:MenuItem Text="Endereço1" Value="Endereço1"></asp:MenuItem>
               <asp:MenuItem Text="Endereço2" Value="Endereço2"></asp:MenuItem>
           </asp:MenuItem>
           <asp:MenuItem Text="Prova" Value="Prova"></asp:MenuItem>
           <asp:MenuItem Text="Etiqueta" Value="Etiqueta"></asp:MenuItem>
       </Items>
   </asp:Menu>
   </div>                                    
</asp:Content>

 

Estou tentando estilizar este Menu e não consigo. Quando defino algum estilo para a div funciona, mas quando defino para os itens do menu nada acontece.

Como posso estilizar os itens do menu. Informando que estou utilizando um arquivo css separado

[Evandro Oliveira 331]

Verifique na marcação GERADA as tags que foram produzidas e estilize pensando nelas, não no esquema projetado para o servidor. É algo semelhante a fazer a marcação no Dreamweaver e testar no modo visual, assim como ninguém navega pelo navegador do Dreamweaver, ninguém recebe o XSLT produzido, mas sim o arquivo processado.

[Cintia_Ribeiro 0]

Verifique na marcação GERADA as tags que foram produzidas e estilize pensando nelas, não no esquema projetado para o servidor. É algo semelhante a fazer a marcação no Dreamweaver e testar no modo visual, assim como ninguém navega pelo navegador do Dreamweaver, ninguém recebe o XSLT produzido, mas sim o arquivo processado.

 

Desisti de usar o menu desta forma e agora estou usando listas e estilizei e ficou tudo funcionando direitinho, mas bastou eu usar o runat=server que todo o estilo desapareceu. Existe uma forma especifica para utilizar css nos elementos com runat=server?

[Evandro Oliveira 331]

veja bem: runat=server

 

CSS é uma linguagem que precisa ser interpretada pelo navegador. E quem possui navegador é o cliente, não o servidor. A resposta é simples, não.

[Cintia_Ribeiro 0]

Sim, resposta simples, mas continuo sem saber como vou estilizar este menu

[William Bruno 1501]

aperte Ctrl+U (Exibir > Código Fonte)

 

e poste aqui o html gerado, você vai estilizar com base nele.

[Cintia_Ribeiro 0]

Poh, a minha dúvida é como estilizar componentes do tipo:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentMenu" Runat="Server">  

<div id = "DivMenu">
   <asp:Menu ID="Menu" runat="server">
       <Items>
           <asp:MenuItem Text="Polo" Value="Polo">
               <asp:MenuItem Text="Polo1" Value="Polo1" NavigateUrl="~/login.aspx"></asp:MenuItem>
               <asp:MenuItem Text="Polo2" Value="Polo2"></asp:MenuItem>
           </asp:MenuItem>
           <asp:MenuItem Text="Curso" Value="Curso">
               <asp:MenuItem Text="Curso1" Value="Curso1"></asp:MenuItem>
               <asp:MenuItem Text="Curso2" Value="Curso2"></asp:MenuItem>
           </asp:MenuItem>
           <asp:MenuItem Text="Disciplina" Value="Disciplina">
               <asp:MenuItem Text="Disciplina1" Value="Disciplina1"></asp:MenuItem>
               <asp:MenuItem Text="Disciplina2" Value="Disciplina2"></asp:MenuItem>
           </asp:MenuItem>
           <asp:MenuItem Text="Endereço" Value="Endereço">
               <asp:MenuItem Text="Endereço1" Value="Endereço1"></asp:MenuItem>
               <asp:MenuItem Text="Endereço2" Value="Endereço2"></asp:MenuItem>
           </asp:MenuItem>
           <asp:MenuItem Text="Prova" Value="Prova"></asp:MenuItem>
           <asp:MenuItem Text="Etiqueta" Value="Etiqueta"></asp:MenuItem>
       </Items>
   </asp:Menu>
   </div>                                    
</asp:Content>

 

Quero estilizar esse menu e não sei como faço, sei como estilizar usando htlm puro

[William Bruno 1501]

use o Responder Azul:

ou a 'Resposta Rápida'.

 

faça oque eu disse acima, e poste aqui o que eu pedi.

 

Sem isso, fica impossível lhe ajudar.

[Cintia_Ribeiro 0]

Ai está o código gerado

 

 

 

 

 

 

<!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>
Untitled Page
</title>
<link rel="Stylesheet" type="text/css" href="App_Themes/Estilos/Estilo_master.css" /><style type="text/css">
.ctl00_ContentMenu_Menu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_ContentMenu_Menu_1 { text-decoration:none; }
.ctl00_ContentMenu_Menu_2 {  }
</style></head>

<body>
   <form name="aspnetForm" method="post" action="Default3.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjU3NzU0NzY1ZGTIC0HGnFJxa52TrY0xHiRPLZQfJQ==" />
</div>

<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwLRwZzaAgK/n8faCgKhg/22BAL39MCjBgKOjdadAQKwxoLhBAKT6JaQCAptE19cxAYmpPV/u8HrkdyFrlVH" />
</div>
   <div id = "Principal">
       <div id = "Topo">
            <div id = "Logo"> <img src ="Img/Topo_Master.jpg"  />   </div>             
       </div>
         <div id = "ContMenu">
   <div id = "DivMenu">
   <a href="#ctl00_ContentMenu_Menu_SkipLink" style="display:inline-block;height:1px;width:1px;"><img src="/CEDERJ/WebResource.axd?d=HEldKqrzAVwFvshRw-W2QoYaOLOHctgPDCUJGMq-AIlbCbpQu1u0TNFob5j4GEDNEG_CNmw4mjIClE8SA8YaRcu6OmQ1&t=634237245950156250" alt="Pular Links de Navegação" style="border-width:0px;" /></a><div id="ctl00_ContentMenu_Menu">
<span><a class="ctl00_ContentMenu_Menu_1" href="javascript:__doPostBack('ctl00$ContentMenu$Menu','oPolo')">Polo<img src="/CEDERJ/WebResource.axd?d=Xehw7DxatugRXClHdI6db3GivxxmT2RCi451S_5COB0qWfj4zZ6t7sbTBLQJYpgSoA6F-nHG_hD_kueDC_y0w91RZpE1&t=634237245950156250" alt="Expandir Polo" align="absmiddle" style="border-width:0px;" /></a></span><br /><span><a class="ctl00_ContentMenu_Menu_1" href="javascript:__doPostBack('ctl00$ContentMenu$Menu','oCurso')">Curso<img src="/CEDERJ/WebResource.axd?d=Xehw7DxatugRXClHdI6db3GivxxmT2RCi451S_5COB0qWfj4zZ6t7sbTBLQJYpgSoA6F-nHG_hD_kueDC_y0w91RZpE1&t=634237245950156250" alt="Expandir Curso" align="absmiddle" style="border-width:0px;" /></a></span><br /><span><a class="ctl00_ContentMenu_Menu_1" href="javascript:__doPostBack('ctl00$ContentMenu$Menu','oDisciplina')">Disciplina<img src="/CEDERJ/WebResource.axd?d=Xehw7DxatugRXClHdI6db3GivxxmT2RCi451S_5COB0qWfj4zZ6t7sbTBLQJYpgSoA6F-nHG_hD_kueDC_y0w91RZpE1&t=634237245950156250" alt="Expandir Disciplina" align="absmiddle" style="border-width:0px;" /></a></span><br /><span><a class="ctl00_ContentMenu_Menu_1" href="javascript:__doPostBack('ctl00$ContentMenu$Menu','oEndereço')">Endereço<img src="/CEDERJ/WebResource.axd?d=Xehw7DxatugRXClHdI6db3GivxxmT2RCi451S_5COB0qWfj4zZ6t7sbTBLQJYpgSoA6F-nHG_hD_kueDC_y0w91RZpE1&t=634237245950156250" alt="Expandir Endereço" align="absmiddle" style="border-width:0px;" /></a></span><br /><span><a class="ctl00_ContentMenu_Menu_1" href="javascript:__doPostBack('ctl00$ContentMenu$Menu','bProva')">Prova</a></span><br /><span><a class="ctl00_ContentMenu_Menu_1" href="javascript:__doPostBack('ctl00$ContentMenu$Menu','bEtiqueta')">Etiqueta</a></span><br />
</div><a name="ctl00_ContentMenu_Menu_SkipLink"></a>
   </div>              
       </div>
       <div id = "ContConteudo">
       </div>
   </div>
   <div id= "Rodape">CECIERJ/Cederj - Sistema de Controle de Prova</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
   theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
   if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
       theForm.__EVENTTARGET.value = eventTarget;
       theForm.__EVENTARGUMENT.value = eventArgument;
       theForm.submit();
   }
}
//]]>
</script>
</form>
</body>
</html>