Web Analytics Made Easy -
StatCounter CSS List Help Needed Please - CodingForum

Announcement

Collapse
No announcement yet.

CSS List Help Needed Please

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS List Help Needed Please

    Hey Guys,

    Should be a simple task here. I've got the following list looking like this:

    09.02 <10 pixel padding> News Title
    08.02 <10 pixel padding> News Title
    07.02 <10 pixel padding> News Title
    08.02 <10 pixel padding> News Title
    05.02 <10 pixel padding> News Title
    News Title ...

    Now the list looks fine. However if you look at the bottom one, if the title is longer than a certain length, it wraps to the next line and under the date. I want to have it start under the title text above it, not immediately on the next line where it looks less clean.

    Any ideas how I could make this work?

    Thanks.

  • #2
    Hmm this might be a good example of when you should use tables. You are displaying a type of data.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
      <html lang="en">
      <head>
      	<meta http-equiv="content-type" content="text/html; charset=utf-8">
      	<title>List Samples</title>
      	<style type="text/css">
      
      * {
      padding: 0;
      margin: 0;
      }
      
      
      .list {
      list-style:none;
      margin: 30px 15px;
      width: 300px;
      }
      .list li {
      text-transform: lowercase;
      margin-bottom: 2px;
      }
      .list li span {
      text-transform: uppercase;
      font-weight: 600;
      width: 75px;
      position:absolute;
      height: 100px;
      left: 0px;
      }
      .list a {
      color: #000;
      text-decoration: none;
      cursor: hand;
      display: block;
      height: 100%;
      padding-left: 100px;
      position: relative;
      }
      
      	</style>
      </head>
      <body>
      <ul class="list">
      <li><a href="#"><span>88023</span>some stuff About Some Stuff some stuff About Some Stuff some stuff About Some Stuff</a></li>
      <li><a href="#"><span>88032</span>some stuff About Some Stuff</a></li>
      <li><a href="#"><span>88902</span>some stuff About Some Stuff</a></li>
      </ul>
      </body>
      </html>
      a rip from something I did a while back. Has some extra style mark-up still in it but you should be able to weed it out easily.
      Stop making things so hard on yourself.
      i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

      Comment


      • #4
        Thanks guys.

        Comment

        Working...
        X