Assine:
Layout Diferente.
Layout diferente.
Escrito por faro em WebStandards e CSS. Data: 11/07/2008
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Boa noite pessoal como vão todos...
esse é meu primeiro tutorial postado.
Fujindo um pouco do layout com 2 colunas, conteudo no meio essas coisas e lá lá.
acabei de fazer aqui um layout que contém:
1- um topo com largura de 100%; fora da moldura de 758px de largura
2- uma moldura com 758px de largura(div em vermelho e conteudo)
3- um rodape que tb fica fora da moldura de 758px; com sua propria moldura
obs: sei que existem outras tecnicas no caso do rodape mas acabei fazendo dessa forma.
4- espero que gostem do exemplo, o resto é criatividade. comentem!!!
Vamos ao exemplo:
segue o html
o css
esse é meu primeiro tutorial postado.
Fujindo um pouco do layout com 2 colunas, conteudo no meio essas coisas e lá lá.
acabei de fazer aqui um layout que contém:
1- um topo com largura de 100%; fora da moldura de 758px de largura
2- uma moldura com 758px de largura(div em vermelho e conteudo)
3- um rodape que tb fica fora da moldura de 758px; com sua propria moldura
obs: sei que existem outras tecnicas no caso do rodape mas acabei fazendo dessa forma.
4- espero que gostem do exemplo, o resto é criatividade. comentem!!!
Vamos ao exemplo:
segue o html
CODE
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="topo">
<h1>empresa</h1>
</div>
<div id="moldura">
<p>Conteudo</p>
</div>
<div id="moldura_rodape">
<p>
rodape, todos os direitos lá, lá,lá,lá,lá,lá,lá,lá,lá,lá,lá,lá,lá,:::::::::
</p>
</div>
</body>
</html>
<head>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="topo">
<h1>empresa</h1>
</div>
<div id="moldura">
<p>Conteudo</p>
</div>
<div id="moldura_rodape">
<p>
rodape, todos os direitos lá, lá,lá,lá,lá,lá,lá,lá,lá,lá,lá,lá,lá,:::::::::
</p>
</div>
</body>
</html>
o css
CODE
body{
margin:0px;
padding:0px;
text-align:center;
background-color:silver;
font-family:arial, verdana, serif;
font-size:11px;
}
#moldura{
width:758px;
height:500px;
margin:0 auto;
background-color:red;
text-align:left;
}
#topo {
margin-top:-13px;
padding: 0;
width:100%;
height:100px;
background-color:black;
}
h1 {
float:left;
width:150px;
position: static;
color: blue;
line-height: 2em;
}
p {
font-size: 18px;
float:left;
}
#moldura_rodape{
width:758px;
height:45px;
margin:0 auto;
background-color:green;
bottom:0;
}
margin:0px;
padding:0px;
text-align:center;
background-color:silver;
font-family:arial, verdana, serif;
font-size:11px;
}
#moldura{
width:758px;
height:500px;
margin:0 auto;
background-color:red;
text-align:left;
}
#topo {
margin-top:-13px;
padding: 0;
width:100%;
height:100px;
background-color:black;
}
h1 {
float:left;
width:150px;
position: static;
color: blue;
line-height: 2em;
}
p {
font-size: 18px;
float:left;
}
#moldura_rodape{
width:758px;
height:45px;
margin:0 auto;
background-color:green;
bottom:0;
}
Mais recentes em WebStandards e CSS
- Mini-lib css reset do micox
- Por Micox - Abaixo mostrarei tipo uma mini-lib css com o qual eu...
- Mapear regiao
- Por faro - Substituindo a tag map pelo css....
- Layout diferente.
- Por faro - Boa noite pessoal como vão todos... esse é meu primeiro...
- Rollover via css
- Por NightSpy - Achei este efeito na net, como não achei novamente,...
- Menu drop-down só com css - até 4 níveis
- Por Micox - Código pronto - só copiar, colar e usar...
Ver mais Artigos de WebStandards e CSS.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
ckav disse:
estou estudando CSS e ver exemplos ajuda d+++
Abraços
faro disse:
estou estudando CSS e ver exemplos ajuda d+++
Abraços
Concerteza.
todos juntos conseguiremos.
Lucasbr disse:
faro disse:
continuando com a imagem em print scrin.
bem lembrado, tinha esquecido
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).