Reputation: 69
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)
This is the current Result it looks bad.
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
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