Iniciante em CSS
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>Discussão (3)
Carregando comentários...