Ir para conteúdo

POWERED BY:

Arquivado

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

Jean Felipe !

CSS para as notícias.

Por , em Desenvolvimento frontend

Recommended Posts

Jean Felipe !    0

Jean Felipe !
Postado

Problema com as DIVs, eu precisava formar elas para o sistema de notícias em meu novo site, mas não estou conseguindo alinhar corretamente as coisas. (não acho tutorial adequado para o que eu quero, só explicação simples) - Como podem ver na imagem abaixo, coloquei os espaços separados por cores, a div preta que segura tudo teria 500 de largura até uma média de 140 de altura, dai tem o resto das divs que estão sendo indicadas cada uma com sua própria cor. A barra laranja no final seria aquelas divisórias que colocam a cada notícia.

 

É bem simples, vendo a imagem já consegue-se ter em mente como fazer, mas não estou conseguindo alinhar elas. Alguém poderia ajudar com um modelo próprio em CSS? (só falta isso pro projeto das notícias terminar)

 

prev3.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jean Felipe !    0

Jean Felipe !
Postado

A questão é que não estou conseguindo alinhar as coisas exatamente como desejo, como está na imagem. Então como expliquei acima, estava pedindo para alguém me ajudar com um modelo pronto do modo que está indicando na imagem (cada cor é uma DIV de CSS, fora a linha de divisória). Assim posso terminar meu projeto. =)

 

Só estou falando da caixinha que fiz abaixo do "Notícias/Updates" na imagem

Parece que não, mas está bem complexo alinhar as divs corretamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

Jean, boa noite.

 

Pensando em seu aprendizado não usei os tamanhos mencionado em seu post. Assim, você terá que fazer contas ai para alinhar as divs, mais a estrutura é essa:

 

<!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>Documento sem título</title>
<style>
#geral {
	width: 850px;
	height:250px;	
}

#primeiro {
	width:250px;
	height:250px;
	float:left;
	background:#00C;	
}

#segundo {
	width:600px;
	height:200px;
	float:left;
	background:#09F;	
}

#terceiro {
	width:300px;
	height:50px;
	float:left;
	background:#f00;	
}
#quarto {
	width:300px;
	height:50px;
	float:left;
	background:#0F0;	
}
</style>
</head>

<body>
<div id="geral"><!--div que engloba as div que você deseja no modelo-->
       <div id="primeiro">

       </div><!--primeiro-->
       <div id="segundo">

       </div><!--segundo-->
       <div id="terceiro">

       </div><!--terceiro-->
       <div id="quarto">

       </div><!--quarto-->
</div><!--geral-->
</body>
</html>

 

Aqui isso fico justim igual dedo no nariz :clap:

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