Ir para conteúdo

POWERED BY:

Arquivado

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

valtinho2005

Criar fluxograma CSS + PHP

Recommended Posts

Bom dia!

 

Preciso criar um Fluxograma em php com CSS para que eu possa inserir e retornar variaveis do banco de dados.

Como sou meio leigo na parte de CSS, montagem de divs etc, estou meio perdido.

 

Gostaria de implementar este fluxograma em php usando css, depois eu me viro na integração com banco e geração de dados, preciso da estrutura primeiramente.

 

Tenho um exemplo pronto e um rascunho de como ficaria.

 

http://vldesigner.com.br/totvs/upload/resumo%20atendimento%20(3).jpg

 

http://vldesigner.com.br/totvs/upload/fluxo_div.png

 

Um muito obrigado a quem puder me ajudar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não, quero ajuda. Como eu disse, sou programador php, mas sou leigo em CSS HTML. Gostaria de um Norte para seguir.

Estou na dúvida de criar div em ordem e fazer aquela separação de uma pra outra.

 

 

Eu estava pensando em criar assim:

 

 

 

primeiro a div (verde) de cima, com margin right do mesmo tamanho dela (200px) para ele comecar da esquerda e ir "pulando" (dar efeito de uma sim e outra nao).

E na div de baixo, com margin left do mesmo tamanho dela para comecar do segundo, e ir intercalando igual na de cima.

 

Isso seria perfeito para criar o back-end em php e inserir valores do banco

 

ja da div do meio, eu me perdi um pouco, porque tem que acompanhar no tamanho, a quantidade de divs de cima e de baixo.

 

e logico, criar uma div "mestre" onde tudo isso estaria dentro.

 

Se puderem me ajudar...agradeceria!

 

HTML


<div class="meio">

<div class="cima">
teste cima
</div>
<div class="cima">
teste cima
</div>
<div class="cima">
teste cima
</div>
<div class="cima">
teste cima
</div>
<div class="baixo">
teste baixo
</div>
<div class="baixo">
teste baixo
</div>
<div class="baixo">
teste baixo
</div>


</div> <!-- fim div meio -->

CSS

.cima{
	width:200px;
	margin-right:200px;
	background-color:#F00;
	margin-bottom:50px;
	clear:both;
}
.meio{
	width:100%;
	height:auto;
}
.baixo{
	width:200px;
	clear:both;
	margin-left:200px;
	background-color:#F00;
	margin-top:50px;
}

Para testar online:

valterleonardo.com.br/fluxo/index2.php

Compartilhar este post


Link para o post
Compartilhar em outros sites

bem simples cara:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

<style>
.fleft { float: left; }
.box {
	background: #ccc;
	width: 100px; height: 100px;
	margin-right: 30px;
}
.top {
	
}
.bottom {
	margin-top: 120px;
}
</style>
</head>
<body>
	<div class="box top fleft">1</div>
	<div class="box bottom fleft">2</div>
	<div class="box top fleft">3</div>
	<div class="box bottom fleft">4</div>
	<div class="box top fleft">5</div>
	<div class="box bottom fleft">6</div>
	<div class="box top fleft">7</div>
</body>
</html>

só precisei usar margin-top nas divs q quero q fiquem embaixo.

Note que é bem simples fazer isso com php, basta dar a classe top as divs impares, e a classe bottom as divs pares.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • William Bruno

Perfeito cara, vlw!

 

Mais uma coisa, por exemplo, quando um crio mais de 10 caixas e chega no fim da página, ele quebra a linha e começa novamente pela esquerda.

Tem como ele continuar a criar as caixas para direita, sem limite de width?

 

abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

não.

 

vc precisa aumentar a largura do container conforme o número de caixas cresca.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não, entendi.

 

Eu não posso setar um largura, como terá inserção de variáveis pelo MySql, pode ter poucos dados como pode ter muito. Minha intenção é que ele fique sempre crescendo para direita, nunca quebra linha igual paragrafo quando chegar no fim da tela.

 

Pode me ajudar a fazer isso?

 

Outra coisa, não entendi aquela class top em branco, pode explicar?

 

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

a class top não faz nada. Simples assim.

 

pq não precisa fazer.

 

 

vc seta a largura dinâmicamente! basta contar o número de itens q vc vai colocar e multiplicar, ai vc coloca a largura via php tb.(style="width: ...px")

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.