Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Turning navigation text into images...help!!!

    Ok, so Im a complete newb to this. What I want to do is instead of having text navigation links (like Home and Contact Us, etc..) I want to have images to click - instead of "Business" people would click on the image of a business man, etc. I know enough about basic html to do this, but because Im using a wordpress theme, I dont have access to the html (btw, that statement is correct, right?). But I do have access to the css. So after many hours of searching, Ive finally found the part of the CSS that controls said text links. Anyone have any code I can put in (and alter to make my own) that would make those an image? This is what I see right now (but what do I need to do to add an image instead?):

    #nav {
    background:url('images/border.gif') repeat-x top;
    border-bottom:1px solid #fbfbfb;
    display:block;
    float:center;
    margin:0 auto;
    padding:0;
    width:100%;
    }

    #nav ul {
    font-size:14px;
    font-weight:bold;
    list-style:none;
    margin:0;
    padding-left:0;
    text-transform:uppercase;
    }

    #nav li {
    float:left;
    position:relative;

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    First create a div for each div image like so.

    .nav ul li.business { float:left; background:url(images/yourimage.png) no-repeat; width:100px; }
    .nav ul li.home { float:left; background:url(images/homeimages.png) no-repeat; width:120px;}

    just change the URL to the correct image and width to the width of the image.

    And then call it like so.

    <div id="nav">
    <ul>
    <li class="business></li>
    <li class="home"></li>
    </ul>
    </div>

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Extra Option

    Maybe this is what you're looking for, it turns an image into a link (e.g. you can click on the image and it takes you to a different page)


    <a href="#"><img src="src" alt="img" /></a>

    Hope that helps...

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    First create a div for each div image like so.

    .nav ul li.business { float:left; background:url(images/yourimage.png) no-repeat; width:100px; }
    .nav ul li.home { float:left; background:url(images/homeimages.png) no-repeat; width:120px;}

    just change the URL to the correct image and width to the width of the image.

    And then call it like so.

    <div id="nav">
    <ul>
    <li class="business></li>
    <li class="home"></li>
    </ul>
    </div>
    Didn't work Unfortunately because Im using a theme and dont have access to the html to put in those specific div tags its probably not working. Although i thought I saw that code in there already...
    <div id="nav">
    <ul>
    <li class="business></li>
    <li class="home"></li>
    </ul>
    </div>
    does it matter where in the css I place that code? Also, instead of a folder/file.png I'm using an entire http link to the image. Does that matter?

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by reykjavik2012 View Post
    Didn't work Unfortunately because Im using a theme and dont have access to the html to put in those specific div tags its probably not working. Although i thought I saw that code in there already...
    <div id="nav">
    <ul>
    <li class="business></li>
    <li class="home"></li>
    </ul>
    </div>
    does it matter where in the css I place that code? Also, instead of a folder/file.png I'm using an entire http link to the image. Does that matter?
    Hey, if your using wordpress, there should be a way to change the HTML to add those classes to the LI's.

    As for the CSS, it doesn't matter where it is placed, just as long as its in your CSS.
    And no, as long as you link the image properly, it doesn't matter if you use the entire http links for the images.

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    Hey, if your using wordpress, there should be a way to change the HTML to add those classes to the LI's.

    As for the CSS, it doesn't matter where it is placed, just as long as its in your CSS.
    And no, as long as you link the image properly, it doesn't matter if you use the entire http links for the images.
    Thanks so much for writing back and helping me out. I'm so close I can feel it!

    Instead of changing the html, when I "view source" I can see that they're labeling the "Business" page thus: <li class="page_item page-item-2"> So instead of coding it .nav ul li.business I coded it .nav ul li.page_item page-item-2 (and every possible variation of that) hoping that would work. But it didn't work. What am I doing wrong here?

  • #7
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    try it like this.

    .nav ul li.page-item-2 { }

  • #8
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    try it like this.

    .nav ul li.page-item-2 { }
    Didn't work

  • #9
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    try it like this.

    .nav ul li.page-item-2 { }
    Any other suggestions?

  • #10
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by reykjavik2012 View Post
    Any other suggestions?
    Any way you can post a link for me to view.
    I can help you out better that way.
    Thanks


  •  

    Posting Permissions

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