473,320 Members | 1,974 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Problem with list used as horizontal navigaton

Hello

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:

[code]
<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
4 1362
kestrel
1,071 Expert 1GB
so whats your problem?
Oct 18 '06 #2
Hello

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 }
  8.  
  9. #maintab ul {
  10.         display: inline;
  11.         overflow: hidden;
  12.         width: 100%
  13.         list-style-type: none; }
  14.  
  15. #maintab ul li {
  16.         display: inline;
  17.         overflow: hidden;
  18.         list-style-type: none; }
  19.  
  20. #maintab li.selected {
  21.         border-bottom: 20px solid #003366
  22.         }
  23.  
  24. #maintab li.active {
  25.         border-bottom: 20px solid #003366
  26.         }
  27.  
And this is the page itself:

http://www.independentliving.co.uk/new-ad/new-ad.html

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

Thanks

Frances
Oct 19 '06 #3
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.

Jay
Oct 19 '06 #4
Thanks, Jay, that works perfectly. Problem solved!

Much appreciated,

Frances
Oct 19 '06 #5

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

Similar topics

4
by: JesusFreak | last post by:
From: us_traveller@yahoo.com (JesusFreak) Newsgroups: microsoft.public.scripting.jscript Subject: toolbar script problem NNTP-Posting-Host: 192.92.126.136 Recently, I downloaded the following...
7
by: addled | last post by:
Hi there, after reading posts here for a few months, I've built the courage to see if someone can see where I"m going wrong in the webpage I've been working on. In particular the horizontal nav...
2
by: Nishant | last post by:
I have a combo box with a horizontal scroll bar. (Used SetHorizontalExtent) The dropdown with horizontal scroll bar works fine when I have more items in the dropdown list. However when the...
4
by: Mark Reed | last post by:
Hi Guru's, Hopefully I can explain this OK.....What I am trying to do is create a QC check sheet using the following fields: ASN, PO & Qty. This information will be at the top of each report with...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.