Show links side by side

Hey,

I want to display some links on my page side by side instead of one below the other, please visit this link:-

http://www.freemanholland.com/ktec/case.php

As you can see the folders are showing one below the other, how can i show them side by side?

Regards

Hi,

For this, use something like the below.

<ul>
<li><a href="#">My Link</a></li>
<li><a href="#">My Link</a></li>
<li><a href="#">My Link</a></li>
<li><a href="#">My Link</a></li>
</ul>

In your CSS, give your <ul> a

list-style-type: none;

style, and give your <li> elements a

display: inline;

style

Hey,

I did try this but then the folder images vanish for some reason, this is the style i have:-


ul li.case {
    list-style:none;
    height: 59px;
    width: 81px;
}
ul li.case a {
    width:81px;
    background:url(main_pages/folderclosed.jpg) 0 0 no-repeat;
	display:inline;
	height:59px
}

ul li.case a:hover{
  background:transparent;/* hide normal image and reveal image underneath*/
  background:url(main_pages/folderopen.jpg) 0 0 no-repeat;
}

Why do my folder images vanish?

Regards

Hi,

Are you saying that everything in your code works fine until you add the

display:inline;

?

Also, I think you should be adding this style to ul li.case rather than ul li.case a

Hey,

I’ve changed my mind, i have chosen a different approach in displaying my content. I did have another question however and i would have been better posting another thread but il ask anyway.

If you visit the page shown below you will see how i have changed the “folder images” idea:-

http://www.freemanholland.com/ktec/case.php

Just a quick question though, why is it when i hover over the images it keeps showing me the same image?

Regards

Hi, I don’t know where exactly you are talking about but makae sure the anchors don’t have a display:block; set on it and if the anchors have a containing div or <li> or something, make sure that is floated left thus they can be on the same line.

I could give you actual code if I knew where you are talking about.

Hey,

I may have been vague before, when you hover over the images in the content it brings a popup. The popup image should match the smaller image. At the moment the popup images are all the same, when they should be different, you can view the source to see…

Hope this is clear :slight_smile:

Hi, you have invalid HTML. Each image is stored inside of a div called #popUpImage1570

You need to change it to classes and you also need to modify the script tto pick the correct one. I’m not sure if hte script does know how to choose the correct one but whatever…

If the script depends on ID’s I could tell you how to change it to classes…but actually…just change the ID and have each hover in the script call the differnet ID…well you know the problem now so I’ll shutup :).

Yep,

Thats what ive done and its working fine now.

Thanks and Happy Birthday in advance. :slight_smile:

Thank you :). And your welcome :).