www.webdeveloper.com
Results 1 to 2 of 2

Thread: Navigation visualization problem

  1. #1
    Join Date
    Mar 2014
    Posts
    4

    Navigation visualization problem

    Hi everyone,

    I'm having a navigation problem as I can't seem to correctly convert it from the .psd file.

    The problem is regarding the right part of the nav, as I need the text elements "home about us portfolio contact us" to be in the same structured boxes as you see in the 2.jpg file.

    I am leaving the code I've done so far and the two pics, 1.tiff being my current state and 2.tiff being the desired state.

    I floated both the logo and nav left and right. i also used a "back-header" div to create the fine line that extends below the header for the whole width of the browser viewport.

    http://s15.postimg.org/686tps9uf/image.jpg

    http://s29.postimg.org/fj8ae0z5f/image.jpg


    HTML

    Code:
    <body>
    <div id="back-header">
    
    <header>
     <img id="logo" src="Images/Logo.jpg" alt="AMG + Associates logo" width="235" height="12">
    	<ul id="main-nav">
    		<li><a href="#">Home</a></li>
        	<li><a href="#">About us</a></li>  
        	<li><a href="#">Portfolio</a></li>
        	<li><a href="#">Contact us</a></li>
    	</ul>     
    </header>
    </div>

    CSS

    Code:
     #back-header {
    	 height: 88px;
    	 border-bottom: solid 0.5px #CCC;
     }
     
     header {
    	 width: 960px;
    	 height: 88px;
    	 margin: auto;
    	 padding: 0;
     }
     #logo {
    	 margin-top: 37px;
     }
     
     ul {
    	 float:right;
    	 width: 55%;
     }
     
     ul li {
    	 padding: 30px 20px;
    	 background-color:#093;
    	 color: #FFF;
    	 list-style: none;
    	 display: inline-block;
     }
    Last edited by jedaisoul; 04-04-2014 at 05:45 AM. Reason: code tags added

  2. #2
    Join Date
    Apr 2014
    Posts
    6
    Could You provide us with better images of what state the menu is in now and what do you want to achieve. I can't really make out anything of there pictures. they are fuzzy and in a very small size.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles