[Resolvido] html5 + css3 + "Template Layout"

divertoso · Setembro 23, 2010

ola galera!

estou tentando seguir esse tutorial :

http://maujor.com/tutorial/css3-modulo-template-layout.php

ele mostra como fazer um layout com o css3

basicamente eu adiciono os .js do jquery e o plugin para fazer o layout funcionar: http://code.google.com/p/css-template-layout/ (JavaScript (jQuery) implementation of the CSS Template Layout Module)

quero fazer um simples layout estilo:

A A A

B . C

D D D

meu HTML:

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        
        <link rel="stylesheet" type="text/css" href="css/teste.css">
        
        <script src="js/jquery.tpl_layout1.1.1.js" type="text/javascript"></script>
        
        <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
        
        <script type="text/javascript"> 
		  $(document).ready(function(){
			$.setTemplateLayout("teste.css", "js"); // função do plug-in que faz a mágica.
		  })
		</script>

    </head>
    
    <body>
    	
        <header id="a">
        A
        	
        </header>
        
        <section id="b">
        B
        	
        </section>
        
        <section id="c">
        C
        	
        </section>
        
        
        <footer id="d">
        D
        	
        </footer>
        
        
    </body>

</html>

meu css:



body{
	
	width:100%;
	
	margin: 0;
	padding: 0;

	display: 
	".		a		a		a	."
	".		.		.		.	."/2px
	".		b		.		c	."
	".		.		.		.	."/2px
	".		d		d		d"
	* 100px  10px	minmax(100px,500px)	100px *;
	
	}
	
	body::slot(B){
		background: #03C;

	 }
	body::slot(c){
		background: #9F3; 
	}
		
		
	body::slot(d){
		background: #03C;
	}
	
	body::slot(e){
		background: #9F3; 
	}
	
	
	#b{
		position: b;
		border: 1px solid; 
		width:100%;
		height:100%;

		}	
	
	#a{
		position: a;
		border: 1px solid; 
		width:100%;
		height:100%;

		}
		
	#c{
		position: c;
		border: 1px solid; 
		width:100%;
		height:100%;
		}	
		
	#d{
		position: d;
		border: 1px solid; 
		width:100%;
		height:100%;
	
		}

mas a formatacão não aparece certo no meu html... aparece àpenas` A B C D cada um com sua borda (um do lado do outro)

eu esperava que a diagramacao ocupasse a pagina toda no formato especificado no display...

alguem sabe o que esta errado??

vlwss

Evandro Oliveira · Setembro 23, 2010

A largura e altura dos contêineres são declarados na propriedade display do elemento body.

ao invés de

#b, #c { height: 100%; }

você declara

body { display : ". b . c ." /100% }

divertoso · Setembro 23, 2010

A largura e altura dos contêineres são declarados na propriedade display do elemento body.

ao invés de
#b, #c { height: 100%; }
você declara
body { display : ". b . c ." /100% }

nao deu muito certo,,...

só pra eu entender:

	display: 
	".		a		a		a	."/500px
	".		.		.		.	."/2px
	".		b		.		c	."/100%
	".		.		.		.	."/2px
	".		d		d		d	."/100%
	*              200px           10px	        100px    *;

os valores de tamanho da linha : * 200px 10px 100px *; sao altura e os valores /`alguma coisa` sao altura ??

tentei jogar um 500px ali na 1 linha mas o layout nao atualiza:

Imagem Postada

:(

atualmente o codigo esta assim:

index.html

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        
        <link rel="stylesheet" type="text/css" href="css/teste.css">
        
        <script src="js/jquery.tpl_layout1.1.1.js" type="text/javascript"></script>
        
        <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
        
        <script type="text/javascript"> 
		  $(document).ready(function(){
			$.setTemplateLayout("css/teste.css"); // função do plug-in que faz a mágica.
		  })
		</script>

    </head>
    
    <body>
    	
        <div id="tudo">

        
        <header id="a">
        A
        	<canvas width="100px" height="50px"/>
           
        </header>
        
        <section id="b">
        B
        	<canvas width="50px" height="25px"/>
        </section>
        
        <section id="c">
        C
        	<canvas width="50px" height="25px"/>
        </section>
        
        
        <footer id="d">
        D
        	<canvas width="100px" height="50px"/>
        </footer>
        
        
        </div> 

        
    </body>

</html>

teste.css



body{
	


	display: 
	".		a		a		a	."/500px
	".		.		.		.	."/2px
	".		b		.		c	."/100%
	".		.		.		.	."/2px
	".		d		d		d	."/100%
	*       200px  10px	  100px  *;
	
	}
	
	body::slot(B){	background: #03C; }
	body::slot(c){	background: #9F3; }
	body::slot(d){ 	background: #03C;}
	body::slot(e){	background: #9F3; }
	
	
	#b{
		position: b;
		border: 1px solid; 

		}	
	
	#a{
		position: a;
		border: 1px solid; 

		}
		
	#c{
		position: c;
		border: 1px solid; 

		}	
		
	#d{
		position: d;
		border: 1px solid; 

		}		
		canvas{
			background-color:#900;}

André do Vale · Setembro 24, 2010

Código funcional (Chrome, Firefox, Opera e Safari):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.tpl_layout1.1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
        $.setTemplateLayout();
});
</script>
<style type="text/css">
body{
	margin: 0;
	padding: 0;
	display:	".		a		a		a		."/200px
				".		.		.		.		."/2px
				".		b		.		c		."
				".		.		.		.		."/2px
				".		d		d		d		."/200px
				*		200px	2px		788px	*;
}
#a{
	position: a;
}
#b{
	position: b;
}
#c{
	position: c;
}
#d{
	position: d;
}
body::slot(a){
	background: green;
}
body::slot(B){
	background: blue;
}
body::slot(c){
	background: orange;
}
body::slot(d){
	background: red;
}
</style>
</head>

<body>
<div id="tudo">
	<header id="a">
		A
	</header>
	<section id="b">
		B
	</section>
	<section id="c">
		C
	</section>
	<footer id="d">
		D
	</footer>
</div>
</body>
</html>

Utilizando as bibliotecas mais recentes, tanto de layout quanto jQuery.

Só não entendi bem seu layout, você está necessitando é de altura 100% para o #tudo?

divertoso · Setembro 24, 2010

vlws Alkaeda, intaum a altura nao precisa ser 100% naum (era só um dos testes q eu estava fazendo) vou ver aqui se seu codigo roda dps dou um retorno!!

vlwss

divertoso · Setembro 24, 2010

Alkaeda

nao funcionou direito...

Imagem Postada

no chrome e no safari ficou alinhado verticalmente mas nao ficou:

A

BC

D

e sim:

A

B

C

D

e os backgrounds nao foram aplicados...

você pode me dizer a versão dos seus browsers??? (se der pra por um print aki tmbm pra eu ver)

vlwsss manoo!!!!

os meus browsers sao:

chrome 6.0.472.63

opera 10.62

safari 5.0.2(7533.18.5)

firefox 3.6.10

divertoso · Setembro 25, 2010

Alkaeda

deu certo!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif mas tenho uma observação

quando eu deixo a parte do css em um arquivo externo e importo via :

 <link rel="stylesheet" type="text/css" href="css.css">

ai NÃO funciona.

Só dá certo se eu deixar como você fez ,o código css dentro do html ....é assim mesmo??

(eu gostaria de deixar o css todo em um arquivo separado)

é possivel fazer esse msm layout do jeito que eu quero??

vlwssss

divertoso · Setembro 25, 2010

Alkaeda

deu certo!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif mas tenho uma observação

quando eu deixo a parte do css em um arquivo externo e importo via :
 <link rel="stylesheet" type="text/css" href="css.css">
ai NÃO funciona.

Só dá certo se eu deixar como você fez ,o código css dentro do html ....é assim mesmo??

(eu gostaria de deixar o css todo em um arquivo separado)

é possivel fazer esse msm layout do jeito que eu quero??

vlwssss

humm ja deu certo, era só setar o seu css na função jquery!! :

        $(function() {
                $.setTemplateLayout("css.css");
        });
        </script>

perdoem a ignorancia!!! vlws!!!!!!!!!!!!!!

André do Vale · Setembro 25, 2010

Que bom que você conseguiu fazer funcionar! :)

O único infortúnio desta "experiência" é o nosso amigo IE (ca), que não interpreta corretamente as tags HTML5.

divertoso · Junho 27, 2011

perdoem voltar com esse assunto, mas o negocio 'parou' de funcionar

estou seguindo a apostila:

apostila css3

capitulo 9 pg 41

de acordo com a apostila, já é pra funcionar sem a necessidade do jquery + a biblioteca de formatação, mas nao funciona, e agora nem importando os .js corretamente está funcionando:

02.html

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="02.css"></link>

<script src="jquery-1.6.1.js" type="text/javascript"></script>

<script src="jquery.tpl_layout1.1.6.js" type="text/javascript"></script>

       <script type="text/javascript"> 
                 $(document).ready(function(){
                       $.setTemplateLayout("02.css"); 
                 })
               </script>


</head>



<body>

       <header id="id_a">
               A
       </header>

       <section id="id_b">
               B
       </section>

       <section id="id_c">
               C
       </section>

       <footer id="id_d">
               D
       </footer>

</body>
</html>

02.css

body{
       margin: 0;
       padding: 0;
       display:        	    ".              a               a               a               ."/100%
                               ".              .               .               .               ."/2px
                               ".              b               .               c               ."/50px
                               ".              .               .               .               ."/2px
                               ".              d               d               d               ."/200px
                               *               200px   		2px             788px   		*;
}



body::slot(a){
       background: #339;
}
body::slot(B){
       background: blue;
}
body::slot(c){
       background: orange;
}
body::slot(d){
       background: red;
}


#id_a{
       position: a;
	border: 1px solid; 
}
#id_b{
       position: b;
	border: 1px solid; 
}
#id_c{
       position: c;
	border: 1px solid; 
}
#id_d{
       position: d;
	border: 1px solid;

alguem pode dar uma luz? (é viavel usar esse esquema é viavel)

Arquivado

[Resolvido] html5 + css3 + "Template Layout"

Recommended Posts

divertoso 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

divertoso 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

divertoso 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

divertoso 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

divertoso 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

divertoso 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

divertoso 0

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