JSFiddle - React, Tailwind, and code Playground

by legendarylion

HTML

<body>
    <div id="header">
        <div id="logo">
            <!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...-->
            <img class="example-logo" src="images/logo.png" width="90px">
        </div>
        <!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus-->
        <nav>
            <ul>
                <li><a href="#"><!--add your image code back here-->Home</a>
                </li>
                <li><a href="#"><!--add your image code back here-->Overons</a>
                </li>
                <li><a href="#"><!--add your image code back here-->Product</a>
                </li>
                <li><a href="#"><!--add your image code back here-->Media</a>
                </li>
                <li><a href="#"><!--add your image code back here-->Contact</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="DivHelper"></div>
    </div>
    <div id="footer"></div>
</body>

</html>

CSS

/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */
 #header {
    position:relative;
    border:1px dashed green;
}
/* Make the nav position asboslute to place it to the right */
 nav {
    position:absolute;
    top:0px;
    right:0px;
    border:1px dashed blue;
}
/*So what happened?  The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner.  Nav will stay there even if the parent container has more elements added to it.

Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls?  That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*/

/* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */
 nav ul li {
    list-style-type:none;
    display:inline-block;
    margin:0 10px;
}
nav ul li a {
    text-decoration:none;
}
.example-logo {
    height:50px;
    width:50px;
    background:blue;
}