Aug 09

Diversas vezes precisamos alterar a distância ou a formatação do texto de um CheckBox e nao sabemos por onde começar a aplicar a CSS.

Primeiro devemos saber que um CheckBox

<asp:CheckBox ID=”CheckBox1″ Text=”Texto do CheckBox” runat=”server” />

Renderiza

<input id=”CheckBox1″ type=”checkbox” name=”CheckBox1″/>

<label for=”CheckBox1″>Texto do CheckBox</label>

Só que ao aplicar um estilo para o CheckBox:

<asp:CheckBox ID=”CheckBox1″ Text=”Texto do CheckBox” CssClass=”Style01″ runat=”server” />

Renderiza

<span class=”Style01″>

<input id=”CheckBox1″ type=”checkbox” name=”CheckBox1″/>

<label for=”CheckBox1″>Texto do CheckBox</label>

</span>

Criamos o estilo e acessamos o texto por herança:

.Style01 label

{

margin-left:40px;

color:Red;

}

e o resultado será:

check

<span class=”Style01″>

<input id=”CheckBox1″ type=”checkbox” name=”CheckBox1″/>

<label for=”CheckBox1″>Texto do CheckBox</label>

</span>

Obrigado,

Rodolfo

Aug 09

Em diversas situações temos que adequar os elementos da pagina que estamos desenvolvendo ao layout que foi especificado, so que em alguns controles asp.net não fica claro como deve ser feita a aplicação do estilo para obter o efeito necessário. Ou então não sabemos ao certo que controle utilizar em cada situação

Para isso é essencial sabermos o qua cada controle renderiza na tela.

Vamos começar por dois controles muito utilizados, aparentemente com mesma função mais cada um com uma funcionalidade e comportamento diferente.

Label e Literal:

Label:

<asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>

Renderização Pagina:

<span id=”Label1″>Label</span>

Literal

<asp:Literal ID=”Literal1″ runat=”server” Text=”Literal1″></asp:Literal>

Renderização Pagina:

Literal1
Aplicando estilos:

Em um Label podemos adicionar a cssClass diretamente no controle:

<asp:Label ID=”Label1″ runat=”server” CssClass=”style01“  Text=”Label”></asp:Label>

Será renderizado

<span id=”Label1″ class=”style01″>Label</span>

Já em um literal para obter o mesmo efeito será necessário colocar o controle Literal dentro de uma tag span com o estilo associado

<span class=”style02″>
<asp:Literal ID=”Literal1″ runat=”server” Text=”Literal1″></asp:Literal>
</span>

Será renderizado

<span class=”style02“> Literal1 </span>

Com isso o literal é mais indicado para quando se vai “escrever” html na pagina, como ao trazer um texto com formatação html de um Banco de Dados. Intuitivamente um label deve ser utilizado quando o texto precisar de uma formatação ou for necessário o texto estar dentro de uma tag span.

Obrigado

Rodolfo

*fonte(Taurã Figueiredo, a quem sempre me faz “pensar sobre o que eu estou programando”)

Aug 09

Em diversas situações temos que adequar os elementos da pagina que estamos desenvolvendo ao layout que foi especificado, so que em alguns controles asp.net não fica claro como deve ser feita a aplicação do estilo para obter o efeito necessário. Ou então não sabemos ao certo que controle utilizar em cada situação

Para isso é essencial sabermos o qua cada controle renderiza na tela.

Vamos começar por dois controles muito utilizados, aparentemente com mesma função mais cada um com uma funcionalidade e comportamento diferente.

Label e Literal:

Label:

<asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>

Renderização Pagina:

<span id=”Label1″>Label</span>

Literal

<asp:Literal ID=”Literal1″ runat=”server” Text=”Literal1″></asp:Literal>

Renderização Pagina:

Literal1
Aplicando estilos:

Em um Label podemos adicionar a cssClass diretamente no controle:

<asp:Label ID=”Label1″ runat=”server” CssClass=”style01“  Text=”Label”></asp:Label>

Será renderizado

<span id=”Label1″ class=”style01″>Label</span>

Já em um literal para obter o mesmo efeito será necessário colocar o controle Literal dentro de uma tag span com o estilo associado

<span class=”style02″>
<asp:Literal ID=”Literal1″ runat=”server” Text=”Literal1″></asp:Literal>
</span>

Será renderizado

<span class=”style02“> Literal1 </span>

Com isso o literal é mais indicado para quando se vai “escrever” html na pagina, como ao trazer um texto com formatação html de um Banco de Dados. Intuitivamente um label deve ser utilizado quando o texto precisar de uma formatação ou for necessário o texto estar dentro de uma tag span.

Obrigado

Rodolfo

*fonte(Taurã Figueiredo, a quem sempre me faz “pensar sobre o que eu estou programando”)