Ir para conteúdo
Gabriel Maciel

Como manter o estilo CSS de uma pagina HTML em qualquer resolução/tamanho de tela?

Recommended Posts

Olá, boa tarde pessoal

Eu estou criando uma página para o restaurante do meu padrasto, e como eu sou meio novo nesse mundo da criação web, eu estou tendo algumas dificuldades. O meu principal problema é que eu defini as posições dos elementos da página como "position: absolute;", e acho que por isso quando eu tento abrir a página em uma tela diferente ou quando eu minimizo a página o estilo dela não fica fixo, e isso é muito ruim. Na minha tela, com a janela maximizada, parece ótimo, mas quero deixar ótimo para qualquer resolução (a minha é de 1366x768). Vou aqui o código para vocês poderem dar uma olhada, e antes de nada, eu já vou dizendo que deve ter bastantes erros/redundâncias no código, mas ainda estou aprendendo. Obrigado, me ajudem por favor kkk

 

HTML:

 

<!DOCTYPE html>
<html>
<head>
    <title>MegaFome</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="mega.css">
</head>
<body>
    <header class="topo">
        <img id="marcatopo" src="megafome.jpg"><br><br>
        <div>
            <h1>COMA. SABOREIE. VIVA.</h1>
            <div class="historia">
                <h2 id="know">CONHEÇA A HISTÓRIA DO MEGAFOME</h2>
                <a href="" id="botão">Por trás das cortinas</a>
            </div>
            <img >
        </div>
    </header>
    <div class="bg-img"></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="corpo">
        <div id="first">
            <img src="585ac04a4f6ae202fedf2938.png" id="fries">
            <h1 id="firsth1">MONTE SEU PRÓPRIO BURGER</h1><br><br><br><br>
            <p id="firstp">Cansado de que outros montem o seu hambúrguer?<br>Cansado de ter que escolher sempre as mesmas opções?<br>Agora você pode montar do SEU jeito</p>
        </div>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div id="second">
            <img id="burgerpic" src="burgers-large.png">
            <h1 id="secondh1">CHEGOU O MEGAFOME</h1>
            <p id="secondp">A burgueria onde você decide o hambúrguer que você mais ama</p>
        </div>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div id="third">
            <img id="molhos" src="545884.png">
            <h1 id="thirdh1">FAÇA DO JEITO QUE VOCÊ GOSTA</h1>
            <ul id="list">
                <li>ESCOLHA A CARNE</li>
                <li>DEFINA O TAMANHO</li>
                <li>ADICIONE O QUE VOCÊ MAIS GOSTA</li>
                <li>OPTE PELO SEU PÃO FAVORITO</li>
                <li>ACRESCENTE OS ACOMPANHAMENTOS <b>QUE VOCÊ QUISER</b></li>
            </ul>
        </div>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div id="fourth">
            <img id="marca" src="garantia.png">
            <h1 id="fourthh1">E... PRONTO!</h1>
            <h2 id="fourthh2">DESFRUTE DO MELHOR BURGER<br>QUE JAMAIS HAVIA IMAGINADO</h2>
        </div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="footer">
        <h3 id="seguir">SIGA-NOS</h3>
        <a target="_blank" href="https://www.facebook.com/pointdasdeliciasburgueria/?ref=br_rs"><img id="face" src="facebook_circle-512.png"></a>
        <div class="box"></div><div class="linha"></div>
        <h3>MAIS SOBRE MEGAFOME</h3>
        <div class="form">
            <form action="http://scripts.redehost.com.br/formmail.aspx" method="post">
            <input type=hidden name="destino" value="hipnoterapiamaciel@gmail.com">
                <div>
                    <label for="name">Nome:</label>
                    <input type="text" id="name" />
                </div>
                <div>
                      <label for="mail">E-mail:</label>
                    <input type="email" id="mail" />
                </div>
                <div>
                    <label for="msg">Mensagem:</label>
                    <textarea id="msg"></textarea>
                </div>
                <div class="button">
                    <button type="submit">Enviar sua mensagem</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

______________________________________

CSS:

body {
    background-color: #e6e6e6;
    font-family: Verdana;
    color: #b90000;
}

.topo {
    text-align: center;
}

#marcatopo {
    position: absolute;
    left: 3%;
    border-radius: 100px;
    width: 15%;
    opacity: 1;
}

h1 {
    font-size: 47px;
    font-weight: bold;
    -webkit-transition: 3s ease-out;
    -moz-transition: 3s ease-out;
    -o-transition: 3s ease-out;
    transition: 3s ease-out;
}

.bg-img {
    background: url('./burguercapa.png');
    position: absolute;
      left: 0px;
      right: 0px;
      z-index: -1;
    background-size: cover;
      background: linear-gradient(to top, rgba(255, 225, 255, 0) 50%, #e6e6e6), url(burguercapa.png);
      background-size: cover;
      height: 100%;
      width: 100%;
 
}

#botão {
    text-decoration: none;
    position: absolute;
    border: 1px solid #ffcc00;
    width: 20%;
    font-size: 20px !important;
    left: 76%;
    font-weight: lighter;
    border-radius: 15px;
    bottom: 9px;
    color: white !important;
    background-color: yellow;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff6600)) !important;
    background: -webkit-linear-gradient(top, #ffcc00, #ff6600) !important;
    background: -moz-linear-gradient(top, #ffcc00, #ff6600) !important;
    background: -ms-linear-gradient(top, #ffcc00, #ff6600) !important;
    background: -o-linear-gradient(top, #ffcc00, #ff6600) !important;
    
}

#botão:hover {
    border: 1px solid #ff6600;
    background: #ff6600 !important;
    -webkit-transition: 0.5s ease-in;
    -moz-transition: 0.5s ease-in;
    -o-transition: 0.5s ease-in;
    transition: 0.5s ease-in;


}

.historia {
    border: solid;
    border-width: thin;
    border-color: darkred;
    box-shadow: 10px 10px 20px;
    width: 45%;
    position: relative;
    left: 22%;
    padding-right: 140px;
    height: 68px;
    border-radius: 25px;
}

#first {
    position: absolute;
    text-align: right;
    color: white !important;
    background: #e60000 !important;
    width: 100%;
    left: 0px;
    right: 0px;
    height: 60%;
}

#firsth1 {
    position: absolute;
    right: 25px;
}
#firstp {
    text-align: justify !important;    
    position: absolute;
    font-style: italic;
    font-size: 22px !important;
    right: 85px;
    bottom: 120px;
}

#fries {
    position: absolute;
    left: 30px;
    right: 80px;
    width: 40%;
    bottom: 100px;
}

#second {
    position: absolute;
    background: #ff9900 !important;
    width: 100%;
    left: 0px;
    right: 0px;
    height: 60%;
    top: 189%;
    color: white !important;
}

#burgerpic {
    position: absolute;
    right: 0px;
    width: 50%;
    bottom: 40px;
}

#secondh1 {
    position: absolute;
    left: 25px;
}

#secondp {
    text-align: justify !important;    
    position: absolute;
    font-style: italic;
    font-size: 22px !important;
    left: 30px;
    bottom: 145px;
}    

#third {
    position: absolute;
    text-align: right;
    color: white !important;
    background: #4d79ff !important;
    width: 100%;
    left: 0px;
    right: 0px;
    height: 60%;
}

#thirdh1 {
    position: absolute;
    right: 25px;
}

#list {
    text-align: justify !important;    
    position: absolute;
    font-style: italic;
    font-size: 22px !important;
    right: 85px;
    bottom: 120px;
}

#molhos {
    position: absolute;
    left: 30px;
    right: 80px;
    width: 30%;
    bottom: 100px;
}

#fourth {
    position: absolute;
    background: #66ff99 !important;
    width: 100%;
    left: 0px;
    right: 0px;
    height: 60%;
    top: 308.5%;
    color: white !important;
}

#fourthh1 {
    position: absolute;
    left: 25px;
}

#fourthh2 {
    text-align: justify !important;    
    position: absolute;
    font-style: italic;
    left: 160px;
    bottom: 140px;    
}

#marca {
    position: absolute;
    right: 70px;
    width: 50%;
    bottom: 100px;
}

.box {
 width: 50%;
 float: left;
 height: 200px;
}

.linha {
 border-left: 2px solid ;
 box-sizing: border-box;
}

#seguir {
    position: absolute;
    bottom: -284%;
    left: 100px;
}

#face {
    position: absolute;
    width: 4%;
    margin-top: 4%;
    left: 7%;
}

.form {
    margin-bottom: 20%;
}

#name {
    box-sizing: 
}

form {
    right: 20%;
    position: absolute;
    width: 400px;
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    display: inline-block;
    width: 90px;
    text-align: right;
}

input, textarea {
    font: 1em sans-serif;
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
}

input:focus, textarea:focus {
    border-color: #000;
}

textarea {
    vertical-align: top;
    height: 5em;
    resize: vertical;
}

.button {
    padding-left: 90px; 
}
button {
    margin-left: .5em;
}

 

Editado por Giovani
Inserida a tag code

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Gabriel Maciel

Muito bom saber que você está começando a criar layout com CSS.
A propriedades CSS position e seus valores absolute, relative e fixed não são apropriadas
para construir layout, portanto você está está iniciando seus estudos de maneira inadequada

e sua CSS está equivocada.
Sugiro que você estude as formas apropriadas de se criar layout CSS. Para isso faça uma busca no Google

por "layout CSS" e você vai descobrir como se faz.
Recrie o layout com o que aprender a se ficar dúvidas poste no fórum.
 

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@olucaslima

A informação mais básica possível foi a que passei: estude as formas apropriadas de se criar layout CSS.
Simplesmente indicar as propriedades CSS que ele deveria utilizar (suponho que o que você chamou de atributos sejam propriedades, pois não existe o termo atributo em linguagem CSS), não irá esclarecer nada para quem não conhece os fundamentos do layout CSS. Portanto, primeiro estude o que indiquei e depois poste a dúvida sobre propriedade(s) que não entendeu.  

Compartilhar este post


Link para o post
Compartilhar em outros sites

média queries, é o termo básico para estudo...
ele nos remete a perfeição em diversos dispositivos com posicionamento perfeito...
oque se vê no celular, será o mesmo no desktop...
abraços...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por LuanMartinsTI
      Eu tenho o seguinte codigo para capturar minha camera e meu audio, toda vez que eu entro na pagina x ela executa o js e pede acesso a camera de quem acessa a pagina, porem eu vou bloquear essa pagina para que apenas eu ou pessoa autorizadas possam acessar, queria saber o seguinte, eu sei capturar o video e audio, mas como eu vou mostrar pro usuario o meu video e o meu audio??
      <script> video = document.createElement('video'); video.width = 320; video.height = 240; video.autoplay = true; var hasUserMedia = navigator.webkitGetUserMedia ? true : false; navigator.webkitGetUserMedia('video', function(stream){ video.src = webkitURL.createObjectURL(stream); }, function(error){ console.log("Navegador nao suporta", error); }); </script>  
    • Por allancisneiro
      pessoal boa tarde, estou construindo um arquivo HTML, porém estou com um problema de alinhamento do texto apartir do segundo<H1>.  já tentei  usar o comando align:"left". mas não funcionu.
      quem puder ajudar agradeço. a ideia é alinhar tudo à esquerda
       
      este arquivo contém este código-fonte:
       
      <!DOCTYPE html>
      <html>
      <head>
      <title>Título da página</title>
      <meta charset="utf-8"/>
      </head>
      <body>
      <h1>Lista não ordenada</h1>
      <ul>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      <h1 align="left">Lista ordenada</h1>
      <OL>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      </OL>
          
      </body>
      </html>

    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
    • Por nosredna
      Olá amigos,
       
      tenho o seguinte código:
      <html> <script type="text/javascript"> function Soma(){ var soma = 0; var ipts = document.querySelectorAll('input[oninput="Soma()"]'); for(var x=0; x<ipts.length; x++){ var valorItem = parseFloat(ipts[x].value); !isNaN(valorItem) ? soma += parseFloat(valorItem) : null; } document.querySelector('#final').value = soma.toFixed(2); } </script> <form action=""> Total produto1: <input type="text" oninput="Soma()" value="0"><br> Total produto2: <input type="text" oninput="Soma()" value="0"><br> <br> Total todos os produtos12: <input type="text" id="final"> </form> </html> Bom...para essas duas inputs funciona corretamente.
      Porém, se eu quiser colocar mais inputs como: Total produto3 + Total produto4 = Total todos os produtos34, Total produtoX + Total produtoY = Total todos os produtosXY, ...
      e usar o mesmo código JS, é possível? alguém poderia me dar uma dica de como eu faço para fazer isso? já tentei de várias maneiras, mas não estou tendo sucesso...
       
      Fico agradecido. 
×

Informação importante

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