solved - it was a group effort. thank you all so much, my first posting experience on here was wonderful and you all have given me things to learn :)
I am trying to make a site using html5/css(3). I want to have a nav bar to be at the far end of the header, and to be on the same line as the h1 element while sharing the h1 background. (if possible) I will post the code I am using, plus a screenshot showing what it looks like vs what I want it to look like. note I have been messing around with this for several hours so my code is pretty...all over the place right now. Sorry.
<body id="wrapper">
<div id="header">
<img src="images/logo2.png">
<h2>Broadcast Services</h2>
<ul id="nav">
<li class="border"> <a href="index.hmtl">Home</a></li>
<li class="border"> <a href="about.hmtl">PAGE 2</a></li>
<li class="border"> <a href="master.hmtl">PAGE 3</a></li>
<li class="border"> <a href="advertise.hmtl">PAGE 4</a></li>
<li class="border"> <a href="entertainment.hmtl">PAGE 5</a></li>
<li> <a href="contact.hmtl">Contact Us</a></li>
</ul>
</div>
#header {
width: 100%;
border-top: 1.5px solid black;
border-bottom: 1.5px solid black;
margin-bottom: 4%;
padding: .75%;
}
#header img {
width: 30%;
display: inline;
}
h2 {
color: #4F2F8F;
font-size: 125%;
font-weight: bold;
background-image: url(images/transpblack10.png);
text-shadow: 1px 1px 1px #000000;
line-height: 85%;
}
#nav {
font-size: 110%;
float: right;
}
#nav ul li {
display: inline;
float: left;
list-style-type: none;
}
#nav ul li a {
display: inline-block;
text-decoration: none;
}
Well first off you don't have the proper syntax for your <ul>'s... it should look like this:
ul#nav li {
display: inline;
float: left;
list-style-type: none;
}
ul#nav li a {
display: inline-block;
text-decoration: none;
}
And I believe this is what you are trying to achieve: