[Resolvido] Passar PSD para HTML / CSS

[brunoqueiros 0]

Aqui eu fiz aqui não sei se fiz da maneira correta. http://teste.hardinformatica.net/

 

body {
	font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#tudo {
	width: 1024px;
	height: 700px;
	background-image: url(images/bg.png);
	background-repeat: no-repeat;
	margin: 0 auto;
}

#topo {
	width: 959px;
	height: 49px;
	margin: 0 0 0 29px;
	background-image: url(images/barra-top.png);
}

#nav{
    margin: 15px 0 0 9px;
    font-family: "franklin Gothic Book";
	font-size: 14px;
	float: left;
	color: #FFF;
}

#nav ul{
   padding:0;
   margin:0;
   float:left;
   list-style:none;
   width:749px;
}

#nav ul li{
   display:inline;
}

#nav ul li a{
   float:left;
   margin:0 0 0 0;
   padding: 0 10px 0 10px;
   text-decoration:none;
   color:#FFF;
}

#search{
	background-image: url(images/bg-search.png);
	height: 32px;
	width: 135px;
	float: right;
	margin: 8px 5px 0 0;
}

.busca{
	color: #FFF;
	margin: 8px 0 0 10px;
}

#menu {
	height: 244px;
	margin: 230px 0 0 60px;
	float: left;
}

#conteudo {
	padding: 36px 100px 0 0;
	width: 370px;
	margin: 0 auto;
}

#noticias {
	margin: 35px 150px 0 0;
	float: right;
	width: 250px;
	height: 389px;
	padding: 10px;
}

#rodape {
	width: 1004px;
	height: 180px;
	padding: 7px 10px;
	background-color: #000;
	clear: both;
	color: #FFF;
	text-align: center;
}

#rodape p {
	line-height: 28px;
}

O código HTML esta igual o de cima.

[Edkc 0]

Olá,

 

O PSD que quer converter para layout é um tema para Wordpress, porque refazer o que já está pronto?! http://forum.imasters.com.br/public/style_emoticons/default/natal_ohmy.gif

 

É só instalar o Wordpress no servidor e instalar o tema, porque a complicação?! Ou o seu servidor não tem suporte ao PHP?

[brunoqueiros 0]

Não, é que eu estou aprendendo a passar o layout para HTML, então criei este layout só para praticar não utilizarei ele no wordpress não.

[brunoqueiros 0]

Olhem eu dei uma bela adiantada aqui, fiz o rodape e o conteúdo. Agora estou com algumas dúvidas:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif o bg não esta encostando no topo da página tem um espaço em branco.

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif e nas divs, "menu" e "noticias", quando eu tento dar um espaçamento nelas, a div do slide, cai e desorganiza tudo.

 

http://teste.hardinformatica.net/

[William Bruno 1501]

Coloque um CSS reset: (você ja deveria ter comecado a codar com ele)

* {
  margin: 0;
  padding: 0;
}

verifique os tamanhos.. veja que a margin ou padding, vai somar as dimensoes(height|width), para definir qnto de espaco o elemento ocupa.

[brunoqueiros 0]

Arrumei o CSS reset. Ai a parte pra vê o tamanho dos margin, padding e os tamanhos:

 

A div que engloba tudo

#tudo {
	width: 1024px;
	height: 700px;
	background-image: url(images/bg.png);
	background-repeat: no-repeat;
	margin: 0 auto;
}

as divs noticias, conteudo e menu:

#menu {
	color: #FFF;
	width: 217px;
	height: 244px;
	margin: 230px 0 0 60px;
	float: left;
}

#conteudo {
	padding: 36px 100px 0 0;
	width: 370px;
	margin: 0 auto;
}

#noticias {
	margin: 35px 150px 0 0;
	float: right;
	width: 250px;
	height: 389px;
	padding: 10px;
}

[Thiago Retondar 18]

Resolved?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[brunoqueiros 0]

Ahamm valeu ae rapaziada !