Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal!
Desenvolvi recentemente um layout no photoshop e segui as dicas de muitos membros aqui do fórum, usar tableless para estruturar o layout no site.
Mostrarei o layout fatiado em primeiro lugar: http://ragnacorp.forbrazil.com.br/siteteste/site_novo_para_tableless_fatiado.html
Aqui está o que eu consegui fazer do zero somente pelo código, utilizando o método tableless (as cores representam as imagens que estão fatiadas na pasta 'images'): http://ragnacorp.forbrazil.com.br/siteteste/teste.html
Eis o código que desenvolvi para isso:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#mae {
width: 958px;
height: 900px;
}
#sobre_topo {
background: #000;
height: 29px;
}
#topo {
background: #FF0;
height: 191px;
}
#menu_horizontal {
background: #CF0;
height: 41px;
}
#conteudo {
background: #F00;
width: 789px;
height: 579px;
}
#menu_direita {
float: right;
background: #000;
height: 579px;
width: 169px;
}
#menu_direita_sub_1_topo {
background: #AAA;
height: 51px;
}
#menu_direita_sub_1_meio {
background: #EEE;
}
#menu_direita_sub_2_topo {
background: #DDD;
height: 71px;
}
#menu_direita_sub_2_meio {
background: #FED;
}
#menu_direita_sub_3_topo {
background: #DAA;
height: 67px;
}
#menu_direita_sub_3_meio {
background: #FDA;
}
#propaganda_1 {
float: left;
background: #FCF;
width: 198px;
height: 197px;
}
#propaganda_2 {
float: left;
background: #BFF;
width: 191px;
height: 197px;
}
#propaganda_3 {
float: left;
background: #FCC;
width: 198px;
height: 177px;
}
#propaganda_4 {
float: left;
background: #BFB;
width: 191px;
height: 177px;
}
#propaganda_top_1 {
float: left;
background: #DAD;
width: 389px;
height: 125px;
}
#propaganda_top_2 {
float: left;
background: #F00;
width: 400px;
height: 125px;
}
#sub_conteudo_1_topo {
float: left;
background: #FCB;
width: 400px;
height: 62px;
}
#sub_conteudo_1_meio {
float: left;
background: #AFC;
width: 400px;
height: 108px;
}
#sub_conteudo_1_rodape {
float: left;
background: #BDD;
width: 400px;
height: 27px;
}
#sub_conteudo_2_topo {
float: left;
background: #FCB;
width: 400px;
height: 40px;
}
#sub_conteudo_2_meio {
float: left;
background: #AFC;
width: 400px;
height: 109px;
}
#sub_conteudo_2_rodape {
float: left;
background: #BDD;
width: 400px;
height: 28px;
}
#conteudo_limpo_topo {
clear: left;
background: #CDF;
height: 43px;
}
#conteudo_limpo_meio {
clear: left;
background: #CFA;
height: 11px;
}
#conteudo_limpo_rodape {
clear: left;
background: #FAC;
height: 26px;
}
</style>
</head>
<body>
<div id="mae">
<div id="sobre_topo">
</div>
<div id="topo">
</div>
<div id="menu_horizontal">
</div>
<div id="menu_direita">
<div id="menu_direita_sub_1_topo">
</div>
<div id="menu_direita_sub_1_meio">
<ul>
<li>teste</li>
<li>teste</li>
</ul>
</div>
<div id="menu_direita_sub_2_topo">
</div>
<div id="menu_direita_sub_2_meio">
<ul>
<li>teste</li>
<li>teste</li>
</ul>
</div>
<div id="menu_direita_sub_3_topo">
</div>
<div id="menu_direita_sub_3_meio">
<ul>
<li>teste</li>
<li>teste</li>
</ul>
</div>
</div>
<div id="conteudo">
<div id="propaganda_1">
</div>
<div id="propaganda_2">
</div>
<div id="sub_conteudo_1_topo">
</div>
<div id="sub_conteudo_1_meio">
</div>
<div id="sub_conteudo_1_rodape">
</div>
<div id="propaganda_3">
</div>
<div id="propaganda_4">
</div>
<div id="sub_conteudo_2_topo">
</div>
<div id="sub_conteudo_2_meio">
</div>
<div id="sub_conteudo_2_rodape">
</div>
<div id="propaganda_top_1">
</div>
<div id="propaganda_top_2">
</div>
<div id="conteudo_limpo_topo">
</div>
<div id="conteudo_limpo_meio">
</div>
<div id="conteudo_limpo_rodape">
</div>
</div>
</div>
</body>
</html>Gostaria de, primeiramente, pedir a análise de vocês:
E, da mesma forma, gostaria de tirar algumas dúvidas:
Um abraço gente,
Aguardo resposta.
>
Depende do efeito final que deseja. Poste o link para o site, é mais fácil. ;)
Sobre tirar as "bolinhas" das listas é só fazer assim:
ul{
list-style: none
}
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Thiago, consegui colocar as imagens da forma que eu queria!
To feliz cara!
Olha o resultado pelos links:
http://ragnacorp.forbrazil.com.br/siteteste/teste.html
Aqui está a versão atual do código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFF;
}
ul {
list-style: none;
}
body {
background: #39465A;
}
#mae {
width: 958px;
height: 900px;
}
#sobre_topo {
background-image: url(images/site_novo_para_tableless_fatiado_01.gif);
height: 29px;
}
#topo {
background-image: url(images/site_novo_para_tableless_fatiado_02.gif);
height: 191px;
}
#menu_horizontal {
background-image: url(images/site_novo_para_tableless_fatiado_03.gif);
height: 41px;
}
#conteudo {
width: 789px;
height: 579px;
}
#menu_direita {
float: right;
background: #39465A;
height: 579px;
width: 169px;
}
#botao_menu_direita {
padding: 6px 10px 0;
margin: 0 17px;
background: #39465A;
height: 22px;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu_direita_sub_1_topo {
background-image: url(images/site_novo_para_tableless_fatiado_07.gif);
height: 51px;
}
#menu_direita_sub_1_meio {
background-image: url(images/site_novo_para_tableless_fatiado_08.gif);
}
#menu_direita_sub_2_topo {
background-image: url(images/site_novo_para_tableless_fatiado_10.gif);
height: 71px;
}
#menu_direita_sub_2_meio {
background-image: url(images/site_novo_para_tableless_fatiado_11.gif);
}
#menu_direita_sub_3_topo {
background-image: url(images/site_novo_para_tableless_fatiado_12.gif);
height: 67px;
}
#menu_direita_sub_3_meio {
background-image: url(images/site_novo_para_tableless_fatiado_17.gif);
}
#menu_direita_sub_4_topo {
background-image: url(images/site_novo_para_tableless_fatiado_19.gif);
height: 67px;
}
#menu_direita_sub_4_meio {
background-image: url(images/site_novo_para_tableless_fatiado_20.gif);
}
#menu_direita_sub_4_rodape {
background-image: url(images/site_novo_para_tableless_fatiado_21.gif);
height: 16px;
}
#propaganda_1 {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_04.gif);
width: 198px;
height: 197px;
}
#propaganda_2 {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_05.gif);
width: 191px;
height: 197px;
}
#propaganda_3 {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_14.gif);
width: 198px;
height: 177px;
}
#propaganda_4 {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_15.gif);
width: 191px;
height: 177px;
}
#propaganda_top_1 {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_24.gif);
width: 389px;
height: 125px;
}
#propaganda_top_2 {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_25.gif);
width: 400px;
height: 125px;
}
#sub_conteudo_1_topo {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_06.gif);
width: 400px;
height: 62px;
}
#sub_conteudo_1_meio {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_09.gif);
width: 400px;
height: 108px;
}
#sub_conteudo_1_rodape {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_13.gif);
width: 400px;
height: 27px;
}
#sub_conteudo_2_topo {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_16.gif);
width: 400px;
height: 40px;
}
#sub_conteudo_2_meio {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_18.gif);
width: 400px;
height: 109px;
}
#sub_conteudo_2_rodape {
float: left;
background-image: url(images/site_novo_para_tableless_fatiado_22.gif);
width: 400px;
height: 28px;
}
#conteudo_limpo_topo {
clear: left;
background-image: url(images/site_novo_para_tableless_fatiado_26.gif);
height: 43px;
}
#conteudo_limpo_meio {
clear: left;
background-image: url(images/site_novo_para_tableless_fatiado_27.gif);
height: 11px;
}
#conteudo_limpo_rodape {
clear: left;
background-image: url(images/site_novo_para_tableless_fatiado_28.gif);
height: 26px;
}
#conteudo_limpo_rodape_2 {
clear: left;
background-image: url(images/site_novo_para_tableless_fatiado_29.gif);
height: 60px;
}
</style>
</head>
<body>
<div id="mae">
<div id="sobre_topo">
</div>
<div id="topo">
</div>
<div id="menu_horizontal">
</div>
<div id="menu_direita">
<div id="menu_direita_sub_1_topo">
</div>
<div id="menu_direita_sub_1_meio">
<div id="botao_menu_direita">
Página Principal
</div>
<ul>
<li>teste</li>
</ul>
</div>
<div id="menu_direita_sub_2_topo">
</div>
<div id="menu_direita_sub_2_meio">
<ul>
<li>teste</li>
<li>teste</li>
</ul>
</div>
<div id="menu_direita_sub_3_topo">
</div>
<div id="menu_direita_sub_3_meio">
<ul>
<li>teste</li>
<li>teste</li>
</ul>
</div>
<div id="menu_direita_sub_4_topo">
</div>
<div id="menu_direita_sub_4_meio">
<ul>
<li>teste</li>
<li>teste</li>
</ul>
</div>
<div id="menu_direita_sub_4_rodape">
</div>
</div>
<div id="conteudo">
<div id="propaganda_1">
</div>
<div id="propaganda_2">
</div>
<div id="sub_conteudo_1_topo">
</div>
<div id="sub_conteudo_1_meio">
</div>
<div id="sub_conteudo_1_rodape">
</div>
<div id="propaganda_3">
</div>
<div id="propaganda_4">
</div>
<div id="sub_conteudo_2_topo">
</div>
<div id="sub_conteudo_2_meio">
</div>
<div id="sub_conteudo_2_rodape">
</div>
<div id="propaganda_top_1">
</div>
<div id="propaganda_top_2">
</div>
<div id="conteudo_limpo_topo">
</div>
<div id="conteudo_limpo_meio">
</div>
<div id="conteudo_limpo_rodape">
</div>
<div id="conteudo_limpo_rodape_2">
</div>
</div>
</div>
</body>
</html>A função de arredondar as bordas do botão no menu da direita eu peguei na internet.
Mas ela não funciona no Internet Explorer.
Existe solução pra isso?
O que achou do resto, tá bom?
É por esse caminho mesmo?
OBS: Probleminha com acentuação, percebeu? 'Página Principal' buga. Como ajeitar isso?
Abraços!
Não estou podendo ver no Internet Explorer agora. =/
Aquela div#sobre_topo é desnecessária. Para tal efeito que deseja, aplique margin: 29px 0 0 0.
Não precisa criar uma div para o menu horizontal. Pode ir com ul direto mesmo, pois ambos são elementos de bloco, ficando assim: <ul id="menu_horizontal>.
Aquele menu da direita da para limpar bem. Faça com listas. :)
Leia sobre margin. Vai te ajudar bastante. ;)
>
Não estou podendo ver no Internet Explorer agora. =/
Aquela div#sobre_topo é desnecessária. Para tal efeito que deseja, aplique margin: 29px 0 0 0.
Não precisa criar uma div para o menu horizontal. Pode ir com ul direto mesmo, pois ambos são elementos de bloco, ficando assim: <ul id="menu_horizontal>.
Aquele menu da direita da para limpar bem. Faça com listas. :)
Leia sobre margin. Vai te ajudar bastante. ;)
A div#sobre_topo não creio que seja desnecessária, vai texto ali naquele espaço. A não ser que o texto vá sem a div.
Explica melhor por favor como eu faço pra 'limpar bem' o menu da direita?
E o menu horizontal não tem que ter div pra permanecer com a imagem no fundo? Sem div nao fica a imagem que eu quero.
Você viu a imagem?
A div#sobre_topo não creio que seja desnecessária, vai texto ali naquele espaço. A não ser que o texto vá sem a div.
Poderia colocar dentro de #topo mesmo como foi explicado em outro tópico para você.
Explica melhor por favor como eu faço pra 'limpar bem' o menu da direita?
Use apenas uma div, que via ser para posicionar. Depois é só criar ul para cada box.
E o menu horizontal não tem que ter div pra permanecer com a imagem no fundo? Sem div nao fica a imagem que eu quero.
Pode colocar o background no próprio ul.
>
A div#sobre_topo não creio que seja desnecessária, vai texto ali naquele espaço. A não ser que o texto vá sem a div.
Poderia colocar dentro de #topo mesmo como foi explicado em outro tópico para você.
Explica melhor por favor como eu faço pra 'limpar bem' o menu da direita?
Use apenas uma div, que via ser para posicionar. Depois é só criar ul para cada box.
E o menu horizontal não tem que ter div pra permanecer com a imagem no fundo? Sem div nao fica a imagem que eu quero.
Pode colocar o background no próprio ul.
Mas eu ainda não entendi qual a vantagem de se utilizar <ul> em vez de <div>.
Da mesma forma eu teria a mesma quantidade de linhas, só que mudando os <div> por <ul>No que isso influencia?
Ou estou interpretando de forma errada?
Outra coisa, o problema dos acentos não sei resolver.
Abraços
Depende do efeito final que deseja. Poste o link para o site, é mais fácil. ;)
Sobre tirar as "bolinhas" das listas é só fazer assim:
ul{
list-style: none
}
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif