Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
Carregando comentários...