Ir para conteúdo

POWERED BY:

Arquivado

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

brunoqueiros

[Resolvido] Passar PSD para HTML / CSS

Por , em Desenvolvimento frontend

Recommended Posts

William Bruno    1501

William Bruno
Postado

Oque você conhece de HTML? de CSS?

como vai fazer? código semântico? vai usar algum programa visual ? (não recomendo)

 

Identifique os blocos do layout, e os posicione.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Faz um bloco. Div.

Dá um margin top nele.

Cria 2 imagens, uma para cada canto, por causa das bordas redondas..

 

faz uma lista flutuada, e posiciona os lis, depois pode até usar um float right para o formulário da direita.

 

Se você não nos mostrar como tentou fazer, e que erro deu, não tem como te ajudar.

Fazer para você 'de graça' eu não vou :P:

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunoqueiros    0

brunoqueiros
Postado

Bom eu tentei fazer aqui mas estou com um problema, quando eu tento colocar alguma coisa dentro da div conteudo a div footer se despreende o resto, como faço? Esta assim por enquanto o código 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=utf-8" />
<title>Untitled Document</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="box">
	<div id="header">
      <div id="menu">
      <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">A empresa</a></li>
              <li><a href="#">Serviços</a></li>
              <li><a href="#">Portfólio</a></li>
              <li><a href="#">Expediente</a></li>
              <li><a href="#">Fale conosco</a></li>	  
       </ul>
      </div>
        <div id="search">
        	<div class="busca">Buscar...</div>
        </div>
    </div>
    	<div id="conteudo">
          
          
          <div id="divclear"> </div>
        </div>
        
        
        					
</div>
	 	
            <div id="footer">
            Footer
            </div>
			
</body>
</html>

e o CSS ta assim.

body{
	background-image: url(images/bg.png);
	background-position: top;
	background-repeat: no-repeat;
	margin: 0 auto;
}

#header{
	background-image: url(images/barra-top.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 49px;
	margin: 10px 0 0 0;
}

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

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

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

#conteudo{
	text-align: center;
	margin: 0 0 0 0;
}



#footer{
	background-position: center;
	background-repeat: no-repeat;
	background-color: #000;
	margin: 640px 0 0 128px;
	height: 200px;
	width: 1024px;
}


#menu{
    margin: 15px 0 0 175px;
    font-family: "franklin Gothic Book";
	font-size: 14px;
	float: left;
	color: #FFF;
}
#menu ul{
   padding:0;
   margin:0;
   float:left;
   list-style:none;
   width:749px;
}
#menu ul li{
   display:inline;
}
#menu ul li a{
   float:left;
   margin:0 0 0 0;
   padding: 0 10px 0 10px;
   text-decoration:none;
   color:#FFF;
}



#divclear{
	clear:both;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Vamos lá:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif utilize CSS Reset

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif não coloque margin:0 auto no body. Coloque na div que engloba tudo

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif no bloco da div#conteudo você usou margin: 0 0 0 0. Prefira simplificar o uso assim: margin: 0

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif no bloco #menu ul li prefira trabalhar com float: left para colocá-los lado-a-lado

 

Faça algumas alterações e veja se melhorar algo.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é este aqui o absurdo:

#footer{
        margin: 640px 0 0 128px;
valores tão altos de margin, e padding, geralmente mostram erros de estrutura.

 

Nesse caso, você deveria colocar um clear: both; no rodapé, e não tentar espaçá-lo usando margin-top com um valor tão absurdo.

 

Não conheço o teu layout final, mas isso aqui costuma ser desnecessário:

<div id="menu">
      <ul>
é muito comum, e na maioria dos casos pode ser trocado por:

<ul id="menu">
excesso de marcação HTML é 'errado'.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

O que o Bruno quis dizer é que na maioria das vezes que é usado margin com altíssimos valores há erros na marcação.

 

Vamos lá:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif para facilitar o manuseio do layout, crie uma div que englobe toda a página

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif na div#box defina um width já que esse valor não mudará

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif a div#menu pode ser substituída por ul#menu por que esses dois elementos são de bloco

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif quando você for fazendo as alterações vai perceber que os elementos vão se desencadeando, isso por causa do altos valores de margin. É só ir ajustando-os

 

Passe no Laboratório de Scripts para ver alguns exemplos. ;)

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunoqueiros    0

brunoqueiros
Postado

Bom eu fiz aqui seguindo o modelo do layout fixo 3 colunas reolveu a parte que estava dando errado do rodape. Agora queria saber como eu faço para deixar o desenho do slide no centro e os boxes abaixo dele.

 

http://i46.tinypic.com/2uo1lcj.jpg

 

e como eu deixo os boxes "Sobre Nós", "Amigos e Links", "Twitter" e "Galeria" um do lado do outro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

No caso do menu, terá que utilizar um float:left nos li's, e o posicionamento do slide ao centro, a área que o contém (o slide) deve ter uma largura definida e então a centralização poderá ser feita com um margin:0 auto...

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunoqueiros    0

brunoqueiros
Postado

O código esta assim. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Título do Site</title>
</head>
<body>

<div id="tudo">

	<div id="topo">
    	<div id="nav">
        <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">A empresa</a></li>
              <li><a href="#">Serviços</a></li>
              <li><a href="#">Portfólio</a></li>
              <li><a href="#">Expediente</a></li>
              <li><a href="#">Fale conosco</a></li>	  
       </ul>
        </div>
        	<div id="search">
        	  <div class="busca">Buscar...</div>
       		</div>
    </div>
	
	<div id="menu">
		<h2>Bem Vindo ao KeepMilk</h2>
	</div>
	
	<div id="conteudo">
		<img src="images/featured.png" />
	</div>
	
	<div id="noticias">
		<h3>Notícias:</h3>
		<ul>
			<li><a href="#">Sed accumsan congue</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
			<li><a href="#">Nunc ante elit nulla</a></li>
			<li><a href="#">Aliquam suscipit consequat</a></li>
			<li><a href="#">Cursus sed arcu sed</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
			<li><a href="#">Sed accumsan congue</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
			<li><a href="#">Nunc ante elit nulla</a></li>
			<li><a href="#">Aliquam suscipit consequat</a></li>
			<li><a href="#">Cursus sed arcu sed</a></li>
			<li><a href="#">Sed accumsan congue</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
		</ul>
	</div>
	
	<div id="rodape"><p>® Todos os direitos reservados | <a href="#">Web Designer</a></p></div>

</div>

</body>
</html>

e o CSS

 

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 {
	float: left;
	background-color: #0F3;
}

#conteudo {
	float: left;
	width: 370px;
	margin: 0 auto;
}

#noticias {
	margin: 35px 33px 0 0;
	float: right;
	width: 130px;
	height: 595px;
	padding: 10px;
	background-color: #F00;
}

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

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

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