Ir para conteúdo

POWERED BY:

Arquivado

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

Nícolas Luís Huber

Posicionamento de Divs

Por , em Desenvolvimento frontend

Recommended Posts

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

Olá comunidade iMasters, eu estou aqui mais uma vez, já estou com dor de cabeça com esse projeto. Tenho que construir o layout da seguinte forma:

 

http://img528.imageshack.us/img528/7323/95417121.png

 

Porém eu não sei como projetar bem o CSS para deixar com o mesmo efeito, eu resolvi exportar como imagem PNG aquele quadro verde e criei as seguintes estruturas:

 

http://img341.imageshack.us/img341/3502/40505197.png

 

HTML

<div id="latestRecipes">
<img src="img/ultimasReceitas.png" alt="" />
 <div id="latestRecipesBackground">

 Aqui fica as últimas receitas
 </div>
</div>

 

CSS

/* Latest Recipes */
#latestRecipes{width: 1020px; height: auto; margin: 0 auto 54px auto; color: #FFF;}
#latestRecipesBackground{width: 100%; height: auto; background: url(../img/bgTopBody.png) repeat-x;}
#latestRecipes img{position: relative; left: 338px;}

 

Como posso estruturar o CSS para conseguir o resultado esperado??? Deixando o quadro verde, alguns pixeis acima???

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian Madrid    1

Cristian Madrid
Postado

Opa cara, como vai ?

Eu fiz a estrutura para você poder simular o slide das imagens, segue :P

 

<html>
<head>
<style type="text/css">
#latestRecipes{width: 1020px; height: 200px; margin: 0 auto 54px auto; background:red;}
#latestRecipes .title{width:30%;height:50px;margin:0 auto 2px;background:green;}
#latestRecipes .controll{width:4%;height:120px;background:blue;float:left;}
#latestRecipes .controllright{float:right;}
#latestRecipes .controll .arrow{width:96%;margin:50px 4px;}

#latestRecipes .boxphotos{width:92%;float:left;background:yellow;}
#latestRecipes .boxphotos .photo{width:135px;height:100px;background:grey;float:left;margin:10px 10px;}

</style>
</head>
<body>
<div id="latestRecipes">
<div class="title">
</div>
<div class="controll">
	<div class="left arrow"> < </div>
</div>
<div class="boxphotos">
	<div class="photo">Photo1</div>
	<div class="photo">Photo2</div>
	<div class="photo">Photo3</div>
	<div class="photo">Photo4</div>
	<div class="photo">Photo5</div>
	<div class="photo">Photo6</div>
</div>
<div class="controll controllright">
	<div class="right arrow"> > </div>
</div>
</div>
</body>
</html>

 

Espero ter ajudo

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