Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

divertoso

[Resolvido] html5 + css3 + "Template Layout"

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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% }

Compartilhar este post


Link para o post
Compartilhar em outros sites

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;}			

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!!!!!!!!!!!!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.