www.webdeveloper.com
Results 1 to 6 of 6

Thread: Would anyone be able to help me with this navigation bar please?

Hybrid View

  1. #1
    Join Date
    May 2014
    Posts
    2

    Would anyone be able to help me with this navigation bar please?

    Hey sup guys, this is my first post on this forum since signing up a few weeks ago, I have ran into a bit of trouble and even though its probably something stupid I would like to ask for your assistance as I have no idea (New to web development)...

    Basically I am trying to get my navigation bar to look like this:
    http://imgur.com/tCJMLRB,wWZRgEC#1



    And it looks like this...
    http://imgur.com/tCJMLRB,wWZRgEC

    Here is the source code.
    #nav {position:absolute;right:0px;}
    #nav ul {list-style:none;}
    #nav li {float:left;}


    Regards, MrGrey.

  2. #2
    Join Date
    May 2014
    Posts
    2
    Just to let you guys know aswell I previously had the navigation bar finished, however due to other difficulties I had to start over, here is the code for that but it doesn't seem to work now?
    Code:
    #nav {
    	width: 100%;
    	float: left;
    	margin: 0 0 3em 0;
    	padding: 0;
    	list-style: none;
    	background-color: #ffffff;
    	position:relative;left:443px;top:-25px;
    }
    #nav li {
    	float: left; 
    	 border-right: 2px solid #eb332c;
    }
    #nav li a {
    	display: block;
    	padding: 8px 15px;
    	text-decoration: none;
    	font-weight: bold;
    	color: #069;}
    Last edited by jedaisoul; 05-13-2014 at 03:51 PM. Reason: code tags added

  3. #3
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    HTML Code:
    <ul id="nav">
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
    Code:
    #nav, #nav li, #nav a {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    #nav {
      list-style: none;
      background: #fff;
    }
    #nav li {
      border-left: 2px solid #000;
    }
    #nav > li:first-child {
      border: none;
    }
    #nav a {
      padding: 8px 15px;
      color: #069;
      text-decoration: none;
    }
    When using inline-block elements, be sure to remove white-space around them otherwise it influence how they are laid out.

  4. #4
    Join Date
    Apr 2014
    Posts
    56
    Quote Originally Posted by ShrineDesigns View Post
    HTML Code:
    <ul id="nav">
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
    Code:
    #nav, #nav li, #nav a {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    #nav {
      list-style: none;
      background: #fff;
    }
    #nav li {
      border-left: 2px solid #000;
    }
    #nav > li:first-child {
      border: none;
    }
    #nav a {
      padding: 8px 15px;
      color: #069;
      text-decoration: none;
    }
    When using inline-block elements, be sure to remove white-space around them otherwise it influence how they are laid out.
    I think that this is the perfect fix for the above problem. BTW on one of my websites i had a problem with separators between menu elements. It seems that the following code is crucial to have it properly formatted:

    Code:
    #nav > li:first-child {
      border: none;
    }

  5. #5
    Join Date
    Apr 2014
    Location
    Burnley uk
    Posts
    70
    its very simple dear !!!
    just give some margin and padding to the li and its will work surely

  6. #6
    Join Date
    May 2014
    Location
    bangalore
    Posts
    39
    CSS Coding:

    ul{background-color: #8F8F8F;
    list-style-type: disc;
    padding: 10px;}
    li{display: inline;}
    a{color: #FF0000;
    text-decoration: none;}



    HTML coding:

    <ul>
    <li>
    <a href="#">Home</a>
    </li>
    |
    <li >
    <a href="#">About Us</a>
    </li>
    |
    <li>
    <a href="#">Contact Us</a>
    </li>
    <ul>

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