#content e .content

[Tsubaru 1]

Se eu uso o padding do #content, ele afeta tudo, até background.

Pra evitar isso, crio um .content pro texto.

 

Até aí, sem problemas.

 

O que eu quero saber é se dá pra declarar as duas coisa de uma vez só.

 

<div id="content" class="content">texto</div>

Isso não funciona.

 

<div id="content"><div class="content">texto</div></div>

Mas isso sim.

 

É isso mesmo?

Não tem como resolver tudo em uma única declaração div?

[Guilherme Rambo 4]

Desculpe, mas eu não entendi muito bem sua dúvida, já li varias vezes e ainda não entendi o que você quer...

Tem como explicar melhor?

 

[]'s

[webflex 0]

Olá,

 

Sim dá para jogar com a class e com o id ao mesmo tempo. Agora as propriedades é que não podem ser as mesmas.

 

CUmps \o/

[Tsubaru 1]

#INSIDE#

 

Estava me referindo ao estilo de id(#) e ao estilo de class(.).

Faz sentido? :mellow:

Por exemplo:

 

#content, você põe a largura, altura, fundo e etc.

.content, você diz como o texto vai se comportar, tipo caixa alta, cor, posição e etc.

 

 

Olá,

 

Sim dá para jogar com a class e com o id ao mesmo tempo. Agora as propriedades é que não podem ser as mesmas.

 

CUmps \o/

Pois é, eu sei que posso jogar um color no id, que funciona no texto, mas se eu quiser usar paddings independentes, tenho que criar um class pra esse div.

O "problema é na hora de declarar. Se desse pra declarar os dois em uma tag só, seria mais fácil em caso de edições futuras, mas já vi que não tem jeito.

 

Tive que contornar com class universal pra link e texto, depois personalizado para algumas ids. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Giovani 104]

Ficou na mesma,ainda não entendi :mellow:

[webflex 0]

Olá,

 

Mostre-nos um exemplo para percebermos sua duvida ;).

 

Cumps \o/

[programador php 0]

cara dá sim para fazer isso

 

vou tentar explicar o que eu entendi

 

o cara tem dois estilos um para o ID e outro para a CLASSE

 

 

ele quer definir os dois no mesmo bloco

 

 

ainda num ficou claro

 

hehe

 

mas tentei ajudar

 

se estiver errado me corrige!!!

 

abraço

[brcontainer 16]

funciona sim:

#content{
border:1px #000 solid;
width:250px;
height:200px;
}
.content{
background:#fc0;
}

<div id="content" class="content">texto</div>

siga o exemplo acima ;)

[Nícolas 4]

funciona sim:

#content{
border:1px #000 solid;
width:250px;
height:200px;
}
.content{
background:#fc0;
}

<div id="content" class="content">texto</div>

siga o exemplo acima ;)

 

Nesse caso não vejo necessidade disso não seria melhor fazer assim??? oO'

 

#content{
border:1px #000 solid;
width:250px;
height:200px;
background:#fc0;
}

<div id="content">texto</div>

 

A NÃO SER QUE.... ele tenha um bloco de estilo que queira reaproveitar em diversos pontos diferentes sem precisar reescrever diversos códigos novamente, ae ele pode utilizar múltiplas classes.

 

CSS

<style type="text/css">
<!--
	div {
		margin-bottom: 25px;
	}
	
	.bloco {
		border: 1px solid #CCC;
		padding: 10px;
	}
	
	.cinza {
		background-color: #F5F5F5;
	}
	
	.titulo {
		font: bold 15px Arial, Helvetica, sans-serif;
		color: #666666;
	}
	
	.descricao {
		color: #006699;
	}
-->
</style>

 

HTML

<h3>CLASSES ÚNICAS</h3>
<div class="bloco">Div com class: bloco</div>
<div class="cinza">Div com class: cinza</div>
<div class="titulo">Div com class: titulo</div>
<div class="descricao">Div com class: descricao</div>

<h3>CLASSES MÚLTIPLAS</h3>
<div class="bloco cinza">Div com classes: bloco cinza</div>
<div class="bloco descricao">Div com classes: bloco descricao</div>
<div class="bloco cinza titulo">Div com classes: bloco cinza titulo</div>
<div class="bloco cinza descricao">Div com classes: bloco cinza descricao</div>

E funciona no IE, Firefox, Opera, até visualizando diretamente no dreamweaver, ehehehe

 

Não sei se tem algum navegador como um Safari da vida que não suporte, mas em todos que testei funcionou perfeitamente

 

E isso salva a pele, eheheh

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[brcontainer 16]

Sim Nick171, mas a questão é a funcionalidade, se funciona

eu só fiz como exemplo de funcionalidade

;)

[Tsubaru 1]

Vou explicar o que eu queria fazer, galera.

 

Padding no id, pra deixar o texto afastado das laterais, dar um acabamento melhor.

Mas eu queria imagem de fundo no id e o padding afetava a imagem de fundo também.

 

Tive que criar um class, só pra usar o padding no texto, mas a declaração de id e class numa div só, não tava dando certo.

Acabava ficando sem o efeito de padding no texto, só se eu declarasse 2 divs, um pro class, outro id.

 

Mas reformulei a estrutura toda já.

 

Cores e outros detalhes funcionam numa boa, mas acho que padding não dá certo.

[programador php 0]

coloca o texto dentro de um paragrafo <p></p>

 

ai nele você estiliza o padding: ;

 

e no id o background-image: ;

 

entendeu?

[Paulo de Tarso F. M. 24]

Realmente, o que você pretende fazer, ao utilizar o padding, o posicionamento da imagem de fundo pode ficar diferente do esperado. Mas vale lembrar que o padding afeta APENAS o conteúdo do elemento que está recebendo a formatação, e imagem de fundo não faz parte deste conteúdo...

 

Se você quer que a imagem fique posicionada exatamente no mesmo local onde o padding atua, especifique o posicionamento da imagem então com a mesma medida de seu padding (exemplo):

div#content {
	padding: 20px;
	background: url(imagem.jpg) 20px 20px;
}

Esta formatação indica que a imagem de fundo (imagem.jpg) deve ser posicionada, a partir do topo, 20px, e a partir da esquerda, 20px.

 

Ou se não quiser utilizar o background-position, crie a imagem já com esse "avanço" e, quando ela for mostrada no plano de fundo da div, por exemplo, seria como se a imagem já tivesse um padding nela mesma, manja?

 

Bom, sei lá, não sei se ficou claro o que quis dizer, mas tá aí...

 

Abraço!