Formatação E Disposição Blocos Css

#1 ThinkBrunus

Normal

Usuários
89 posts

Sexo:Masculino

Posted 17/06/2009, 07:42

Viva!
Estou a desenvolver um painel de administração de raiz, e neste faço a verificação das permissões do utilizador logado. Conforme o ou os níveis de permissão, é apresentado um bloco ou módulo correspondente à autenticação. Para tal estou a utilizar o seguinte código:

for($i = 0; $i < $total_acessos; $i++){
		switch ($acessos[$i]):
			case 1:
				include_once($_SERVER['DOCUMENT_ROOT'] . "/admin/transportes/index.php");	
				include_once($_SERVER['DOCUMENT_ROOT'] . "/admin/noticias/index.php");					
				include_once($_SERVER['DOCUMENT_ROOT'] . "/admin/alardo/index.php");					
				break;
				case 2:
				echo "<div id='pBlock'>"; 
				include($_SERVER['DOCUMENT_ROOT'] . '/admin/transportes/index.php');
				echo "</div>";				
				break;
			case 3:
				echo "<div id='pBlock'>"; 				
				include_once($_SERVER['DOCUMENT_ROOT'] . "/admin/noticias/index.php");
				echo "</div>";					
				break;					
			case 4:
				echo "<div id='pBlock'>"; 				
				include_once($_SERVER['DOCUMENT_ROOT'] . "/admin/alardo/index.php");
				echo "</div>";					
				break;					
			default:
					echo "<b>Utilizador</b>";
				break;					
		endswitch;
	  }

Desta forma, pretendo que, por exemplo um utilizador que tenha 4 tipos de permissões sejam apresentados os blocos correspondentes dois a dois, ou seja:

_________________________
| bloco 1 | bloco 2 |
|----------------|--------------- |
| bloco 3 | bloco 4 |
|____________|___________|

Uma coisa assim, estou a tentar dispor os elementos de forma automatizada com o código css seguinte:

#pBlockUser{
	width:100%;
	height:100%;
	font-size:0.9em;
	font-stretch:normal;
	font-family:Tahoma;
	background:#99CCFF;
}
#pMainBlock{
	width:490px;
	height:100%;
	display:table;
}
#pBlock{
	width:100%;
	height:100%;
	position:relative;
	display:table-cell;
}

Tenho experimentado várias formas conforma vou encontrando nas minhas pesquisas e leituras, mas não estou a chegar lá.
Alguém me poderia dar umas luzes de como posso chegar lá?
Obrigado!

#2 Kahor

12 Horas

Usuários
230 posts

Sexo:Masculino

Posted 17/06/2009, 09:27

voce quer fazer 4 blocos usando css?

#3 ThinkBrunus

Normal

Usuários
89 posts

Sexo:Masculino

Posted 17/06/2009, 10:07

#4 Alex Hiroshi

Super Veterano

Ex-Admins
4923 posts

Sexo:Masculino
Localidade:São Paulo - SP

Posted 17/06/2009, 10:46

Antes é bom trocar o id das divs por class. O id é único, não pode se repetir na mesma página.

Para fazer isso, você pode usar um float nessas divs.

. pBlock {float:left;}

Assim vai ficar um do lado do outro e quando tiver um espaço menor, a div que não couber vai para baixo da primeira.

#blocos {width:310px;}
.pBlock {float:left; width:150px; height:100px; border:1px solid red; margin:1px;}

<div id="blocos">
   <div class="pBlock"></div>
   <div class="pBlock"></div>
   <div class="pBlock"></div>
</div>

Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#5 MaikeL

Novato no fórum

Usuários
17 posts

Sexo:Não informado

Posted 19/06/2009, 14:52

Bem, não sei se intendi ao certo sua duvida, mas veja.

<style type='text/css'>

<!--
body { margin:0px; }

#geral {
	border:1px #000 solid;
	width:230px;
	height:130px;
}

#b1 {
	border:1px #000 solid;
	width:100px;
	height:50px;
	text-align:center;
	position:absolute;
	left:10px;
	top:10px;
}

#b2 {
	border:1px #000 solid;
	width:100px;
	height:50px;
	text-align:center;
	position:absolute;
	left:120px;
	top:10px;
}

#b3 {
	border:1px #000 solid;
	width:100px;
	height:50px;
	text-align:center;
	position:absolute;
	left:10px;
	top:70px;
}

#b4 {
	border:1px #000 solid;
	width:100px;
	height:50px;
	text-align:center;
	position:absolute;
	left:120px;
	top:70px;
}
-->

</style>
</head>
<body>


  <?php
   $valor=4;
   
 switch ($valor)
	  {	
	case 1:
	 	echo "<div id='b1'>";
		 echo "bloco 1";	 
	 	echo "</div>";
	 	break;

	case 2:
	 	echo "<div id='b2'>";
		 echo "bloco 2";
	 	echo "</div>";
	 	break;

	case 3:
	 	echo "<div id='b3'>";
		 echo "bloco 3";
	 	echo "</div>";
	 	break;

	case 4:
	 	echo "<div id='b4'>";
		 echo "bloco 4";
	 	echo "</div>";
	 	break;
	
	default:
		echo "Nenhum box";
	}
  ?>

Mesmo se aparecer só uma, ela ficara no respectivo lugar.
Espero que eu tenha intendido e pude ajudar, qualquer duvida só falar ai.

Edição feita por: *MaikeL*, 19/06/2009, 21:50.

#1 ThinkBrunus

#2 Kahor

#3 ThinkBrunus

#4 Alex Hiroshi

#5 *MaikeL*

1 user(s) are reading this topic

Entrar

#5 MaikeL