Ir para conteúdo

POWERED BY:

Arquivado

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

Fogomax

Alinhar tudo na horizontal

Por , em Desenvolvimento frontend

Recommended Posts

Fogomax    1

Fogomax
Postado

Bem, faz uns dias que eu estou tentando fazer uma lista de amigos, para um site que estou fazendo.

Eu já fiz o CSS da caixa principal, cabe duas sub-caixas uma do lado da outra, mas quando vem mais uma, todas elas se alinham uma em baixo da outra.

Alguém pode me ajudar?

Aqui os códigos que ja fiz:

 

CSS:

 


#amigos_user {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
width:180px;
height:210px;
margin-top:5px;
margin-left:10px;
background-color:#009933;
border-style:solid;
border-color:#005e20;
border-width:2px;
overflow:auto;
overflow-x:hidden;
}

#up_boxes {
background-color:#007427;
width:100%;
height:25px;
font-size:18px;
color:#0f0f0f;
padding:5px;
}

#all_boxes {
width:75px;
min-height:120px;
margin-left:8px;
padding-top:10px;
float:left;
}

#item_boxes {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
overflow:auto;
width:75px;
height:90px;
background-color:#003333;
}

#nome_boxes {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
background-color:#999999;
margin-top:3px;
min-height:10px;
}

 

HTML/PHP:

<div id="amigos_user">
   <center><div id="up_boxes">Meus amigos</div></center>
   <?php
      $sql_amgs = mysql_query("Select * From amigos_add",$myconect);

	  while ($amgs = mysql_fetch_row($sql_amgs)) {
		  echo "<div id='all_boxes'>";
		  echo "<div id='item_boxes'></div>";
		  echo "<center><div id='nome_boxes'>$amgs[4]</div></center>";
		  echo "</div>";
	  }
?>

  </div>

 

Quero que todas elas se alinhem a direita automaticamente, e que criem uma barra de rolagem horizontal, ao invés de ficar descendo e criando uma barra de rolagem vertical.

 

O HTML sem PHP fica assim:

<div id="amigos_user">
   <center><div id="up_boxes">Meus amigos</div></center>
<div id='all_boxes'>
<div id='item_boxes'><!--Aqui fica a foto, mas por simplicidade ainda não coloquei--></div>
<center><div id='nome_boxes'><!--Nome da pessoa--></div></center>
</div></div>

 

Alguém pode me ajudar? Por favor. ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fogomax    1

Fogomax
Postado

André, eu mudei a div #all_boxes pra inline ou inline-block e não ajudou.

Então mudei a div #amigos_user, inline-block não fez diferença, mas o inline aumentou e deixou em grade, mas ele não criou um overflow, e foi para baixo. Sem falar que o background sumiu e o bloco também.

 

Tem outra solução? ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Com jQuery (acho que sou viciado nesse fw :s ) serve?

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste iMasters</title>
<style type="text/css">
#amigos_user {
border-radius: 7px;
width: 180px;
height: 210px;
margin: 5px 0 0 10px;
background: #093;
border: 2px solid #005E20;
}
#up_boxes {
background: #007427;
height: 25px;
font-size: 18px;
color: #0f0f0f;
padding: 5px;
text-align: center;
}
#mid_boxes {
overflow: auto;
overflow-y: hidden;
}
.false_boxes {
width: /* VIA JS, COMO É DINÂMICO ;) */;	
}
.all_boxes {
width: 75px;
min-height: 120px;
margin: 0 0 0 8px;
padding: 10px 0 0 0;
float: left;
}
#item_boxes {
border-radius: 7px;
overflow: hidden;
width: 75px;
height: 90px;
background: #033;
}
#nome_boxes {
border-radius: 7px;
background-color: #999;
margin: 3px 0 0 0;
min-height: 10px;
text-align: center;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function overflowBoxe(){
var qntBoxes = $('.all_boxes').size()
$('.false_boxes').css({
	'width':qntBoxes*83 /*Largura real de cada box, contando margem, espaçamento e borda*/
})
}
$(function(){
overflowBoxe()
})
</script>
</head>

<body>
<div id="amigos_user">
<div id="up_boxes">Meus amigos</div>
<div id="mid_boxes">
	<div class="false_boxes">
		<div class='all_boxes'>
			<div id='item_boxes'><!--Aqui fica a foto, mas por simplicidade ainda não coloquei--></div>
			<div id='nome_boxes'>Lorem ipsum dolor sit amet</div>
		</div>
		<div class='all_boxes'>
			<div id='item_boxes'><!--Aqui fica a foto, mas por simplicidade ainda não coloquei--></div>
			<div id='nome_boxes'>Lorem ipsum dolor sit amet</div>
		</div>
		<div class='all_boxes'>
			<div id='item_boxes'><!--Aqui fica a foto, mas por simplicidade ainda não coloquei--></div>
			<div id='nome_boxes'>Lorem ipsum dolor sit amet</div>
		</div>
		<div class='all_boxes'>
			<div id='item_boxes'><!--Aqui fica a foto, mas por simplicidade ainda não coloquei--></div>
			<div id='nome_boxes'>Lorem ipsum dolor sit amet</div>
		</div>
	</div>
</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fogomax    1

Fogomax
Postado

André Campos, muito obrigado mesmo!

Mas tem como usar um scrollbar mais personalizada com jQuery?

Eu tentei instalar uma embaixo mas não tive sucesso.

Você pode me explicar as divs que criou, e me orientar nisso? ^_^

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