locked
[CSS] Visual Studio não aceita id RRS feed

  • Pergunta

  • Fala moçada, tudo tranquilo?
    Trabalho com criação de layout e monto os layout para encaminhar para programação, recentemente fechei uma parceria com uma empresa que só programa em Asp.net.

    Trabalho da seguinte forma, vamos supor que um título eu quero que tenha font-size: 14px, background:#F7F7F7, border, margin, etc... faço o seguinte:

    Na CSS:

    #titulo {
        font-size:14px;
        background:#F7F7F7;
        border-bottom:#ECECEC solid 3px;
        padding-left:7px;
        padding-right:7px;
        padding-top:10px;
        padding-bottom:8px;
        margin-top:20px;
    }

    E no html:

    <div id="titulo">TEXTO</div>

    Até aqui funciona tudo perfeito.

    Acontece que quando os programadores dessa empresa jogam o layout montando no Visual Studio, segundo informações que me passaram, o Visual Studio não lê id , e me falaram pra trocar por class , só que alguma propriedades não são lidas com class.

    Procurei na net um bom tempo antes de postar, não sei se estou procurando de maneira correta, só que não encontrei uma luz.
    Se alguém puder ajudar, fico muito agradecido.

    Desde já agradeço.

    Abraços.
    sexta-feira, 24 de julho de 2009 03:33

