SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Header and Navigation

    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
    Code:
    .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


    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.


    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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    Here is the markup im working with :
    Code:
    <!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. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •