reformular página

Hamilcar · Março 15, 2008

Fiz um bloco que some ou aparece a parte do conteúdo, sendo que não tenho muito conhecimento em css ou javascript gostaria que vocês verificassem se o código pode ser melhorado, outra coisa que gostaria é que me ajudassem a fazer o código funcionar para a maioria dos navegadores, testei no firefox e no IE7, mas não está legal, em cada um fica de uma maneira, obrigado.

<style>

#bloco{

width:150px;

border:inset medium;

}

#barra{

background:#0033FF repeat-x;

background-image:url(imagem/gradient_thead.gif);

width:135px; height:20px;

padding:5 10 5 5;

}

#conteudo{

background:#009900;

width:135px; height:150px;

padding:5 10 5 5;

display:block;

}

.barra_texto{

/*font: Arial, Helvetica, sans-serif;*/

font:11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif

font-size:16px; color:#FFF;

float:left;

}

.imagem{

float:right;

padding-top:3px;

}

</style>

<script language="JavaScript" type="text/javascript">

function action(act)

{

if(document.getElementById(act).style.display == 'none')

{

document.getElementById(act).style.display = 'block'

}

else

{

document.getElementById(act).style.display = 'none'

}

}

</script>

<div id="bloco">

<div id="barra">

<b class="barra_texto">

<strong>»Barra</strong>

</b>

<b class="imagem">

<a href='java script:action("conteudo")'>

<img src="imagem/fase.gif" border=0 />

</a>

</b>

</div>

<div id="conteudo">

<strong>

Conteúdo Conteúdo<br>Conteúdo Conteúdo

<br>Conteúdo Conteúdo<br>Conteúdo Conteúdo

</strong>

</div>

</div>

programador php · Março 15, 2008

eu separaria o codigo CSS

JS

e HTML

e mudaria algumas coisas...

na tag a

colocaria a ação no evento onclick e nao no HREF

colocaria propriedades width e height na imagem caso css desabilitado imagem continua igual

por enquanto é só

abraço

rev087 · Março 15, 2008

<script language="JavaScript" type="text/javascript">

