Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Keeping inline ul list items centered with JS text replacement.

    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 -

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •