Jump to content
medice99

Iniciante em CSS

Recommended Posts

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&oacute;rios" name="bot-relatorios" id="bot-relatorios" />
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ferreiradealmeida
      Prezados(as), boa tarde.
       
      Já trabalhei com webdesign e desenvolvimento frontend, mas faziam anos que não mexia com isso. Hoje sou advogado.
       
      Elaborei uma assinatura para e-mail em HTML, que quando aberta no navegador é exibida corretamente:
       

       
      Ocorre que quando a assinatura é inserida na mensagem (Microsoft Outlook 2016) a disposição dos elementos se mostra desconfigurada, assim permanecendo se a mensagem for enviada:
       

       
      Devem ter notado que a imagem que fica acima das informações é uma imagem de fundo. Já tentei também "background" na <table>, mas neste caso, apesar de aparecer no navegador a imagem sequer aparece na assinatura:
       
      <div style="max-width:716px; max-height:200px; position:relative;"> <img src="http://www.fafadv.com.br/images/assinatura.jpg" alt="imagem-assinatura" /> <div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;"> <table border="0" cellpadding="0" cellspacing="0" width="716" height="200" style="max-width:716px; max-height:200px;"> <tr> <td rowspan="3" style="width:242px;"></td> <td rowspan="3" style="width:340px; font-family:Gadugi; font-size:14px; padding:5px;"> <p><strong><span style="font-size:18px;">Daniel A. Ferreira de Almeida</span></strong><br> <span style="font-size:16px;">Advogado - OAB/SP 424.237</span></p> <p style="margin-top:-7px;">(16) 9 9373-2552<br> (16) 3421-7783</p> <p style="margin-top:-7px;"><a href="mailto:ferreiradealmeida@fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;"> ferreiradealmeida@fafadv.com.br</a><br> <a href="http://www.fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;">www.fafadv.com.br</a></p> <p style="margin-top:-7px;">Rua Marino Bruno Regini, nº 270, Sala 02<br> Nova Ribeirânia - Ribeirão Preto/SP, CEP 14096-710</p> </td> <td style="width:125px; height:67px; text-align:center;"> <a href="https://www.facebook.com/adv.faf/"> <img src="http://www.fafadv.com.br/images/logo-facebook.png" alt="logo-facebook" style="margin-top:10px;"> </a> </td> </tr> <tr> <td style="width:125px; height:66px; text-align:center;"> <a href="https://www.instagram.com/faf.adv/"> <img src="http://www.fafadv.com.br/images/logo-instagram.png" alt="logo-instagram" style="margin-top:10px;"> </a> </td> </tr> <tr> <td style="width:125px; height:67px; text-align:center;"> <a href="https://www.linkedin.com/company/faf-adv"> <img src="http://www.fafadv.com.br/images/logo-linkedin.png" alt="logo-linkedin" style="margin-bottom:5px;"> </a> </td> </tr> </table> </div> </div> Serei grato se alguém souber o que ocorre e puder colaborar.
       
      Obrigado.
    • By Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
    • By Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
    • By Thiago Duarte
      Eu tenho uma página que abri um alert ao clicar no link , só que nao cadastra e nem funciona o login.
       
       <div class="btn-box">          <a class="btn btn-color venobox vbox-item" data-toggle="modal" href="javascript:void(0)" onclick="openRegisterModal();">Start now Free </a>             <img src="images/seta.png"> </div>  
      <div class="modal-body">                               <div class="box">                                  <div class="content">                                     <!-- Login Form -->                                     <div class="loginBox">                                        <form id="login-modal" role="form"  method="post" action="#">                                           <input type="hidden" name="param" value="logar" />                                           <!-- Success/Alert Notification -->                                           <p class="lm-success"><i class="icon icon_check_alt2"></i> <strong>Congratulation! Login modal validation is working. Implement your code.</strong></p>                                           <p class="lm-failed"><i class="icon icon_close_alt2"></i><strong> Something went wrong! Insert correct value.</strong></p>                                           <!-- Input Fields -->                                           <input id="lm-email" class="form-control input-lg" type="text" placeholder="Email" name="email" required="">                                           <input id="lm-password" class="form-control input-lg" type="password" placeholder="Password" name="senha" required="">                                           <!-- Login Button -->                                           <input type="submit" class="btn btn-color" value="Login">                                           <!-- <button class="btn btn-color">Login</button> -->                                        </form>                                     </div>                                     <!-- /End Login Form -->                                  </div>                               </div>                               <!-- /End Login Form Box -->                               <div class="box">                                  <!-- Signup Form -->                                  <div class="content registerBox" style="display:none;">                                     <form id="signup-modal" role="form" method="post" action="?go=cadastrar">                                        <!-- Success/Alert Notification -->                                        <p class="sm-success"><i class="icon icon_check_alt2"></i> <strong>Congratulation! Signup modal validation is working. Implement your code.</strong></p>                                        <p class="sm-failed"><i class="icon icon_close_alt2"></i><strong> Something went wrong! Insert correct value.</strong></p>                                        <!-- Input Fields -->                                        <input id="sm-email" class="form-control input-lg" type="text" placeholder="Email" name="email" required="">                                        <input id="sm-password" class="form-control input-lg" type="password" placeholder="password" name="password">                                        <input id="sm-confirm" class="form-control input-lg" type="password" placeholder="Repeat password" name="senha-confirm">                                        <!-- Signup Button -->                                        <!--  <button class="btn btn-color">Create an account</button> -->                                        <input type="submit" class="btn btn-color" value="Create an account">                                     </form>                                  </div>                                  <!-- /End Signup Form -->                               </div>                               <!-- /End Signup Form Box -->                            </div>  
      e em baixo do </html> coloquei
        <?php           $param = (empty($_POST['param'])) ? 'error' : $_POST['param'];           if($param == 'logar'){       //if($_POST['param'] == 'logar'){             $email = $_POST['email'];             $password = $_POST['password'];             $query1 = mysql_num_rows(mysql_query("SELECT * FROM usuario WHERE email = '$email' AND password = '$password'")) or die(mysql_error());             if($query1 == 1){           // print "<script>alert('logou');</script>";              print "<script>window.location.replace('dashboard/index.php');</script>";           }else{              echo "<script>alert('User and password do not match.'); history.back();</script>";           }        }        if(@$_GET['go'] == 'cadastrar'){           // $dominio_gratis = $_POST['dominio_gratis'];          $email = $_POST['email'];          $password = $_POST['password'];          $date_register = date("m-d-Y");                // if(empty($dominio_gratis)){           //     echo "<script>alert('Preencha todos os campos para se cadastrar.'); history.back();</script>";           // }else          if(empty($email)){           echo "<script>alert('Fill in all the fields to register.'); history.back();</script>";            }elseif(empty($password)){           echo "<script>alert('Fill in all the fields to register.'); history.back();</script>";        }else{           $query1 = mysql_num_rows(mysql_query("SELECT * FROM usuario WHERE email = '$email'"));           if($query1 == 1){            echo "<script>alert('User already exists.'); history.back();</script>";          }else{            mysql_query("insert into usuario (email, password, date_register, plan) values ('$email','$password','$date_register', '0')");            header("Location: dashboard/dashboard.php");         }      }   }   ?>  
      Alguem pode ajudar?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.