Ornament between items of list in CSS

Helllo Dreamweavers.

I'm working on a site that has a menu in it.

Not a menu like the one you have in your site regularly, but one you will find in a restaurant.

Between courses, I want an ornament floral heart as separator, as follows:

floralheart.png

Now, I could easily add the symbol in HTML between list items, as follows:

< ul >

the grill < li > van Kreeft, quinoasalade met blokjes augurk, ansjovisdressing in limoencreme. < /li > & #x2766;

< li > in good gegaarde zeeduivel, ter plekke getrancheerd zijn. < /li > & #x2766;

< li > tarbotfilet Gegrilde met ovengegaarde en restaurant, anijschampignons in waterkersjus Zucchini. < /li > & #x2766;

< /ul >

which is what you see in the picture.

But the content is editable by the customer more later in a CMS, I'dd add rather ornament in CSS so it still works.

I tried this:

Li: after {}

content: '\2766 ';

}

That works, but adds the floral heart after the list item, where I want to be between list items, while it is always centered.

So, how this could be done?

Make a non-repetitive background image to the

  • tag.  Add padding to the bottom of the tag to place the element.  Background-position allows you to center the floral heart.  Should work fine.

  • Tags: Dreamweaver

    Similar Questions

    • Where can I find a complete list of css to userChrome.css options?

      Can the title says it all really, where I find a complete list of css to userChrome.css options?

      The list of mozillaZine seems massively out of date.

      http://KB.mozillazine.org/Chrome_element_names_and_IDs

      It is impossible to create and maintain such a list.

      ID and class names can change at any time between the versions especially version beta and Aurora and night-time compilations.

      You need to familiarize yourself with the help of the DOM Inspector, or ask a specific question if you need to know a selector.

      You can also check some CSS files via their chrome protocol binding.

      • chrome://browser/content/browser.CSS
      • chrome://browser/skin/browser.CSS
    • I can switch between the code sheet and css html, but I would like to see them both at the same time as well as the design window. Right now and can see rather the design and code html or design and css. How can I arrange to see all at the same time, of

      Hello

      My name is Ellie and I am new to Dreamweaver.

      I can switch between the code sheet and css html, but I would like to see them both at the same time as well as the design window. Right now and can see rather the design and code html or design and css. How can I arrange to see everything at the same time, design, HTML and CSS?

      Thank you

      It ends up something like that...

    • Remove the space between the items in list box

      Hello

      I have a list box, I need to change the space between each item in the drop-down list.

      (ex)

      test

      Test1

      test2

      I need it to change the space between the test and vice versa test1.

      Kind regards

      Roman papail

      You must specify the list control rowHeight for example

                                    
      

      If this post answers your question or assistance, please mark it as such.

    • BBUI.js how to have the item id list-arrow-text to a detail screen

      I use BBUI.js and on my screen, I have a text-arrow-list with the elements.

      How to pass the data bb-item value to a window of details to retrieve and display more details there?
      This may be really obvious, but I don't see how do and any help would be appreciated.

      Excerpt from the list screen. He is firing onclick of the item in the list.
      openListItem: function() {}
      var value = this.getAttribute('data-bb-value');
      bb.pushScreen ("detail.html" + "?") ID = "(+ value, 'detail');"
      }

      It's the charge of the detail screen where the Iwoudl like access id
      detailScreen = {}
      load: {function (element)}
      How do I access the query string of the url in the pushScreen or the id of the list?
      }

      Please let me know if my question is not clear enough. Thank you.

      I don't think that we have added the ability to pass parameters through pushScreen().

      You'll need follow the overall status in your own public variable/object.  Now click the element, you will need to save the value in an object / a global variable.

      There is an bb.onscreenready event which you can subscribe to which fires before the new screen is treated by the Toolbox... It will pass the part of the screen you can handle until the style is applied.

      There are details in the Readme that give more information on how this works... Just do a search on the page of "onscreenready".

    • As a component of item in list box

      Hello

      I have created a ListView with components list item as a label and a checkbox control.

      When I check the box on a list item, I will not get an onTrigger event in the list.  Thus, there is no way to check if the box is checked or unchecked.  I don't need a single checkbox to be in a State of "verified" in both listview.

      I tried to get the row of the box that is checked and call a function to browse the path to the index. Now I want to uncheck all of the boxes other than the one that is checked today.

      CheckBox {
                     id: checkBoxId
                     horizontalAlignment: HorizontalAlignment.Right
                     verticalAlignment: VerticalAlignment.Center
                      onCheckedChanged: {
                       var rowNum = rootContainer.ListItem.indexPath;
                       count = articlesDataModel.size();
                        toggleCheckBox();
                                         }
                }
      
                  function toggleCheckBox()
                          {
                            for (var i=0 ; i< count ; i++)
                             {
                              if(rootContainer.ListItem.indexPath[i]!= rowNum)
                               {
                                ????????
                                }
      
                               }
      
                            }
      

      This is the code that I have tried. But I don't know how to get the control box here inside...

      Could someone please look into this?

      Thank you

      SJ

      Hello..

      http://supportforums.BlackBerry.com/T5/Cascades-development/RadioButton-in-list-view-problem/TD-p/24...

      This link helped me to solve this problem. Thank you

    • Mobile menu - too much space between items

      I tried to make mobile menus with several widgets Muse-theme, but all have large vertical spacing between the menu items. See screenshot. Don't know if it's muse or the widget, but it seemed to work the first time. Is there a setting I'm missing?

      menu.jpg

      I would check the "spacing" affecting something is certainly the addition of this extra space

    • Help the difference between items in menu menu widget...

      Is it possible to get rid of the gap between the menu items? No matter what I do, I can't seem to get rid of the og it.

      There is a palette that I never knew, the range of spacing. I was able to modigy there.

    • Selected items from list to separate text block

      Hello

      Could someone please help find a solution to this? In the linked image, you will see a numbered list with each line in the list starting with a digit 4 (magenta), there is also a login of color in the form of a capital letter (orange). I need to take these pieces from each line and creates a single string, separated by dashes of underscore, as shown in the attached file.

      Could you think? If so, how could we do?

      Your help will be greatly appreciated!

      Screen Shot 2013-05-22 at 17.02.40.png

      Hello

      Ok. Replace these lines:

      var source = mDoc.textFrames.item("source");
      var output = mDoc.textFrames.item("output");

      with:

      if (app.selection.length != 2) exit();
      
      if (app.selection[0].geometricBounds[0] < app.selection[1].geometricBounds[0]) {
      
           var source = app.selection[0];
           var output = app.selection[1];
      } else {
           var source = app.selection[1];
           var output = app.selection[0];
           }
      

      Jarek

    • Edit a library item and now my CSS no longer works!

      I'm so frustrated that I am almost in tears.  I created a menu on a page of the site at about 7 and menu DW library to put on additional pages.  Everything worked well and then I changed a path to one of my links and click on the button to update the rest of the pages and that's when it happened.  My CSS had disappeared, no longer by applying to one of my menus.  I created an additional CSS sheet just for the style my menu and it worked fine until I changed a link frickin to one of my menu icons.  Now my CSS Sheets does not apply.  I don't know what's happened and why change the path of a link may result in the cancellation of my styles.  Anyone had this happen?  Suggestions are greatly appreciated.  Thank you!

      Thanks to you all!  I realized what was going on, in my opinion.  For some odd

      reason, my div ID tags were is no longer included in the syntax.  When I went

      and put the right ID's back, everything fell in place.

      I'm still relatively new to DW, skipped CS4 right in CS6 and did not

      learned how to make the menus yet differently.  I will definitely take a

      Look at the recommendations provided.  I don't really like library items.

    • How to choose the item value list based on another value of list item

      Hello friends,
      I have two list items named xxx and yyy... OK, my problem is I want to choose a value of yyy list item based on the value of article xxx...

      Example: I select 'Computer' in xxx... Based on this I want to choose the item values in yyy as a monitor, keyboard, mouse, etc... This must be done at run time. How can I do this... Give me a few examples of code [pls tell me trigger appropriate to place this encodings]
      Thanks in advance,
      Battistelli

      Very simple to use the LOV and query of the lov which is attached to the YYY field, use the query as below...

      SELECT columns
      FROM table
      WHERE column_name = :XXX_FIELD
      

      Use the ENTER OF LIST Yes property for the YYY field.

      -Clément

    • AS3 - making an index for each item in list box

      Hi guys,.

      I'm puzzled. It could be something simple that I'm doing wrong.


      I have a table populated by XML based on the following inside the function:

      first_special.addItem({label: xmlMenuFile.item.headers[i],data: 
      xmlMenuFile.item.descriptions[i],data2: xmlMenuFile.item.hints[i]});
      

      The problem I have is trying to find a way for the "data2" will fill the text field 'hint_txt' on ROLL_OVER of the same name of items in the list.

      I tried to place an event listener in the function that populates the drop-down list box, but does not

      // this populates the combo box label and data with the Loaded XML File. This works
      function changeHandler(ev:Event):void
      {
           menuText_mc.heading1_txt.text = ev.currentTarget.selectedItem.label;
           menuText_mc.description1_txt.text = ev.currentTarget.selectedItem.data;
           heading1 = ev.currentTarget.selectedItem.label;
           includePrice1_mc.visible=true;
      
      
      // trying to figure out how to activate the 'hinting' function when you ROLL_OVER EACH ITEM in the 'first_special" combo box
      // and when rolling over it trace 'hello'. This DOES NOT WORK.
      first_special.addEventListener(MouseEvent.ROLL_OVER, hinting);
      }
      
      
      function hinting(e:MouseEvent):void{
      // Should trace "hello" everytime I Roll_OVER an item in the Combo Box.     
           trace("hello");
      }
      
      // calls the changeHandler function and works correctly
            first_special.addEventListener(Event.CHANGE, changeHandler);
      
      
      Any help with this would be great.
      
      Thanks
      

      For the features of indicators, I think you want to define...

      Import fl.events.ListEvent;

      function hinting(e:ListEvent):void {}
      var rowIdx:uint = e.rowIndex as uint;
      hint_txt. Text = .data2 first_special.getItemAt (IdxLigne);
      }

      first_special.addEventListener (ListEvent.ITEM_ROLL_OVER, hinting);

      What you react only to roll on the main component, not the elements, and this reversal starts to happen until you have selected an item since you buried the listener inside the change function.  Keep the headset out in the open.

    • The list of CSS rules that disappears (Mac)

      I do not know where is the appropriate place to report a bug:

      Sometimes a double click on a name for the style in the CSS Palette of Styles will be the list of style rules to disappear (instead of open the CSS rule Definition dialog box).

      If you are experiencing the problem:

      1. don't panic.

      2 double-click New exactly in the same place

      I do not know where is the appropriate place to report a bug:

      A bug report filing manager ensures that Adobe will read it

      https://www.Adobe.com/cfusion/mmForm/index.cfm?name=wishform

      Using CS5?

    • changing the left margin of the bulleted lists in css?

      Hello

      If someone could give me advice on how to change the margin left of bulleted lists, make it closer to that preference, I would be so grateful.

      I typed in the search but could not find it again, read a lot of other good things well...

      Thanks in advance for any advice you :-)

      You can set it up in your CSS as follows

      UL {}

      padding-left: 0;

      margin-left: 0;

      }

      The filling is what you want to order. Older browsers IE could use margins so we zero out, then control space with padding. so, if you wanted to 10px left of your list.

      UL {}

      padding-left: 10px;

      margin-left: 0;

      }

    • Help to the drop-down list items in list making invisible field

      On the attached form, I have a drop-down list "Item". How can I get the items in this list make the text field "embroidery" visible or invisible depending on the element selected?

      My programming skills are very basic, livecycle as I am just getting into this. Any help would be appreciated.

      Tom,

      our email form.

      hope this is what you were after.

    Maybe you are looking for