SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding icons to my nav menu

    I have a simple nav menu in which I want to add icons to the icon should appear above the text in the center. However I cannot seem to figure out how to do this. Below is my code:

    HTML Code:
     <ul class="nav">
          <li class="whoweare"><a href="#">who we are</a></li>
          <li class="services"><a href="#">services</a></li>
          <li class="contact"><a href="#">contact</a></li>
      </ul>
    Code:
    ul.nav {
    	list-style: none; /* this removes the list marker */
    	border-top: 20px solid #FFF; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    	/*margin-bottom: 15px;  this creates the space between the navigation on the content below */
    }
    ul.nav li {
    	float: left;
    	text-align:center;
    	width: 23%;
    	/*border-bottom: 1px solid #666;  this creates the button separation */
    }
    I have tried an after class but that doesn't seem to work either.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hi skelleex,

    this thread has two methods you can use.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Hi skelleex,

    this thread has two methods you can use.
    tks

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added the file i am working to my web server. I am still trying to add my menu to be inline with the logo and get all the icons to line up just above the text. Can anyone help the link is http://www.webapp-testing.com/rethink/.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still tryin to get some help with this

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Did you try the methods in the thread @kohoutek linked to? They apply the images as background images in the CSS, not as <img> tags in the HTML as you have.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I got lost in the code a bit am I suppose to add
    Code:
    #nav a:link, #nav a:visited {
    background:url(sprite.png) no-repeat 0; /*  need to declare bg image once for all nav links to follow */
    }
    to my css referening to my images (they are not sprites by the way). Also how will I move the images to the top of the menu

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Are you not planning to use sprites? If you want to keep your current CSS and HTML structure and use images within your HTML document, then just add margin:auto; to your ul.nav li img to center the image.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    really ok will give it a try later. What about getting the menu next to the image will that be an easy fix also

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not using sprites as I have no experience with them at this time. Hopefully you can point me to a tutorial on how to create them and use them.

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by skelleex View Post
    really ok will give it a try later. What about getting the menu next to the image will that be an easy fix also
    Without changing anything except the CSS, you can replace your current declaration with this:

    Code CSS:
    ul.nav li img {
    vertical-align: middle;
    margin-right:10px;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by skelleex View Post
    I am not using sprites as I have no experience with them at this time. Hopefully you can point me to a tutorial on how to create them and use them.
    The link I've posted in #2 shows how you can use a sprite. If you don't need the various link states, then one row is sufficient.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  13. #13
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but how do i create the sprite if i have several images separate from each other

  14. #14
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Without changing anything except the CSS, you can replace your current declaration with this:

    Code CSS:
    ul.nav li img {
    vertical-align: middle;
    margin-right:10px;
    }
    I think we are not on the same page with this code all the others worked fine. I am trying to get the menu to go in the space to the right of the logo marked "Rethink" how can I accomplish that

  15. #15
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by skelleex View Post
    but how do i create the sprite if i have several images separate from each other
    By using a graphics editor and creating a new image out of the single source images, placing them side by side or top to bottom.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  16. #16
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by skelleex View Post
    I think we are not on the same page with this code all the others worked fine. I am trying to get the menu to go in the space to the right of the logo marked "Rethink" how can I accomplish that
    You'd apply a width and a float for each container you want to have sit side by side. In your case, it'd be #insert_logo and ul.nav.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  17. #17
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok tks never real used photoshop in any significant way but I will look into this tks for the advice

  18. #18
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah kinda figured that out when playing around with the css just now tks for pinpointing it though

  19. #19
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    You can apply the images (png or gif) individually at first, then use http://spriteme.org/ to convert them to a sprite.


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
  •