Setting CSS shaped non ordered lists

I'm trying to get off the format as shown in the gif attatched to a timeline.  I'm messing around with formatting bulleted lists, but I can't get it quite right.  I want to just make sure I'm on the right track.  I tried to use inline and floating the li of the year to get this right, but just can't.  Any guidance would be appreciated!  Thank you!

Make a series of GIF images for the years that you want to use.

Make each

  • element have a class assignment that reflects the year in use.

    • Your description for each year of this
    • Your description for each year of this
    • Your description for each year of this
    • Your description for each year of this
    • Use CSS like this-

      UL {list-style-type: none ;}}

      Li {padding-left: 35px; / * assuming that it is the width of the year pictures so that there is enough space * /}

      Li.year1982 {background-repeat: No.-repeat; background-image: url(_img/year1982.gif) ;}}

      Li.year1983 {background-repeat: No.-repeat; background-image: url(_img/year1983.gif) ;}}

      Li.Year1994 {background-repeat: No.-repeat; background-image: url(_img/year1994.gif) ;}}

      Li.year1996 {background-repeat: No.-repeat; background-image: url(_img/year1996.gif) ;}}

      That should do the trick...

  • Tags: Dreamweaver

    Similar Questions

    • 2 sets of links as non ordered lists. 2nd set not recognizing correct CSS, help please...

      Hello!

      I have two sets of links on my web page, set up in an unsorted list format. the first across the top and the second along the left side. The second set seems to always take on the styles of the first. They are both identified in the different div tags and have their own css styles...

      How can you have two sets of links, set up as non ordered lists and edit both independently of each other?

      the CSS code is attached...

      Thanks for the help!

      You have a link to the online site?

      Briefly looking at the CSS, each grouped selectors must be declared in its entirety.

      for example

      a.the li #topMenu, li a.current:hover, li a.current: active {...

      Only the first selector refers specifically to the inside

    • inside the div id = "topMenu". Others are global.

      For specifically refers to items only within the #topMenu, the selector should read:

      a.the li #topMenu, li a.current:hover, li a.current #topMenu #topMenu: active {...

      and so on.

    • need for a training module for a non ordered list of column 3

      http://www.alpenawebdesigns.com/resume.html

      on my RESUME, I need a table with 3 columns for my education and professional experience. does anyone know of a training module that will help me with that?

      Definition lists

      http://www.maxdesign.com.au/articles/definition/

      36 RESUME that works

      http://jobmob.co.il/blog/beautiful-resume-ideas-that-work/

      Nancy O.

    • Why does my ordered list not appear correctly?

      None of my bulleted lists are displayed correctly.  I use the manual tutorial Dreamweaver revealed, and I use the css that comes with the book, so I did not design their...

      But this kind of work will tell me to make an unordered list, but give me css that will not display correctly?

      What happens is that when I format a list in a unordered list, all elements are indented together as a single element, and there is no miracle.  In addition, the ordered lists are the same.  Someone has an idea, what happens?  To give an example:

      Seasonal gardening checklist

      Fall - time to plant trees and spring-flowering bulbs. Take the time to clean the leaves and dead foliage of your beds and lawn. Winter - time to prune fruit trees and plant your bulbs finish. Don't forget to water the saplings when the soil is dry. Spring - time to prepare your beds, annuals and spread fertilizer for established plants. Don't forget mulch to conserve moisture and prevent the growth of weeds. Summer - time to complete precipitation so that plants get an inch of water a week. Plant your vegetable garden and enjoy abundant harvests until the end of autumn.

      This is what looks like the list, but every word in bold is supposed to be a smart element.

      What I ended up doing was, I just made a new class selector: .menulist, which sets the display to inline, and I applied it to all list items in the .menu_bar.  It was a bit tedious, but it worked.  Thanks for the help everyone!

    • Spacing of the paragraphs in ordered lists

      I am trying to increase the spacing of the paragraphs in ordered lists. I looked around, searching Google and found various suggestions, but none seemed to work. Also, I looked through these forums but can't find anything, maybe because I didn't know how to Word the question.

      Here is the site: www.ourhealthcarecrisis.com

      How can as a question I put a box around a specific text highlighted in a paragraph? I know how to change the color of the text itself, but can not find a way to put a small box around a few words.

      I was up pretty late last night, so maybe my brain is a bit fuzzy.

      Thank you.

      Add space below

    • in the sorted list add the below to your css:

      . Buffer1 li, .buffer2 li {}

      padding-bottom: 15px;

      }

      Hightlight the text to paragraph - use a tag:

      It is aspecific textin a paragraph

      Then use this css:

      span {}

      padding: 4px;

      background-color: #CF6;

      display: inline-block;

      }

    • Cannot associate an e-mail program on default programs, as none are listed

      Original title: PROGRAM ASSOCIATION

      I can not associate an e-mail program on default programs, as none are listed.  I a Mail.Live and an Outlook account, I can send and receive between my Comcast email, but the box 'contact us' on some websites have the error message stating "there is no e-mail program associated to this.  I don't have MS Office.  WTF?

      If you use a Webmail and access them through your browser (e.g. Internet Explorer), mailto links will not work. Windows is looking for an email client by default than Windows Live Mail, Thunderbird, etc.
       
    • Display css selected in a list as cs6 properties

      How see and edit the properties css in a list as in cs6 without all these other visual designer stuff added in.

      This format of designer is busy way to quickly edit and add css design mode properties and coding notices are displayed in shared mode.

      The only way I can see the css in a list is by toggleing back and forth between the CSS and code view.

      Cs6, it's nice to simply click in the design view window on the desired area and it shows the current css rules in a list without all this other stuff added in Designer.

      I hope that there is a parameter to the seasond css developer to work directly with the code without all the designer stuff and without having to switch between the style sheet and the code to do?

      The ideal workflow would be to see the desing view code and view css at the same time and in harmony together so when you click anywhere on the code view or the design of the related css property would be selected on the style sheet (IE 'triple-split-mode').

      Thanks for any help or advice given!

      @kwgonline: you can check the oprtion show the value at the top right of the properties panel to see only properties defined in a particular selector, without having to see all other properties.

      I hope that this option makes your workflow to a certain extent.

      In case you want to see only the properties in a simple list, please submit a feature request to us through https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform.

      This will help us give priority to demand absed on the number of these requests we receive from improving.

      Thank you

      Harish

    • CSS with TLF text lists

      I use a text box TLF external text of House with a CSS stylesheet.  Can I set up a list to chips of in CSS?

      No, but you can use tags to list (ordered and unordered) with your html text.

    • CSS Menu - drop down list help.

      Hi guys,.

      I am re - create a website for a friend and am currently finding the difficult Menu CSS coding.

      Here is MY version of the Web site:

      http://abacusmortgages.co.uk/index.html

      Here is the current version, which I am trying to copy:

      http://sdhmarketing.co.UK/

      Pages: Our types of customers and what you need to have special css menu dropdown lists that come when you hover over the button.

      Here is the CSS code that I have so far:

      #holding ul {}

      margin: 0px;

      padding-left: 0px;

      list-style-type: none;

      do-family: Arial;

      do-size: 14px;

      make-weight: bolder;

      color: #506F1A;

      background-image: url(images/navbg.jpg);

      position: absolute;

      left: 0px;

      Top:-3px;

      }

      #holding ul li {}

      float: left;

      Width: 200px;

      margin: 0px;

      make-weight: bold;

      }

      #holding ul li a {}

      do-family: Arial;

      do-size: 11pt;

      color: #506F1A;

      text-decoration: none;

      background-color: Transparent;

      text-align: center;

      display: block;

      padding: 5px;

      }

      #navigation {}

      }

      #holding ul li a: hover {}

      color: #FFF;

      background-color: #333;

      make-weight: bolder;

      do-size: 14px;

      }

      .menu {}

      }

      Here is the HTML code I use:

      < ul >

      < li > < a href = "index.html" > HOME < /a > < /li >

      < li > < a href = "ourclienttypes.html" > OUR CUSTOMER TYPES < /a > < /li > ""

      < li > < a href = "whatdoyouneed.html" > of WHAT do you NEED? " < /a > < /li >

      < li > < a href = "casestudies.html" > CASE STUDIES < /a > < /li > ""

      < li > < a href = "managementteam.html" > MANAGEMENT TEAM < /a > < /li > ""

      < /ul >

      If someone could help it would be much appreciated.

      Thank you all!

      . Selected a: hover {}

      background-color: #444;

      color: #fff;

      }

      }< remove="" that="">

    • Decimal numbers can be used in ordered lists?

      Hello

      I don't know if this is possible, but I'll ask anyway. I have several lists to create with the main points and subpoints underneath them.

      Is it possible by using ordered in DW lists for styling the main points than 8. 1, then the secondary points than 8. 1. 1, 8. 2 1-8. 2. . 3 and so forth?

      Can it be done with CSS?

      I can just type the number in the < li > but points do not line up.

      I think that those are your only choices-

      http://meyerweb.com/Eric/CSS/tests/CSS2/SEC12-06-02a.htm

    • How to make an application for shaped on the list of dashboard values

      I have the dashboard with several pages that use a set of guests for a year and a month. For some reports, I use the value invited to display data only for this month, but some reports that I need to view the data in the previous 12 months, so I have set these guest not directly for the column, but with the formula as advised by Vincent in his post on the dashboard incentive (http://oraclebizint.wordpress.com/2008/02/26/oracle-bi-ee-101332-between-prompts-for-date-columns-using-presentation-variables/)

      The formula I use is "CASE WHEN 1 = 0 THEN ' Sun - Times '.» «Year"ELSE 2007 END", the drop-down list is displayed by SQL statement "SELECT DISTINCT" dim - periods ".» Benefit year "loss analysis" ORDER BY ' Sun - Times '. Year '.

      The problem is that, regardless of the setting in the form by default of column "Sun - times» Year', the values are shown with two decimal places, for example "2008,00" at the time.
      The question is - how can I get rid of the decimal places in the list of dashboard values?

      Add CAST as follows... (You need on the "show > SQL result" is part of the dash line, not to change the formula)

      SELECT DISTINCT CAST (' Sun - Times '.) Year AS INTEGER) of 'Profit loss analysis' ORDER BY ' Sun - times» Year '.

    • ePrint, set up but do not list on google cloud

      I have correctly configured my all in a single D110 for hp eprint.  And set the option allow google cloud print, but it does not show on my list of printers.  I added the printer on the registration page and he says that he is already registered and must be shared with myself?

      OK I understand your question now.  You will need to go into the settings on your printer and the title of the Web Services wireless, restore the default settings of the network, then turn again on web services (just like the first time you set up). You will get a new e-mail address ePrint which you must register with eprintcenter, then use to go back to the Google Cloud.  It simply will not allow you to add the email address previous ePrint (deleted) again.

      This link will take steps to do what you need to do.

      Please let me know if it helps.

      Good luck!

    • Height of row custom setting ListField shaped on 9000 &amp; 9530

      Hello

      I use the method setRowHeight (int, int) to set the height of a row in a custom list field. It works perfectly in all models except the 9000 and 9530. In these two model, it seems that she ignores my call to the method and it does not change the height.

      Everyone knows this or have a possible solution?

      Greg

      Wow I feel stupid, it was formatted correctly. The screen size is just bigger and I changed the wrong font size so it appeared smaller.

    • How to set the bind value of list by program

      Hello

      I have a binding list that is accessible from EL #{bindings.myList.inputValue}. I would like to set its value programmatically.

      How to do this?

      JDev 11.1.2.4

      Thank you

      BindingContext bctx = BindingContext.getCurrent ();

      BindingContainer links = bctx.getCurrentBindingsEntry ();

      JUCtrlListBinding = lov

      (JUCtrlListBinding) bindings.get ("name");

      Thank you

    • Ordered list of elements is not the correct master organization elements

      Hello!

      When I try to enter the item to be ordered SO line point, the points listed are no longer the elements of my organization (master). It is used to work one week back. Any idea what has changed? Profile options?

      Thank you.

      We have recompiled the elements Flexfield system and it worked.

    Maybe you are looking for