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 a todos,
Estou iniciando na programação web profissionalmente aqui no trabalho, porém já brincava com linguagens de web (html/css/js e um pouco de php) a algum tempo.
Entretanto agora que estou pegando firme, surgem diversas dúvidas referente a posicionamentos e etc...
Gostaria de saber se é normal enxer o código html de divs?
Por exemplo, fiz uma página inicial para uma intranet onde irei colocar alguns paineis ao centro da tela com um breve resumo da área que será redirecionada ao clicar em um botão.
Já consegui posicionar os campos do jeito que eu planejava, entretanto eu devo ter utilizado já uns 20 divs diferentes para posicionar tudo.
Estou anexando o código e pelo que podem ver coloquei uma 'div geral' onde amarra todos os elementos.
Uma div para o cabeçalho/menu, uma para a saudação de bem-vindo e outras várias para os paineis.
Não sei se é o correto, entretanto foi a maneira mais fácil que eu encontrei pra encaixar tudo rs...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
include '../include/validaSessao.php';
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dona Clara Produtos de Limpeza</title>
<style type="text/css">
body{
width: 960px;
margin-left: auto;
margin-right: auto;
}
div{
border: 1px solid black;
}
#artigos{
display: table;
margin-left: auto;
margin-right: auto;
}
#vendas, #cadastros, #relatorios{
width: 300px;
height: 450px;
display: block;
position: relative;
float: left;
margin-left: 10px;
}
#relatorios{
margin-right: 10px;
}
#artigos input{
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
background-color:#007dc1;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #124d77;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
}
#botao-relatorios, #botao-vendas, #botao-cadastros{
display: table;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Cadastros</a></li>
<li><a href="#">Relatórios</a></li>
</ul>
</div>
<br/>
<div>
<?php
setlocale(LC_ALL, 'pt_BR', 'pt_BR.utf-8', 'pt_BR.utf-8', 'portuguese');
date_default_timezone_set('America/Sao_Paulo');
echo "Bem vindo " . ucfirst(strtolower($logado)) ."\n";
echo "$var <br>";
echo "$var <br>";
echo "Hoje é " . strftime('%A, %d de %B de %Y', strtotime('today'));
?>
</div>
<br/>
<div id="artigos">
<div id="vendas">
<div id="artigo-vendas">
<p>vendas</p>
</div>
<div id="botao-vendas">
<form action="./vendas">
<input type="submit" value="Vendas" name="bot-vendas" id="bot-vendas" />
</form>
</div>
</div>
<div id="cadastros">
<div id="artigo-cadastros">
<p>cadastros</p>
</div>
<div id="botao-cadastros">
<form action="./cadastros">
<input type="submit" value="Cadastros" name="bot-cadastros" id="bot-cadastros" />
</form>
</div>
</div>
<div id="relatorios">
<div id="artigo-relatorios">
<p>RELATORIOS</p>
</div>
<div id="botao-relatorios">
<form action="./relatorios">
<input type="submit" value="Relatórios" name="bot-relatorios" id="bot-relatorios" />
</form>
</div>
</div>
</div>
</body>
</html>Entendi, na verdade como estou iniciando agora então ainda fica meio confuso manter 2 arquivos separados.
Por isso faço dessa maneira até chegar ao ponto que preciso e ao final de toda customização eu pretendia mesmo jogar o código para um arquivo separado.
Porém em relação as divs? você acha que meu código tem algum erro de boas práticas além do CSS estar no mesmo arquivo?
Teria alguma outra forma de fazer o que fiz, sem usar tanta div ou não tem problema ficar assim?
Ao meu ver não há problema algum, apenas insira alguns comentários para facilitar o entendimento de oque cada uma delas é, ou faz.
Tudo isso é muito relativo, mas fica mais agradável ao código e em "boas praticas" se você criar um arquivo .css que vá receber o código das suas div e instanciar ele dentro do seu HTML, deixando assim mais organizado.