CSS/HTML

Centralizar DIV utilizando CSS – Horizontal e Vertical.

Para posicionar uma Div no centro do navegador, independente de resolução, basta utilizar o código abaixo:

* {
  margin:0;
  padding:0
}
#conteudo {
  background-color:#ff0000;
  height:490px;
  left:50%;
  margin:-245px 0 0 -380px;
  position:absolute;
  top:50%;
  width:760px
}

O arquivo html:

<body>
  <div id="conteudo">
    Conteudo...
  </div>
</body>

Obs: O atributo margin, recebeu os valores de height e width / 2, portando o posicionamento no navegador, será relativo ao tamanho em px que atribuir para estes campos

Anúncios
CakePHP, CSS/HTML

Aplicando estilos CSS – CakePHP

Dando sequencia ao post sobre: Criação de layouts CakePHP – Introdução ao CakePHP para Web Designers , estaremos aplicando estilos CSS em nosso projeto.

Crie um arquivo com nome geral.css, e insira no mesmo o seguinte conteudo:

body {
	background: #ddd;
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#layout {
	margin: 20px auto;
	background: #fff;
	width: 800px;
}
#navegacao, #rodape {
	background: #333;
	padding: 8px 10px;
	color: #fff;
}
#navegacao a {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	margin: 0 15px;
}
#conteudo {
	padding: 5px 20px;
}
#conteudo h2 {
	margin: 0;
}
#rodape {
	font-size: 11px;
}

No diretório webroot da aplicação ( /projeto/app/webroot/css ) salve o arquivo geral.css citado acima.

Observe, que já  existe um arquivo .css de nome: cake.generic. Este é o arquivo padrão da instalação do cake.

Você poderá ter vários arquivos de estilo e aplica-los a componentes específicos do layout (Ex: geral.css – header.css – forms.css etc).

Vamos alterar o arquivo default.ctp ( /projeto/app/views/layouts/default.ctp ), criado no post anterior e  inserir o conteúdo abaixo.
Desta forma, o arquivo vai assumir a estrutura compatível com nossa folha de estilo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title> Modelo com aplicacao de estilos </title>
	<?php echo $html->css(array('geral.css')); ?>
</head>
<body>
	<div id="layout">
		<div id="navegacao">
			<?php echo $html->link('Home', array('controller' => 'pages', 'action' => 'home')); ?> |
			<?php echo $html->link('Contato', array('controller' => 'pages', 'action' => 'contato')); ?> |
		</div>
		<div id="conteudo"><?php echo $content_for_layout; ?></div>
		<div id="rodape"> Rodape </div>
	</div>
</body>
</html>

Observe que agora, alem da estrutura de divs de nossa aplicação, ha tambem o trecho de código php:

echo $html->css(array('geral.css'));

É Neste trecho que informamos para a aplicação, qual arquivo css utilizar para renderizar o layout.

Boa sorte = )

CSS/HTML, Java Script

Visualizar ou ocultar Div – Java Script / CSS – Atributo Display

O script abaixo permite alterarmos o atributo display das divs, possibilitando ao usuário visualizar ou ocultar o conteúdo das mesmas.

Abaixo o arquivo Java Script:

function altera_display(id) {
	// Opções para o atributo display - block, inline e none
	if(document.getElementById(id).style.display=="none") {
		document.getElementById(id).style.display = "block";
	}
	else {
		document.getElementById(id).style.display = "none";
	}
}

Abaixo, o arquivo HTML:

<html>
	<head>
		<title> Alteracao atributo Display </title>
			<script type="text/javascript" src="altera_display.js"></script>
	</head>
	<body>
		<h2> Selecione as opções abaixo: </h2>
		<p>
			<!-- Altera o valor do atributo Display no evento onclick atraves do id da Div-->
			<a href="#" onclick="javascript: altera_display('div01');"> Div 01 </a> |
			<a href="#" onclick="javascript: altera_display('div02');"> Div 02 </a> |
			<a href="#" onclick="javascript: altera_display('div03');"> Div 03 </a> |
			<a href="#" onclick="javascript: altera_display('div04');"> Div 04 </a> |
		</p>
		<!-- Opções para o atributo display - block, inline e none -->
		<div id='div01'	display: block;>
			Conteudo Div 01
		</div>
		<div id='div02' display: block;>
			Conteudo Div 02
		</div>
		<div id='div03'	display: block;>
			Conteudo Div 03
		</div>
		<div id='div04'	display: block;>
			Conteudo Div 04
		</div>
	</body>
</html>

Ao selecionar os links, as Divs serão visualizadas ou ocultadas.
Alterando o atributo Display no documento .html, é possivel modificar a forma como as divs serão apresentadas inicialmente.

Link para download dos arquivos relacionados.

Boa sorte = )