Ir para conteúdo

Arquivado

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

bruno4away

Posição de Div

Recommended Posts

Bom em gostaria de posicionar as 4 primeiras divs uma do lado da aoutra e as outras quatro em baixo das quatro primeiras div

O código que tenho:

- CSS

.content #box-featured{
width: 780px;
margin: 0 auto;
background-color: #FFFFFF;
background-blend-mode: color;
}
.content #featured1{
width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}
.content #featured2{
width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}
.content #featured3{
width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}
.content #featured4{
width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}
.content #featured5{
width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}
.content #featured6{
width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}
.content #featured7{
width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}
.content #featured8{
width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}

- HTML

<div id="box-featured">
<div id="featured1">
<p><a href="#">featured</a></p>
</div>
<div id="featured2">
<p><a href="#">featured</a></p>
</div>
<div id="featured3">
<p><a href="#">featured</a></p>
</div>
<div id="featured4">
<p><a href="#">featured</a></p>
</div>
<div id="featured5">
<p><a href="#">featured</a></p>
</div>
<div id="featured6">
<p><a href="#">featured</a></p>
</div>
<div id="featured7">
<p><a href="#">featured</a></p>
</div>
<div id="featured8">
<p><a href="#">featured</a></p>
</div>
</div>

Eu gostaria de manter o background da "box-featured" em relação com as outras divs..

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, limpa seu código primeiro, toda propriedade que se repete em todas as divs crie uma classe com essas propriedades e atribua essas classes para todas as divs ao invés de setar todas em todos os IDs.

quanto ao posicionamento..

defina a div maior que conterá as 8 menores alinhadas e determine o tamanho das divs menores de forma que caibam apenas 4 dentro do tamanho da div maior.. defina o position relative e float left dessas divs e margim left 10 ou 5% para distribui-las uniformemente.. dessa forma poderá ter quantas divs quiser sempre divididas de 4 em 4

Compartilhar este post


Link para o post
Compartilhar em outros sites

O Gerciley sugeriu que você fizesse isso no seu código:

.content #box-featured{
width: 780px;
margin: 0 auto;
background-color: #FFFFFF;
background-blend-mode: color;
}
.content .featured{
width: 160px;
padding: 10px 17.5px 10px 17.5px;
background-color: #FFF;
float: left;
}
<div class="content">
	<div id="box-featured">
    	<div class="featured" id="featured1">
			<p><a href="#">featured</a></p>
		</div>
        <div class="featured" id="featured2">
			<p><a href="#">featured</a></p>
		</div>
        <div class="featured" id="featured3">
			<p><a href="#">featured</a></p>
		</div>
        <div class="featured" id="featured4">
			<p><a href="#">featured</a></p>
		</div>
        <div class="featured" id="featured5">
			<p><a href="#">featured</a></p>
		</div>
        <div class="featured" id="featured6">
			<p><a href="#">featured</a></p>
		</div>
        <div class="featured" id="featured7">
			<p><a href="#">featured</a></p>
		</div>
        <div class="featured" id="featured8">
			<p><a href="#">featured</a></p>
		</div>
    </div>
</div>

Eu não entendi oq você quis dizer com isso: "Eu gostaria de manter o background da "box-featured" em relação com as outras divs..". Já que o bg é branco e branco então não faz diferença

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo, acho que você quer um resultado igual a este, não?
###HTML ###

<div id="pagina">
<div class="box">Caixa1</div>
<div class="box">Caixa2</div>
<div class="box">Caixa3</div>
<div class="box">Caixa4</div>
<div class="box">Caixa5</div>
<div class="box">Caixa6</div>
<div class="box">Caixa7</div>
<div class="box">Caixa8</div>
</div>

###CSS ###
#pagina{background:#000;margin:0 auto;padding:0;width:90%;}
.box{background:#CCC;margin:0 2% 1% 0;padding:0;width:21%;overflow:hidden;float:left;}

Acredito que o resultado será igual a esse que você está querendo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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