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

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante