2

Quero colocar as divs todas no cabeçalho com posição relativa pra adaptar em todas as resoluções. Não funcionou usar float nas divs.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Farra Certa</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <header>
        <div id="alinhaCabeçalho">
             <div id="logo"><a href="http://www.farracerta.com.br"><img src="images/logo.png" alt="Logo Farra Certa"></a>
             <a href="#"><img src="images/bannerheader.png" alt="ANUNCIE AQUI"></a></div>

             <div id="slideHeader"></div>

             <div id="social">
                    <div><a id="facebook" href="#"><img src="images/facebook.png" alt="facebook"></a></div>
                    <div><a id="twitter" href="#"><img src="images/twitter.png" alt="twitter"></a></div>
                    <div><a id="youtube" href="#"><img src="images/youtube.png" alt="youtube"></a></div>
                    <div><a id="instagram" href="#"><img src="images/Insta.png" alt="instagram"></a></div>
                    <div><a id="google" href="#"><img src="images/google.png" alt="google+"></a></div>
                </div>

                <nav id="menu">
                    <div id="home"><a href="#"><img src="images/home.png" alt="home" onMouseOver=                   
                    "this.src='images/homeHover.png'" onMouseOut="this.src='images/home.png'"></a></div>
                    <div id="JaRolou"><a href="#"><img src="images/jarolou.png" alt="Ja Rolou" onMouseOver=
                    "this.src='images/jaRolouHover.png'" onMouseOut="this.src='images/jarolou.png'"></a></div>
                    <div id="VaiRolar"><a href="#"><img src="images/vairolar.png" alt="Vai Rolar" onMouseOver=
                    "this.src='images/vaiRolarHover.png'" onMouseOut="this.src='images/vairolar.png'"></a></div>
                    <div id="Contrate"><a href="#"><img src="images/contrate.png" alt="Cotrate" onMouseOver=
                    "this.src='images/contrateHover.png'" onMouseOut="this.src='images/contrate.png'"></a></div>
                    <div id="Contato"><a href="#"><img src="images/contato.png" alt="Contato" onMouseOver=
                    "this.src='images/contatoHover.png'" onMouseOut="this.src='images/contato.png'"></a></div>
                </nav>
             </div>
    </header>

</body>
</html>

    @charset "utf-8";
/* CSS Document */

    body {
        background-image:url(images/backgroud.jpg);
        background-repeat: repeat;
        height:100%;
        width:100%;
        margin: 0px;
    }

    header {
        background-image: url(images/header.jpg);
        background-repeat: repeat-x;
        height: 150px;
        width: 100%;
        position: absolute;
        top: -7px;
        }

    #alinhaCabeçalho {
        height: 100%;
        width: 1400px;
        position: relative;
        top: 0px;
        left: 50%;
        margin-left: -635px;
        }

    #logo {
        height: 149px;
        width: 198px;
        position: relative;
        top: 2px;
        left: 5%;

        }

    #slideHeader {
        height: 115px;
        width: 425px;
        position: relative;
        top: 0px;
        }

    #menu {
        height: 39px;
        width:  605px;
        position: relative;
        top: 80px;
        left: 650px;
        }

    #home {
        height: 39px;
        width: 121px;
        position: relative;
        float: left;
        }

    #JaRolou {
        height: 39px;
        width: 121px;
        position: relative;
        float: left;
        }

    #VaiRolar {
        height: 39px;
        width: 121px;
        position: relative;
        float: left;
        }

    #Contrate {
        height: 39px;
        width: 121px;
        position: relative;
        float: left;
        }

    #Contato {
        height: 39px;
        width: 121px;
        position: relative;
        float: left;
        }
1
  • 1
    Você tem algum link para acessar online? Pois não é possível ver as imagens que você colocou e assim fica difícil entender como a página está.
    – Wendell
    Commented 9/10/2016 às 1:21

1 Resposta 1

3

Não sei se entendi direito. Mas você pode usar o flex para alinhar os elementos ao invés do float. O flex se adapta facilmente as diversas resoluções. Veja um artigo sobre o mesmo: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Deixe mais detalhes ou uma imagem de como será o resultado final para que possamos lhe ajudar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .