Divs side by side header

Asked

Viewed 394 times

2

I want to put all the Divs in the header with relative position to adapt in all resolutions. It didn’t work using float on the 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;
        }
html css
  • 1

    Do you have a link to access online? Because it is not possible to see the images you have placed and so it is difficult to understand how the page is.

1 answer

3

I don’t know if I got it right. But you can use the flex to align the elements instead of the float. The flex easily adapts to the various resolutions. See an article about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Leave more details or an image of how the end result will be so we can help you.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.