CODEWITHSUNDEEP
htmlcsscontainers
Curtis Spence
Curtis Spence

Reputation: 69

Div Tags and a header

Hi everyone im currently trying to make a website I have drawn out the design, and have started trying to make the header using several div tags,a logo image ,bottom border , and buttons. Heres my basic outline of what im trying todo:(Sorry its blurry but usable) concept

This is the current Result it looks bad. result

Finnaly here is the code responsible can anyone see where i messed up? the line should cover most of the page from the logo to right side so it has to be the div container

<html>
<head>

    <style>
    body{ background-image: url("wood texture.jpg");
    }
    .header{
            position:relative;
            width:100%;
            height:10%;
            <!--border-style:solid;
        border-color:black;
        border-width:0px 0px 10px 0px;-->

        }

        .headlogo{
        width:25%;
        height:100%;
        position: absolute;
        padding 0;
        margin:0;
        }
        .headline{
        width:100%;
        height:100%;
        margin:0px 0px 0px 60%;
        <!--padding:0px 0px 0px 25%;
        position: relative;
        left:25%;
        top:0px;-->
        float: right;
        border-style:solid;
        border-color:black;
        border-width:0px 0px 10px 0px;
        }



    </style>
</head>
<body>
<div id="" class="header">


    <div id="" class="headlogo">
     <img src="logo.png" alt="" style="width:25%; height:50%; margin-right:10px; float:right;"
    </div>

    <div id="" class="headline">
    Buttons will go in here and look supper cool but first this needs to stretch all the way to the right from about where the logo stops
    </div>
</div>
</body>
</html>

Upvotes: 2

Views: 593

Answers (1)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9457

You were just using the wrong line comments for your css.

HTML is <!-- something here -->

CSS is /* something here */

And like noted in the comments, you did not close out your image using />

See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/50/

since you asked in the comments, I will add it here Css line comments in a .html file will not appear to be commented out while using notepad++, to test it try using the css line comments in a .css file using notepad++, you will see in fact that it does work. I created this fiddle to show you that the /* */ is in fact the correct line comments when inside <style> tags. https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/52/

And after all this if there is still a question you can watch this little clip: http://docs.emmet.io/actions/toggle-comment/

body{ background-image: url("wood texture.jpg");
    }
    .header{
            position:relative;
            width:100%;
            height:10%;
            /*border-style:solid;
        border-color:black;
        border-width:0px 0px 10px 0px;*/

        }

        .headlogo{
        width:25%;
        height:100%;
        position: absolute;
        padding 0;
        margin:0;
        }
        .headline{
        width:100%;
        height:100%;
        margin:0px 0px 0px 60%;
        /*padding:0px 0px 0px 25%;
        position: relative;
        left:25%;
        top:0px;*/
        float: right;
        border-style:solid;
        border-color:black;
        border-width:0px 0px 10px 0px;
        }

Upvotes: 4

Related Questions