Ir para conteúdo

POWERED BY:

Arquivado

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

DaniloTec

Template em CSS

Por , em Desenvolvimento frontend

Recommended Posts

DaniloTec    0

DaniloTec
Postado

Boa tarde a todos.

 

Estou tentando fazer um template em CSS mas já estou quase desistindo, nunca dá certo.rs

Estou postando a imagem do template que eu quero fazer.

 

http://img113.imageshack.us/img113/7987/templatewjd5.jpg

 

Se alguma boa alma puder me ajudar a construir esse template serei muito grato.

 

Vlw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Bom cara, eu poderia criar essa estrutura facilmente pra você mas o bom é te ajudar a pensar.

 

Não é dificil criar uma estrutura como essa em CSS.

 

Você precisa apenas pensar em camadas.

 

Sabe o windows explorer aonde você clica em no (+) de uma pasta e vai mostrando as pastas internas.

 

Se terá que fazer a mesma coisa, apenas pensar na organização.

 

Por exemplo, supondo que você tem músicas no seu computador.

 

Vai ter uma pasta principal.

 

Músicas
Essa pasta principal vai ter os artistas

 

Músicas
 - | Charlie Brown Jr.
 - | Dead Fish
 - | The All American Rejects
 - | The Offspring

E dentro dessa pasta de artistas teria os albuns.

 

Músicas
 - | Charlie Brown Jr.
 - | Dead Fish
	 - | Sirva-se
	 - | Um homem Só
	 - | Zero e um
 - | The All American Rejects
 - | The Offspring

E quando você entra no album você tem as músicas

 

Músicas
 - | Charlie Brown Jr.
 - | Dead Fish
	 - | Sirva-se
	 - | Um homem Só
		  - | Exilio.mp3
		  - | Obrigação.mp3
		  - | Oldboy.mp3
		  - | Um homem só.mp3
	 - | Zero e um
 - | The All American Rejects
 - | The Offspring

A idéia da montagem de estrutura é a mesma, assim como você segue uma organização pra chegar em determinado item, você deve fazer o mesmo com as suas divs.

 

Por exemplo.

 

A sua estrutura da pra você fazer assim.

 

<div id="site">
</div>

Essa seria o que conteria todos os "subitens" assim como a pasta músicas.

 

Aeee você vai olhando sem campo de visão em níveis, dentro dessa div eu preciso criar 2 colunas (uma para a area do site e outra para o menu) e 1 rodapé.

 

<div id="site">
	<div id="area"></div>
	<div id="menu-direita"></div>
	<div id="rodape"></div>
</div>

Esse id area deverá ter o topo, o menu e a area para os conteúdos.

 

<div id="site">
	<div id="area">
		<div id="topo"></div>
		<div id="menu-superior"></div>
		<div id="conteudo"></div>
	</div>
	<div id="menu-direita"></div>
	<div id="rodape"></div>
</div>

 

E essa área de conteúdo conterá o conteúdo do lado direito e do lado esquerdo.

 

<div id="site">
	<div id="area">
		<div id="topo"></div>
		<div id="menu-superior"></div>
		<div id="conteudo">
			<div id="cont-esquerdo"></div>
			<div id="cont-direito"></div>			
		</div>
	</div>
	<div id="menu-direita"></div>
	<div id="rodape"></div>
</div>

Com essa estrutura você ja consegue montar seu template facilmente, é só você jogar o estilo.

 

Procura sempre olhar os blocos e o que vai dentro deles que será o caminho que você deverá seguir para montar sua estrutura.

 

Bom, tentei te explicar a idéia, a lógica de como montar para você tentar quebrar um pouco a cabeça e montar sozinho porque só assim você aprende, espero que isso tenha ajudado, mas qualquer dúvida só postar aee

 

=)

Compartilhar este post

Link para o post
Compartilhar em outros sites

DaniloTec    0

DaniloTec
Postado

Ae Nícolas, vlw!

 

O meu problema com CSS é meio pessoal. Minha cabeça só funciona com a parte de P.O.O. e P.E..

Por incrível que pareça, CSS é um bicho de 7 cabeças pra mim, já C/JAVA/C# não. rsrsrsrs

 

Mas seguindo o seu reciocínio eu consegui fazer.

 

Segue o código:

 

CSS:

 

body{
	text-align:center;
	background-color:#d0d9fb;
	padding:0px;
	margin:0px;
}

.everything{
	width:790px;
	height: 590px;
	border: 1px solid;
	border-color: #000000;
}

.content{
	width: 628px;
	height:550px;
	float:left;
	margin:0px;
	padding:0px;
	font-family: verdana;
	font-size: 13px;
}

.bottom{
	width: 790px;
	height:40px;
	border-color: #000000;
	border-top: 1px solid;
	padding-top: 0px;
	font-family:verdana;
	font-size:10px;
}

.menuRight{
	width: 160px;
	height:550px;
	border-color: #000000;
	border-left: 1px solid;
	/*float:right;*/
}

.letterhead{
	width: 100%;
	height:80px;
	border-color: #000000;
	border-bottom: 1px solid;
	clear:both;
}

.menuTop{
	width: 100%;
	height:30px;
	border-color: #000000;
	border-bottom: 1px solid;
}

.flash{
	width: 320px;
	height: 440px;
	float:left;
	padding:0px;
	border-color: #000000;
	border-right: 1px solid;
	}

HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="everything">
		<div class="content">
			<div class="letterhead">Cabeçalho</div>
			<div class="menuTop">Menu superior</div>
			<div class="content2">
				<div class="flash"></div>
				<div class="content2"></div> 
			</div>
		</div>
		<div class="menuRight"></div>
		<div class="bottom">Rodapé</div>
	</div>
</body>
</html>

A idéia é essa mesma, mano.

Não tem que dar peixe, tem que ensinar a pescar.

 

Vlw!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

hehee po cara se fez quase tudo certo seu único erro foi comentar o float: right; no menu direito e não jogar um clear: both; no rodapé.

 

Esse clear: both; ele limpa as ações que o float causaria sobre determinada div, tag ou conteúdo.

 

Você jogou o left no content e o right no menuRight

 

Porem o rodapé ficou sobre efeito do float right.

 

Então para cancelar isso é só jogar um <br clear="all" /> logo após a div menuRight se fechar.

 

<div class="everything">
		<div class="content">
			<div class="letterhead">Cabeçalho</div>
			<div class="menuTop">Menu superior</div>
			<div class="content2">
				<div class="flash"></div>
				<div class="content2"></div>
			</div>
		</div>
		<div class="menuRight">sss</div>
		<br clear="all" />[
		<div class="bottom">Rodapé</div>
	</div>

Ou nesse caso o apropriado seria o clear:both na div rodapé cancelando o efeito que o float teria sobre ela.

 

E uma dica, da uma lida sobre abrevições no CSS

http://www.maujor.com/tutorial/abreviacss.php

 

Você usou muito isso:

border-color: #000000;
	border-bottom: 1px solid;

Quando daria para usar assim

border-bottom: 1px solid #000;

E procure sempre zerar (resetar) seu CSS antes de iniciar, procure isso no fórum tem mt sobre o assunto.

 

Um reset mais completo

http://imasters.com.br/artigo/8505/css...se_o_css_reset/

 

Mas use somente o reset.css e o ie.css

=)

 

Flw aee

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito