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

Gabriel Maciel · Maio 10, 2018

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;
}

Maujor · Maio 10, 2018

@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.

snowstormdelivery · Maio 10, 2018

Realmente, a position não é para posicionamentos de tal maneira, mas para detalhes.

Por isso, você vai ter que buscar sobre diferentes maneiras de fazer layout CSS, sem falar de estudar sobre responsividade.

olucaslima · Maio 11, 2018

Olá, senhores!
Apesar de que o garoto precise realizar o devido estudo, não seria interessante passar algumas informações básicas sobre quais os atributos ele deveria utilizar?

Maujor · Maio 11, 2018

@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.

marcelocardoso · Maio 27, 2018

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...

Entrar

Arquivado

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

Recommended Posts

Gabriel Maciel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

snowstormdelivery 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

olucaslima 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Ler campos com caracteres especiais no xml

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante