Positioning Header and Navigation

HTML & CSS
1

Hi

im having another problem. i want to position my header and navigation next to each other nicely.
however, i dont feel i have the right touch to make it happen or my CSS isnt really cleaned up or well formatted.

here is my CSS


.header_top{
	border:2px solid blue;
	height:240px;
	overflow:hidden;
	background-color:#649fd7;
}
.header_top h1{
	font-family:Tahoma;
	font-size:45px;
	color:#cfefff;
	border:2px solid green;
	width:40%;
	height:60px;
	margin:2.5%;
	padding:1%;
	float:left;
}
.header_top nav{
	float:left;
}
.header_top ul{
	border:2px solid purple;
	width:700px;
	margin:7%;
	padding:7%;
	text-align:right;
}
.header_top li{
	clear:both;
	display:inline;
	border:2px solid purple;
	padding:5%;
	margin-left:9%;
	color:#cfefff;
}
/*---------------------- The End of the .header_top -------------------------*/

here the image on how it looks with my CSS

1024×387 62.1 KB

and this is what i would normally like to achieve, Not the same layout but rather a header floating next to a navigation bar all in a <header> tag.

1024×387 85.7 KB

any more information needed like the markup, etc. please let me know, i’ll be more than glad to share it with you.
thank you sitepoint !
-Jonathan

2

Hi, Jonathan,

You’ve given us some useful images. We could really need both the HTML and CSS so we can see how they work together. Ideally, a link to the page under development, if possible.

3

Here is the markup im working with :


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>SocialDesign Site</title>
        <link type="text/css" rel="stylesheet" href="teststylesheet.css">
    </head>
    <body>
		<div id="whole_wrapper">
			<header class="header_top">
				<h1>Jonathan.Vazquez</h1>
				<nav>
					<ul>
						<li>Home</li>
						<li>Portfolio</li>
						<li>Contact</li>
					</ul>
				</nav>
			</header>
			<section class="middle_content">
				<article>
					<h2>About Me</h2>
					<p>This is who i am!</p>
					<p>The reality of who i realy am is written in this paragraph class</p>
				</article>
			</section>
			<aside class="side_box">
				<p>The aside menu which demonstrate little to no importance.</p>
			</aside>
			<footer class="bottom_footer">
				<p>&copy Jonathan A. Vazquez, 2013.</p>
			</footer>
		</div>	
    </body>
</html>

Now the sample website i got it from one day surfing through templates for ideas however i do not now were it originally came from so i cannot link you to it unfortunately. Also for my edition of the template i am working on it straight from my main computer so i do not have it uploaded to no FTP or hosting as of yet since its unfinish.
[ Im Using google Chrome]

4

UPDATE

I figured out how to do this without a hazzle. I looked into the other sample website for a perspective on how to achieve the float, etc. I figure with careful reading that the header does not have what i typically expected (header title and nav’s). Instead the title was an <img> tag which he position using absolute. Now im guessing the navigation bar was moved to float right (if thats possible never seen float:right;) and that created a well based header.

However since i figured out the best way using an <img> tag. is it still posible to recreate that using simple <p>'s or <hx> (h1-h6)? im not worried about the design or character im just looking into the actual wording.

Thank You