www.webdeveloper.com
Results 1 to 3 of 3

Thread: Nav bar image positioning

Hybrid View

  1. #1
    Join Date
    Nov 2011
    Posts
    3

    Nav bar image positioning

    Hi. This is my first time posting here. I hope I make sense and provide all relevant info needed. I'm still learning the finer points of CSS and tend to struggle with positioning. I'm never sure when to use float vs relative vs absolute.

    Here's my issue:
    I have created image rollovers for the main navigation bar on my site. I want the entire menu to be aligned to the right of the div.
    When I use plain text navigation the layout works fine: http://www.onderoinvestments.com/lab...-text-nav.html

    When I use the image rollovers, it drops the div down on the page a bit: http://www.onderoinvestments.com/lab/index-nav.html

    My CSS for the div looks like this:
    Code:
    #nav-top {
    	width: 100%;
    	height: 45px;
    	background:url(img/bg-nav-bar.jpg) center top;
    	z-index: 700;
    	top: 0px;
    }
    #container-nav {
    	width: 1024px;
    	height: 45px;
    	line-height: 1.8em;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 0;
    	z-index: 750;
    	text-align: right;
    	top: 0px;
    	img: text
    }
    For the list looks like this:
    Code:
    li 
    {
      float:right;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    a#home:link,a#home:visited { 
    	color: #ffffff; 
    	text-decoration: none; 
    	background: url(img/btn/btn-home.png) no-repeat 0 0; 
    	display: block; 
    	padding: 0px; 
    	width: 66px; 
    	height: 45px }
    a#home:hover,a#home:active 
    {
    	background-position: 0 -45px;
    }
    }
    The a# parameters are repeated for each button.

    And my HTML looks like this:
    HTML Code:
    <div id="nav-top">
    <div id="container-nav"><ul>
    <li><a id="home" href="index.html"></a></li>
    <li><a id="about" href="about.html"></a></li>
    <li><a id="business"href="business.html"></a></li>
    <li><a id="csr"href="csr.html"></a></li>
    <li><a id="stakeholders"href="stakeholders.html"></a></li>
    <li><a id="contact"href="contact.html"></a></li>
    </ul></div>
    </div>

  2. #2
    Join Date
    Nov 2011
    Posts
    19
    Hi

    Your #container-nav ul have default browser margins.

    Remove them:
    Code:
    #container-nav ul{margin:0}
    And remember to use reset CSS in any project.

    -------------
    Jacek Jeznach
    Web developer

  3. #3
    Join Date
    Nov 2011
    Posts
    3
    Quote Originally Posted by jeznacki13 View Post
    Hi

    Your #container-nav ul have default browser margins.

    Remove them:
    Code:
    #container-nav ul{margin:0}
    And remember to use reset CSS in any project.

    -------------
    Jacek Jeznach
    Web developer
    I new it was something simple like that. Thank you so much!

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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