Ir para conteúdo

POWERED BY:

Arquivado

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

valtinho2005

Criar fluxograma CSS + PHP

Por , em Desenvolvimento frontend

Recommended Posts

valtinho2005    0

valtinho2005
Postado

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

valtinho2005    0

valtinho2005
Postado

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

William Bruno    1501

William Bruno
Postado

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

valtinho2005    0

valtinho2005
Postado
  • 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

William Bruno    1501

William Bruno
Postado

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

valtinho2005    0

valtinho2005
Postado

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

William Bruno    1501

William Bruno
Postado

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
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