...

View Full Version : Turning navigation text into images...help!!!



reykjavik2012
06-10-2012, 08:20 PM
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;

aaronhockey_09
06-11-2012, 02:41 AM
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>

zingzing45
06-11-2012, 03:10 AM
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...

reykjavik2012
06-11-2012, 04:57 AM
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?

aaronhockey_09
06-11-2012, 03:15 PM
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.

reykjavik2012
06-11-2012, 04:04 PM
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?

aaronhockey_09
06-11-2012, 04:36 PM
try it like this.

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

reykjavik2012
06-11-2012, 04:48 PM
try it like this.

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

Didn't work :(

reykjavik2012
06-11-2012, 09:06 PM
try it like this.

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

Any other suggestions?

aaronhockey_09
06-12-2012, 03:43 AM
Any other suggestions?
Any way you can post a link for me to view.
I can help you out better that way.
Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum