Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.jpg)
http://vldesigner.com.br/totvs/upload/fluxo_div.png
Um muito obrigado a quem puder me ajudar.
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"></div>
<div class="cima"></div>
<div class="cima"></div>
<div class="cima"></div>
<div class="baixo"></div>
<div class="baixo"></div>
<div class="baixo"></div>
</div> <!-- fim div meio -->.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;
}valterleonardo.com.br/fluxo/index2.php
bem simples cara:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>.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>Note que é bem simples fazer isso com php, basta dar a classe top as divs impares, e a classe bottom as divs pares.
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!
não.
vc precisa aumentar a largura do container conforme o número de caixas cresca.
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!
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")
Entendi,
Obrigado William, gostei do seu site, muita coisa interessante. Passarei a frequentar. Obrigado!
Quer pronto?