Ir para conteúdo

Arquivado

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

douglas79

Layout mexe ao clicar nos links

Recommended Posts

Boa noite,

 

Estou desenvolvendo um sistema e montei um layout. Só que quando vou clicar nos links, ora mexe pra esquerda, ora pra direita. O que pode ser isso?

 

Vou postar parte do código em CSS:

 

div#geral{width: 1000px; height:auto;}

*{padding:0;margin:0 auto;}
section#cad-guardas{width:830px;height:auto;float:left;}

 

Por exemplo, quando clico nessa página, ela dá uma 'sambada' pra direita e chamo a outra vai pra esquerda. Falta alguma coisa?

 

Aguardo respostas e peço ajuda de todos!

[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites
2 horas atrás, douglas79 disse:

Por exemplo, quando clico nessa página

Que página seria?

 

Pode ser muita coisa que é muito vago sem saber com o que mostrou.....

Propriedades sendo re-escritas pelo fato de está usando identificador DIV.ID ao invés de DIV.CLASS.

iframe, div com ajax, div ocultas, má estruturação do layout etc...

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

O Código HTML: cad-guardas.php

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Área Administrativa</title>
<link href="css/admin-css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="geral">
    <header class="topo">
    </header>
<div class="saudacao">
  <script type="text/javascript">
        var data    = new Date();
        var sem     = data.getDay();
        var dia     = data.getDate();
        var mes     = data.getMonth();
        var ano     = data.getFullYear();
        var meses   = new Array(11);
        var semana  = new Array(6);
        var horario = new Date();
        var hora    = horario.getHours();
        
        semana[0] = "Domingo";
        semana[1] = "Segunda-Feira";
        semana[2] = "Terça-Feira";
        semana[3] = "Quarta-Feira";
        semana[4] = "Quinta-Feira";
        semana[5] = "Sexta-Feira";
        semana[6] = "Sábado";
        
        meses[0]  = "Janeiro";
        meses[1]  = "Fevereiro";
        meses[2]  = "Março";
        meses[3]  = "Abril";
        meses[4]  = "Maio";
        meses[5]  = "Junho";
        meses[6]  = "Julho";
        meses[7]  = "Agosto";
        meses[8]  = "Setembro";
        meses[9]  = "Outubro";
        meses[10] = "Novembro";
        meses[11] = "Dezembro";
        
        if(ano < 1000) {
            ano+=1900;
        }
        document.write(semana[sem] + ', ' + dia + ' de ' + meses[mes] + ' de ' + ano + '.'); 
    </script>
</div>
<nav class="menu">
    <ul>
        <li><a href="cad-usuarios.php">Cadastro Usuário</a></li>
        <li><a href="cad-guardas.php">Cadastro Guardas</a></li>
        <li><a href="listar-usuarios.php">Listar Usuários</a></li>
        <li><a href="#">Listar Guardas</a></li>
        <li><a href="<?php echo $logoutAction ?>">Sair do Sistema</a></li>
        <li class="usuario">Usuário:&nbsp;<?php echo $_SESSION['MM_Username']; ?></li>
    </ul>
    </nav>
    <section class="cad-guardas">
      <form method="post" name="form1" id="cadguardas" action="<?php echo $editFormAction; ?>">
        <table class="tbl_cadguardas" align="center">
          <tr valign="baseline">
            <td class="nome-guarda" nowrap align="right">Nome:</td>
            <td><input type="text" name="nome" value="" size="50" placeholder="Informe o nome" required></td>
          </tr>
          <tr valign="baseline">
            <td class="cargo-guarda" nowrap align="right">Cargo:</td>
            <td><input type="text" name="cargo" value="" size="32" placeholder="Informe o cargo" required></td>
          </tr>
          <tr valign="baseline">
            <td class="matricula-guarda"nowrap align="right">Matricula:</td>
            <td><input type="text" name="matricula" value="" size="15" placeholder="Informe a matrícula" required></td>
          </tr>
          <tr valign="baseline">
            <td class="endereco-guarda" nowrap align="right">Endereco:</td>
            <td><input type="text" name="endereco" value="" size="50" placeholder="Informe o endereço"></td>
          </tr>
          <tr valign="baseline">
            <td class="bairro-guarda" nowrap align="right">Bairro:</td>
            <td><input type="text" name="bairro" value="" size="32" placeholder="Informe o bairro" required></td>
          </tr>
          <tr valign="baseline">
            <td class="cidade-guarda" nowrap align="right">Cidade:</td>
            <td><input type="text" name="cidade" value="" size="30" placeholder="Informe a cidade"></td>
          </tr>
          <tr valign="baseline">
            <td class="uf-guarda" nowrap align="right">UF:</td>
            <td><label for="sltUF"></label>
              <select name="sltUF" size="1" id="sltUF">
                <option value="AC" selected="selected">AC</option>
                <option value="AL">AL</option>
                <option value="AM">AM</option>
                <option value="AP">AP</option>
                <option value="BA">BA</option>
                <option value="CE">CE</option>
                <option value="DF">DF</option>
                <option value="ES">ES</option>
                <option value="GO">GO</option>
                <option value="MA">MA</option>
                <option value="MG">MG</option>
                <option value="PA">PA</option>
                <option value="PB">PB</option>
                <option value="PE">PE</option>
                <option value="PI">PI</option>
                <option value="RJ">RJ</option>
                <option value="RN">RN</option>
                <option value="RO">RO</option>
                <option value="RR">RR</option>
                <option value="RS">RS</option>
                <option value="SE">SE</option>
                <option value="SP">SP</option>
                <option value="TO">TO</option>
            </select></td>
          </tr>
          <tr valign="baseline">
            <td class="telfixo-guarda" nowrap align="right">Telefone Fixo:</td>
            <td><input type="text" name="telfixo" value="" size="32" placeholder="Informe o telefone fixo" required></td>
          </tr>
          <tr valign="baseline">
            <td class="celular-guarda" nowrap align="right">Celular:</td>
            <td><input type="text" name="telcelular" value="" size="32" placeholder="Informe um celular" required></td>
          </tr>
          <tr valign="baseline">
            <td class="email-guarda" nowrap align="right">E-mail:</td>
            <td><input type="text" name="email" value="" size="40" placeholder="Informe um email" required></td>
          </tr>
          <tr valign="baseline">
            <td class="rg-guarda" nowrap align="right">RG:</td>
            <td><input type="text" name="rg" value="" size="12" placeholder="Informe o RG" required></td>
          </tr>
          <tr valign="baseline">
            <td class="cpf-guarda" nowrap align="right">CPF:</td>
            <td><input type="text" name="cpf" value="" size="15" placeholder="Informe o CPF" required></td>
          </tr>
          <tr valign="baseline">
            <td class="cnh-guarda" nowrap align="right">CNH:</td>
            <td><input type="text" name="cnh" value="" size="20" placeholder="Informe a CNH"></td>
          </tr>
          <tr valign="baseline">
            <td class="titulo-guarda" nowrap align="right">Título de Eleitor:</td>
            <td><input type="text" name="titeleitor" value="" size="20" placeholder="Informe o Título de Eleitor" required></td>
          </tr>
          <tr valign="baseline">
            <td class="secao-guarda" nowrap align="right">Seção:</td>
            <td><input type="text" name="secao" value="" size="10" placeholder="Informe a seção" required></td>
          </tr>
          <tr valign="baseline">
            <td class="zona-guarda" nowrap align="right">Zona:</td>
            <td><input type="text" name="zona" value="" size="10" placeholder="Informe a zona de votação" required></td>
          </tr>
          <tr valign="baseline">
            <td class="escolaridade-guarda" nowrap align="right">Escolaridade:</td>
            <td><label for="sltEscolaridade"></label>
              <select name="sltEscolaridade" size="1" id="sltEscolaridade">
                <option value="EFC" selected="selected">Ensino Fundamental Completo</option>
                <option value="EFI">Ensino Fundamental Incompleto</option>
                <option value="EMC">Ensino Médio Completo</option>
                <option value="EMI">Ensino Médio Incompleto</option>
                <option value="ESC">Ensino Superior Completo</option>
                <option value="ESI">Ensino Superior Incompleto</option>
            </select></td>
          </tr>
          <tr valign="baseline">
            <td class="obs-guarda" nowrap align="right" valign="top">Observação:</td>
            <td><textarea name="obs" cols="45" rows="5" placeholder="Informe alguma observação" required></textarea></td>
          </tr>
          <tr valign="baseline">
            <td class="outros-guarda" nowrap align="right" valign="top">Outros:</td>
            <td><textarea name="outros" cols="45" rows="5" placeholder="Informe qualquer informação" required></textarea></td>
          </tr>
          <tr valign="baseline">
            <td class="outros-guarda" nowrap align="right"></td>
            <td><input name="cadgmp" type="submit" id="cadgmp" value="Cadastrar Guardas"></td>
          </tr>
        </table>
        <input type="hidden" name="MM_insert" value="form1">
      </form>
    </section>
   </div>
</body>
</html>

 

O códido em CSS: admin-css.css

 

/*CADASTRO DE GUARDAS*/

div.geral{width:1000px;height:auto;}

*{padding:0;margin:0 auto;}
section.cad-guardas{width:830px;height:auto;float:left;}
td.nome-guarda,td.cargo-guarda,td.matricula-guarda,td.endereco-guarda,td.bairro-guarda,td.cidade-guarda,td.uf-guarda,td.telfixo-guarda,td.celular-guarda,td.email-guarda,td.rg-guarda,td.cpf-guarda,td.cnh-guarda,td.titulo-guarda,td.secao-guarda,td.zona-guarda,
td.escolaridade-guarda,td.obs-guarda,td.outros-guarda{font-family:Verdana, Geneva, sans-serif;font-size:14px;padding-left:5px;}
input[type="text"]{height:20px;border-radius:5px;margin:5px;border:1px solid #00F;}
select#sltUF,select#sltEscolaridade{border-radius:5px;}
textarea{border-radius:5px;border:1px solid #00F;}
input#cadgmp{width:130px;height:35px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:14px;margin-top:10px;margin-bottom:10px;border-radius:5px;}
input[type="text"]:focus,textarea:focus{background:#03C;color:#FFF;}
input#cadgmp:hover{background:#666;color:#FFF;cursor:pointer;}

 

Troquei o div.id pelo div.class e algumas (header, section) e mesmo assim continua 'sambando'.

[]'s
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por jcvlanova
      Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada em tópicos circundados, divididos por uma espécie de caixas, boxes formados por linhas e curvas, alguém saberia me dizer como é possível fazer essas linhas curvas uma página html ???
    • Por ViniciusRamoa
      Eu peguei um site já pronto em laravel, minha ideia era só pegar o site que o cara distribuiu e mudar layout aos poucos para se adaptar para mim, eu sei, digamos, o intermediário de css e básico de Php e html, e o que eu quero alterar é só o básico como: cores, background e etc, mas mesmo eu alterando os arquivos css ou até mesmo apagando todos os arquivos css, NADA muda no site, como se fosse inútil os arquivos css, mudar a aparência no laravel é diferente? Qual o método?
      Vale lembrar que possui vários arquivos .blade (index.blade, footer.blade etc), isso tem algo a ver? Obrigado
    • Por ramonjba
      Olá pessoal. Estou desenvolvendo uma especie de monitoramento, estou utilizando o MATERIALIZE, desta forma, optei por não trabalhar com responsividade, pois preciso do máximo de informações possíveis na tela, seja desktop ou mobile, fazendo o ajuste de zoom se preciso. Fiquei cerca de dois anos sem programar, eu havia feito esse projeto para meu TCC, porém após finalizar, deixei parado e acabei perdendo. Com o tempo, algumas ideias em relação ao projeto também mudaram, e para apresentar a informações das `Torres de Internet`, utilizei o collapsible-header conforme imagem `projeto_monitor`, pois, ao clicar em cima do `equipamento`, ele apresenta informações relacionadas a ele. Estou tendo problemas para alinhar estes `collapsible-header ` pois preciso preencher toda a tela, sem deixar espaçamentos. Para isso, fiz uma classe CSS contendo: 
       
      .row .col.quadroTorre1 { margin-top: -10%; margin-bottom: 10%; } .row .col.quadroTorre2 { margin-top: -7.3%; margin-bottom: 10%; } .row .col.quadroTorre3 { margin-top: -30%; margin-bottom: 10%; } .row .col.quadroTorre4 { margin-top: -1.7%; margin-bottom: 10%; }  
      E fiz uma verificação no código, para ver qual o numero de equipamentos que a `Torre` que está acima tem. Porém, como podemos observar, na segunda linha funcionou preenchendo os espaços, mas pulando para a terceira linha, já possui uma lacuna em branco, onde deveria estar situado o elemento. Além disso, os elementos da segunda linha, acabam se sobrepondo, conforme imagem `projeto_sobrepor`. Como fiquei cerca de 2 anos sem programar, estou encontrando algumas dificuldades e empacando nelas. A parte de front-end é a que gera maior dificuldade. Se alguém puder me auxiliar, agradeço. 
       
      Edit: Se alguém tiver dicas de como posso melhorar o preenchimento das lacunas em branco. 
       


    • Por lukaizh
      Olá Galera,
       
      Estou iniciando um e-commerce pela Tray,e não entendo muito bem de css 
      eu gostaria de saber se tem como eu mudar o menu lateral esquerdo, para deixar ele na horizontal.
       
      e teria mais uma dúvida, se há alguma maneira de importar o site para o photoshop e depois pegar o css das camadas.
    • Por alisonalves
      Olá pessoal. Tenho uma dúvida que sei que é bem básica mas não estou conseguindo aprender sozinho. Antigamente usava o Dreamweaver e nele temos a opção de montar o template e definir quais as áreas do site serão editáveis, ou seja, o menu e a coluna direita aparecem em todas as páginas mas o conteúdo da esquerda é editável. Agora como estou aprendendo sobre layout responsivo, grids e tal gostaria de saber. Sem utilizar o dreamweaver como faço para deixar o menu e a coluna da direita fixas e poder editar apenas a coluna da esquerda? Como eu faço para mostrar para todas as paginas que a coluna da direita vai mostrar o mesmo conteúdo. Assim quando eu atualizar a coluna da direita já atualiza em todas as páginas. Obrigado pela força
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.