Todas as Respostas

  • Troquei uma ideia com um programador que trabalha com Asp.net e pelo que entendi o VS  as pode entender o id como prefixo e podendo gerar conflito com consulta ao banco de dados. Após analisar alguns sites em aspx através do Firebug, cheguei a seguinte conclusão:

    Quando se trata de estrutura do layout, usa-se id (div id="nomedadiv"), já em um campo que irá fazer uma consulta ao banco de dados, como por exemplo, uma seção de depoimentos, usa-se class (div class="nomedadivclass).

    Abraços.
    • Sugerido como Resposta Lets Carvalho sábado, 25 de julho de 2009 13:15
    sexta-feira, 24 de julho de 2009 19:45
  • Oi Cazper,

    Fiz uma postagem ontem no setor ASP.NET e tive um atendimento nota 10. Verifique em: Aplicando CSS em ASP.NET

    Minha dúvida foi sanada quando realmente inclui a classe CssClass junto ao componente asp: Label, tendo sido reconhecido de pronto pelos browsers (IE8, Firefox, Chrome e Safari).

    Passo o código na esperança que realmente te ajude.

        <style type="text/css">
            /* Esta regra transforma os elementos em nível de bloco e faz com que sejam renderizados um embaixo do outro.*/
            .label {display:block;}
            
            form#contato {width: 400px;}
            form#contato input {width: 250px;}
            form#contato input#txtddd {width: 30px;}
            form#contato input#txttelefone {width: 210px;}
            form#contato input#btnenviar{width: auto;}
            
            form#contato #txtmensagem {width: 380px; height: 140px;}
            
            form#contato #ddd-telefone {width: 254px;}
            form#contato #um{float: left;}
            form#contato #dois{float: right;}    
            
            form#contato .label{margin-top: 10px;}
            form#contato #ddlassunto {margin-top: 25px;}
            form#contato #btnenviar {margin-top: 10px;}
            form#contato #um, #dois {margin-top: 10px;}   
            
            form#contato #fieldset
            {
            	padding: 10px 25px;
            	border: 10px;
            	border-top: 1px solid #ccc;
            	border-left: 1px solid #ccc;
            }
            form#contato #legend
            {
            	padding: 1px 10px;
            	border: 1px solid #ccc;
            }
           
        </style>
    
            <form id="contato" runat="server">
                <fieldset id="fieldset">
                    <legend id="legend">Contato</legend>
                        <asp:Label ID="lblnome" CssClass="label" runat="server">Nome: (<span>*</span>)</asp:Label>
                        <asp:TextBox ID="txtnome" runat="server"></asp:TextBox>
                        <asp:Label ID="lblemail" CssClass="label" runat="server">Email: (<span>*</span>)</asp:Label>
                        <asp:TextBox ID="txtemail" runat="server"></asp:TextBox>
                        <asp:Label ID="lblempresa" CssClass="label" runat="server">Empresa: (<span>*</span>)</asp:Label>
                        <asp:TextBox ID="txtempresa" runat="server"></asp:TextBox>
                    <div id="ddd-telefone">
                        <p ID="um">
                            <asp:Label ID="lblddd" CssClass="label" runat="server">DDD:</asp:Label>
                            <asp:TextBox ID="txtddd" runat="server"></asp:TextBox>
                        </p>
                        <p ID="dois">
                            <asp:Label ID="lbltelefone" CssClass="label" runat="server">Telefone:</asp:Label>
                            <asp:TextBox ID="txttelefone" runat="server"></asp:TextBox>
                        </p>
                    </div>
                        <asp:Label ID="lblassunto" CssClass="label" runat="server">Assunto: (<span>*</span>)</asp:Label>
                    <asp:DropDownList ID="ddlassunto" runat="server">
                        <asp:ListItem>Escolha um assunto</asp:ListItem>
                        <asp:ListItem>Comercial</asp:ListItem>
                        <asp:ListItem>Tecnico</asp:ListItem>
                        <asp:ListItem>Financeiro</asp:ListItem>
                        <asp:ListItem>Outros</asp:ListItem>
                    </asp:DropDownList>
                    <asp:Label ID="lblmensagem" CssClass="label" runat="server">Mensagem: (<span>*</span>)</asp:Label>
                    <asp:TextBox ID="txtmensagem" runat="server" TextMode="MultiLine"></asp:TextBox>
                    <asp:Button ID="btnenviar" runat="server" Text="Enviar" />
                </fieldset>
            </form>
    

    Espero ter te ajudado,

    Leticia
    sábado, 25 de julho de 2009 13:24
  • Valeuuu Lets.
    Como não sou programador, estou buscando alteranativas para melhor me entender com os programadores em Asp.net. Pois até então, só tinha trabalhado com parceiros que programam em PHP, e com PHP, não há nenhum problema com a CSS.

    Mas minha dúvida é a seguinte, a informação passada pelos programadores procede, visual studio realmente não aceita id? Ou há uma maneira deles trabalharem da maneira que monto o CSS? Se essa informação for verdadeira, o que tenho que mudar na minha maneira de trabalhar?

    Desde já agradeço a atenção. Obrigado!

    Abraços.
    sábado, 25 de julho de 2009 18:47
  •  Os controles Asp.net  trabalham com propriedades (prog. orientada a objetos), ex.: maxlenght, text, value, etc. Entre estas propriedades existe CssClass citada mas , até onde tenho conhecimento, não existe uma propriedade correspondente ao Id. Para utilizarem Id teriam que colocar um javascript embutido no código fonte usado (normalmente escrito em vb.net ou c#) o que daria muito mais trabalho pro programador.
    Por isso aconselho a continuar informando suas regras css em classes.

    Abraços

    segunda-feira, 1 de fevereiro de 2010 01:22
  • Não sei se é exclusivo do VS, mas para "entender" o css associando a um id, troque a declação da classe css de "#" para "."

    Então ficaria assim:
    .titulo {
        font-size:14px;
        background:#F7F7F7;
        border-bottom:#ECECEC solid 3px;
        padding-left:7px;
        padding-right:7px;
        padding-top:10px;
        padding-bottom:8px;
        margin-top:20px;
    }


    Não entendo muito de css, mas isso (costuma) funcionar
    quarta-feira, 3 de fevereiro de 2010 12:57
  • Vamos supor que tenha um layout deste maneira no html...

    <div id="container">
    <div id="menu">
    Aqui um controle de menu em asp.net
    </div>
    </div>
    Se onde está o texto fosse trocar por um controle e o mesmo se chamasse menu também pelo asp.net ainda assim acho que por questões de compatibilitade o identificador ficaria como ct100_menu ao invé de menu, não atrapalhando a sua div principal... e assim podendo utilizar a #id para o div especifico...

    Agora, ao colocar diretamente num controle, o melhor mesmo é usando classes de css e trabalhando com seus pai-filhos apartir dali... (uma lista não ordenada por exemplo).

    A diferença principal do PHP para o .NET (venho de migração também) é que no .NET são utilizados controles com identificadores únicos e que no PHP já não tem já que normalmente trabalhamos em cima de tags html, tipo ao fazer um loop numa tabela trabalhamos em cima de tr e tds, já no .NET um GridView o programador irá trabalhar nos eventos/classes deste controle que após processados será mostrado uma tabela no navegador. Aí é só configurar as classes de css para cada parte deste controle (cabeçalho da tabela etc...).

    Ao invés de #menu table tr th ficaria .cabecalho e ao invé de #menu ul li fica .menu ul.AspNet-Menu se for usando CSSAdapters no código para chegar mais próximo dos WebStandards.

    Dá uma olhada no GridView deste WhitePaper dos CSSAdapters, ali tem já as classes que serão utilizadas para cada parte do controle, hover etc...
    http://www.asp.net/CSSAdapters/WhitePaper.aspx
    segunda-feira, 8 de fevereiro de 2010 03:42
  • Cazper,

    Isso acontece devido o NamingContainer dar ID's diferentes aos componentes


    Vencer, vencer e vencer...
    terça-feira, 27 de abril de 2010 01:16
  • Valeu moçada. Já passou algum tempo após minha postagem e muita coisa já está bem clara pra mim.

    Obrigado!

    quarta-feira, 28 de abril de 2010 04:49