Keeping inline ul list items centered with JS text replacement.

Strahn · 08-26-2005, 07:26 AM

Hoi hoi all.

Been working on this for a few hours now and I'm very tired. Figured I'd post my problem here and then sleep on it. Figure I'll come up with a solution either way so I can't lose.

Anyways, working on a lab project for my web design/development class at my college. The assignment involves using Javascript to make a sort of slide show presentation of images, along with a changing caption for the image.

I have gotten the image centered as well as an inline unordered list underneath it for previous/next links with the caption in the middle.

The Javascript slideshow function works fine, changing both the image src and the caption text, however, not all the captions are the same length, so the li elements jump around as the caption changes. I would like to prevent this from happening. Being primarily a C/C++ coder, my first attempt to fix this was simply adding extra spaces as needed to the strings in the Javascript, but I had forgotten that HTML ignores whitespace, so I changed it to add   to the string. Still didn't work. (Not sure why, though. Thought I was using a monotype font, so adding extra spaces should work.) The next thing I tried was by simply adding a width attribute (property? Not sure what the terminology for CSS is) to my li CSS code, but that still didn't work. At this point I grew tired (the giggling tired) so that's where I currently stand.

Unfortunately I lack an ftp program I am familiar with on this computer, so I don't have the webpage uploaded anywhere but I will post the relevent JS, HTML and CSS code here.

The part of my JS that should be formatting the name.

Code:

while(length < longest_name)
{
  if(right)
  {
    name = name + "&nbsp;";
    right = 0;
  }
  else
  {
    name = "&nbsp;" + name;
    right = 1;
  }
  length++;
}
document.getElementById("presName").innerHTML = name;

HTML for my list

Code:

<div class="toc">
 <ul>
  <li>
   <a onclick="javascript:changePres('prev');">&lt;-- Prev.</a>
  </li>
  <li id="presName">
   George Washington
  </li>
  <li>
   <a onclick="javascript:changePres('next');">Next --&gt;</a>
  </li>
 </ul>
</div>

CSS for the list

Code:

div.toc {
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}

.toc ul {
  width: 100%;
  display: inline;
  margin: 0;
  padding: 0;
}

.toc ul li {
  width: 100%;
  display: inline;
  text-align: center;
  padding: 0 5%;
}

Thanks in advance to anyone taking the time to look this over.

- Strahn -

_Aerospace_Eng_ · 08-26-2005, 07:38 AM

No need to set a width for the container div. It will expand to be 100% automatically if it isn't absolutely positioned or floated. You will need to set a width to either your div or lis if you set a width to your div make the previous and next lis like 15% width of the div and make the description 70% the text should wrap and not cause any expansion in the lis.

Strahn · 08-26-2005, 09:52 PM

I think I must be misunderstanding what you meant. I can not seem to get the width property to work with any aspect of an unordered list.

This is what I interepreted your response to mean.

Code:

div.toc {
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}

.toc ul {
  width: 100%;
  display: inline;
  margin: 0;
  padding: 0;
}

.toc ul li {
  width: 10%;
  display: inline;
  text-align: center;
  padding: 0 5%;
}
 
.toc ul li#presName {
  width: 80%;
}

To my understanding, this should set the div to be as wide as the body allows, the ul will be the same, and then the first and last li will be 10% of that and the middle one will be 80%. However, it doesn't work. Every attempt I have made to set the widths on both the ul and li elements has not worked at all. (And I've tried several different variations of the above.) I am using Firefox 1.0.6 if that makes any difference.