function action(act) {

if(document.getElementById(act).style.display == 'none') {

document.getElementById(act).style.display = 'block'

} else {

document.getElementById(act).style.display = 'none'

}

</script>

<strong>»Barra</strong>

</b>

</a>

</b>

</div>

Conteúdo Conteúdo<br>Conteúdo Conteúdo

<br>Conteúdo Conteúdo<br>Conteúdo Conteúdo

</strong>

</div>

rev087 · Março 15, 2008

Ou ainda, usando mootools, você pode deixar o HTML totalmente limpo de Javascript e o efeito de esconder/mostrar pode se repetir N vezes no código, mudando apenas a propriedade rel="elementoParaEsconder":

<style>
.bloco{
	width:150px;
	border:inset medium;
}
.barra{
	background:#0033FF repeat-x;
	background-image:url(imagem/gradient_thead.gif);
	width:135px; height:20px;
	padding:5 10 5 5;
}
.conteudo{
	background:#009900;
	width:135px; height:150px;
	padding:5 10 5 5;
	display:block;
}
.barra_texto{
/*font: Arial, Helvetica, sans-serif;*/
	font:11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif
	font-size:16px; color:#FFF;
	float:left;
}
.imagem{
	float:right;
	padding-top:3px;
}
</style>

<script type="text/javascript" src="mootools-release-1.11.js"></script>

<script type="text/javascript">
	Window.onDomReady(function() {
		$$(".esconder").each(function(e,n) {
			e.onclick = function() {
				act = $(e.getProperty("rel"));
				if($(act).style.display == 'none') {
					$(act).style.display = 'block';
				} else {
					$(act).style.display = 'none';
				}
			}
		});
	})
</script>

<div class="bloco">
	<div class="barra">
		<b class="barra_texto">
			<strong>»Barra</strong>
		</b>
		<b class="imagem">
			<a href='#' class="esconder" rel="conteudo1">
				<img src="imagem/fase.gif" border=0 />
			</a>
		</b>
	</div>

	<div id="conteudo1" class="conteudo">
		<strong>
			Conteúdo Conteúdo<br>Conteúdo Conteúdo
			<br>Conteúdo Conteúdo<br>Conteúdo Conteúdo
		</strong>
	</div>
</div>

<div class="bloco">
	<div class="barra">
		<b class="barra_texto">
			<strong>»Barra</strong>
		</b>
		<b class="imagem">
			<a href='#' class="esconder" rel="conteudo2">
				<img src="imagem/fase.gif" border=0 />
			</a>
		</b>
	</div>

	<div id="conteudo2" class="conteudo">
		<strong>
			Conteúdo Conteúdo<br>Conteúdo Conteúdo
			<br>Conteúdo Conteúdo<br>Conteúdo Conteúdo
		</strong>
	</div>
</div>

Hamilcar · Março 15, 2008

eu separaria o codigo CSS

JS

e HTML

e mudaria algumas coisas...

na tag a

colocaria a ação no evento onclick e nao no HREF

colocaria propriedades width e height na imagem caso css desabilitado imagem continua igual

por enquanto é só

abraço

Os códigos css e javascript só estão juntos para facilitar quanto ao onclick vou fazer, mas quanto a imagem ter width e heigth não sei se dá pois a imagem é uma linha vertical que se repete ao longo da barra, para colocar width ela aumentaria e não ficaria legal, como faço então, e quanto a renderização em browser diferentes, pois o IE renderiza de uma forma e o Firefox de outra, como resolver, obrigado a todos.

Hamilcar · Março 15, 2008

Ou ainda, usando mootools, você pode deixar o HTML totalmente limpo de Javascript e o efeito de esconder/mostrar pode se repetir N vezes no código, mudando apenas a propriedade rel="elementoParaEsconder":

<style>
.bloco{
	width:150px;
	border:inset medium;
}
.barra{
	background:#0033FF repeat-x;
	background-image:url(imagem/gradient_thead.gif);
	width:135px; height:20px;
	padding:5 10 5 5;
}
.conteudo{
	background:#009900;
	width:135px; height:150px;
	padding:5 10 5 5;
	display:block;
}
.barra_texto{
/*font: Arial, Helvetica, sans-serif;*/
	font:11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif
	font-size:16px; color:#FFF;
	float:left;
}
.imagem{
	float:right;
	padding-top:3px;
}
</style>

<script type="text/javascript" src="mootools-release-1.11.js"></script>

<script type="text/javascript">
	Window.onDomReady(function() {
		$$(".esconder").each(function(e,n) {
			e.onclick = function() {
				act = $(e.getProperty("rel"));
				if($(act).style.display == 'none') {
					$(act).style.display = 'block';
				} else {
					$(act).style.display = 'none';
				}
			}
		});
	})
</script>

<div class="bloco">
	<div class="barra">
		<b class="barra_texto">
			<strong>»Barra</strong>
		</b>
		<b class="imagem">
			<a href='#' class="esconder" rel="conteudo1">
				<img src="imagem/fase.gif" border=0 />
			</a>
		</b>
	</div>

	<div id="conteudo1" class="conteudo">
		<strong>
			Conteúdo Conteúdo<br>Conteúdo Conteúdo
			<br>Conteúdo Conteúdo<br>Conteúdo Conteúdo
		</strong>
	</div>
</div>

<div class="bloco">
	<div class="barra">
		<b class="barra_texto">
			<strong>»Barra</strong>
		</b>
		<b class="imagem">
			<a href='#' class="esconder" rel="conteudo2">
				<img src="imagem/fase.gif" border=0 />
			</a>
		</b>
	</div>

	<div id="conteudo2" class="conteudo">
		<strong>
			Conteúdo Conteúdo<br>Conteúdo Conteúdo
			<br>Conteúdo Conteúdo<br>Conteúdo Conteúdo
		</strong>
	</div>
</div>

Na realidade vai funcionar assim mesmo, por isto eu passo a id do conteúdo para o javascript, veja este:

<style>

#bloco{

width:150px;

padding:5 5 5 5;

border:1px solid #0099CC;

}

