By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,062 Members | 1,358 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,062 IT Pros & Developers. It's quick & easy.

Problem with list used as horizontal navigaton

P: 5

I've started trying to lay out my web pages using css instead of html tables, and I've set up a horizontal row of images to act as the navigation on the page. The sizes of the images are specified in the html of the page, like so:

<li><a href="content2.html" rel="ajaxcontentarea"><img src="bumper-tab.jpg" alt="click for info on bumper" width="150" height="110" border="2"></a></li>
Oct 18 '06 #1
Share this Question
Share on Google+
4 Replies

Expert 100+
P: 1,071
so whats your problem?
Oct 18 '06 #2

P: 5

Sorry - looks as though my message got cut off near the beginning. The problem is that I can't get the images to stay in one line - if the window is resized, or not big enough to begin with, the last one or two images go down onto a new line.

It is apparently particularly bad in IE viewed on a pc (I'm working on a Mac), because the images are much larger there to begin with.

I have tried specifying percentage or absolute pixel sizes for the images in the style sheet, but when I do that, the list no longer displays horizontally at all in IE, so I'm really stuck.

This is the code in the css sheet for the navigation:

Expand|Select|Wrap|Line Numbers
  1. #maintab {
  2.         color: #003366;
  3.         margin: 15px 0px 15px 0px;
  4.         padding: 10px;
  5.         z-index: 1;
  6.         display: inline;
  7.         padding-left: 10px }
  9. #maintab ul {
  10.         display: inline;
  11.         overflow: hidden;
  12.         width: 100%
  13.         list-style-type: none; }
  15. #maintab ul li {
  16.         display: inline;
  17.         overflow: hidden;
  18.         list-style-type: none; }
  20. #maintab li.selected {
  21.         border-bottom: 20px solid #003366
  22.         }
  24. #maintab {
  25.         border-bottom: 20px solid #003366
  26.         }
And this is the page itself:

I'd be very grateful if you have any suggestions!


Oct 19 '06 #3

P: 29
Having a quick look at the code, you could remove the image dimensions from your HTML <img src> tags and add this to your CSS:

Expand|Select|Wrap|Line Numbers
  1. #maintab ul li img {
  2.         width: 15%;
  3. }
With 6 images across the screen, I guess 15% would be fine, but you could play with it a little. Do not specify a height, as doing so will ensure the image always keeps it's ratio - if you specify a height, it will rescale in both directions.

I can't see why this would change the way your list displays. It also tidies up the code a little.

Oct 19 '06 #4

P: 5
Thanks, Jay, that works perfectly. Problem solved!

Much appreciated,

Oct 19 '06 #5

Post your reply

Sign in to post your reply or Sign up for a free account.