#barra{

background:#0033FF repeat-x;

background-image:url(imagem/gradient_thead.gif);

width:135px; height:20px;

padding:5 10 5 5;

}

.conteudo{

background:#009900;

width:135px; height:150px;

padding:5 10 10 5;

display:block;

}

.barra_texto{

font:11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif

font-size:16px; color:#FFF;

float:left;

}

.imagem{

float:right;

padding-top:3px;

}

</style>

<script language="JavaScript" type="text/javascript">

function action(act)

{

if(document.getElementById(act).style.display == 'none')

{

document.getElementById(act).style.display = 'block'

}

else

{

document.getElementById(act).style.display = 'none'

}

}

</script>

<div id="bloco">

<div id="barra">

<b class="barra_texto">

<strong>»Barra</strong>

</b>

<b class="imagem">

<a href='#' onclick="action('conteudo')">

<img src="imagem/fase.gif" />

</a>

</b>

</div>

<div id="conteudo">

<strong class="conteudo">

Conteúdo Conteúdo<br>Conteúdo Conteúdo

<br>Conteúdo Conteúdo<br>Conteúdo Conteúdo

</strong>

</div>

</div>

<div id="bloco">

<div id="barra">

<b class="barra_texto">

<strong>»Barra</strong>

</b>

<b class="imagem">

<a href='#' onclick="action('conteudo2')">

<img src="imagem/fase.gif" />

</a>

</b>

</div>

<div id="conteudo2">

<strong class="conteudo">

Conteúdo Conteúdo<br>Conteúdo Conteúdo

<br>Conteúdo Conteúdo<br>Conteúdo Conteúdo

</strong>

</div>

</div>

rev087 · Março 15, 2008

Seu problema é com o box-model bug. O Internet Explorer interpreta a padding como sendo parte da largura das divs, e o firefox não tem este problema. Assim, você tem um total de 15px de padding horizontal e 135px de tamanho da div. O firefox e outros browsers modernos soma o total de 150px. Já o IE mantém os 15px dentro dos 135px originais, tendo 15px de espaço em branco. Uma das possíveis soluções:

width: 135px !important;
width: 150px;

O IE6 não interpreta o atributo !important, sobrescrevendo a definição 135px por 150px. O firefox e outros browsers modernos interpretam o !important, mantendo 150px. Só testei no firefox e no internet explorer 6, provavelmente não dá certo no 7...alguém pode testar?

ps: hcar, use CODE ao invez de QUOTE pra postar códigos =P

Hamilcar · Março 15, 2008

Seu problema é com o box-model bug. O Internet Explorer interpreta a padding como sendo parte da largura das divs, e o firefox não tem este problema. Assim, você tem um total de 15px de padding horizontal e 135px de tamanho da div. O firefox e outros browsers modernos soma o total de 150px. Já o IE mantém os 15px dentro dos 135px originais, tendo 15px de espaço em branco. Uma das possíveis soluções:
width: 135px !important;
width: 150px;
O IE6 não interpreta o atributo !important, sobrescrevendo a definição 135px por 150px. O firefox e outros browsers modernos interpretam o !important, mantendo 150px. Só testei no firefox e no internet explorer 6, provavelmente não dá certo no 7...alguém pode testar?

ps: hcar, use CODE ao invez de QUOTE pra postar códigos =P

Valeu, vou testar em outros browser e no IE e posto novamente, usarei CODE, obrigado.

brcontainer · Março 15, 2008

titulo editado:

Conferir o que fiz, verificando se tem como melhorar http://forum.imasters.com.br/public/style_emoticons/default/seta.gif reformular página

Arquivado

reformular página

Recommended Posts

Hamilcar 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rev087 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rev087 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hamilcar 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hamilcar 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

rev087 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hamilcar 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Fóruns

Tempo Real

Informação importante