bulleted list in spry accordion

Discussion in 'Software' started by butlerreuben, Dec 15, 2011.

  1. butlerreuben

    butlerreuben Private E-2

    I have been trying to figure out how to include a bulleted list in my spry accordion panel content area with no luck any advice would be helpful.
     
    butlerreuben, Dec 15, 2011
    #1
  2. PC-XT

    PC-XT Master Sergeant

    The CSS for submenus of a bar menu would be something like
    Code:
    #barmenu ul ul {
list-style: disc inside none;
}
    If there is a background image, it will replace "none" in that code.
    If it's not for a bar menu, remove one of the repeated ul's.
    This worked on an existing menu, but yours might be different. The id of the div containing the menu in this example is "barmenu"
     
    PC-XT, Dec 16, 2011
    #2
  3. butlerreuben

    butlerreuben Private E-2

    I have a <ul=id"navlist"> that is using an unordered list. I was trying to just use a

    <ul>
    <li></li>
    </ul>

    inside of a div containing a spry accordion panel.

    I checked all the code and it does not have a double ul ul in it anywhere. I could post all the code if it would help...
     
    butlerreuben, Dec 16, 2011
    #3
  4. butlerreuben

    butlerreuben Private E-2

    im including the code with a highlighted area where im having problems. To elaborate I am trying to put an unordered list in that area the words show up but no bullets and its right up against the top of the paragraph.

    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="central">
    <div id="header">
    </div>
    <ul id="navlist">
    <li><a id="n1" href="*"><span></span></a></li>
    <li><a id="n3" href="*"><span></span></a></li>
    <li><a id="n5" href="*"><span></span></a></li>
    <li><a id="n7" href="*"><span></span></a></li>
    </ul>
    <div id="content">
    <div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    <p>
    </p>
    <ul> <!! -- problem starts here -- !!>
    <li>
    </li>
    </ul>     <!! -- problem ends here -- !!>

    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    </div>
    </div>
    </div>
    <div id="footer"></div>
    </div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>
    </code>
     
    butlerreuben, Dec 16, 2011
    #4
  5. butlerreuben

    butlerreuben Private E-2

    To elaborate I am trying to put an unordered list with a bullet style inside the <div class="AccordionPanelContent"> but the bullets do not show up and its right below the paragraph and I cannot seem to get it to go lower.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="central">
	<div id="header">
	</div>
    <ul id="navlist">
      <li><a id="n1" href="*"><span></span></a></li>
      <li><a id="n3" href="*"><span></span></a></li>
      <li><a id="n5" href="*"><span></span></a></li>
      <li><a id="n7" href="*"><span></span></a></li>
    </ul>
	<div id="content">
		  <div id="Accordion1" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"></div>
              <div class="AccordionPanelContent">
</div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"></div>
              <div class="AccordionPanelContent">
              <p>
</p>
              
         
              <ul>  <!! -- this is where im having a problem --!!>
              <li>
              </li>
              </ul>
              
              </div>
            </div>
            <div class="AccordionPanel">
		      <div class="AccordionPanelTab"></div>
		      <div class="AccordionPanelContent">
</div>
	        </div>
        </div>
		<div id="footer"></div>
	</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html
     
    butlerreuben, Dec 16, 2011
    #5
  6. PC-XT

    PC-XT Master Sergeant

    I recommend assigning a class so you can use this for more than one list. The html for each one will be
    Code:
    <ul class="bulleted">
<li>item goes here</li>
<li>etc.</li>
</ul>
    And the CSS:
    Code:
    ul.bulleted{
list-style: disc inside none;
}
    You might also want to try adding
    Code:
    ul.bulleted li{
display: list-item;
}
    These would be added to the CSS. They won't be part of the existing code, since the class is new.
     
    PC-XT, Dec 16, 2011
    #6
  7. butlerreuben

    butlerreuben Private E-2

    That worked thanks :)

    Now just to move the list below the paragraph more about 3 lines and be able to have about 3 of them and then have another list to the right of the first one. Any ideas since its in a spry accordion panel?
     
    butlerreuben, Dec 17, 2011
    #7
  8. PC-XT

    PC-XT Master Sergeant

    Since you want another list beside the first one, it might be best to have the space attached to the paragraph rather than the list, so I'd give the paragraph and id, like
    Code:
    <p id="pwmb"></p>
    (That stands for Paragraph With Margin Bottom, but use whatever you want.)
    Then, the CSS:
    Code:
    #pwmb{
margin-bottom: 3em;
}
    You can adjust that, using different measurements, if you prefer.
    (See http://www.w3.org/TR/CSS2/box.html for diagrams about margins and padding on things such as paragraphs and lists.)

    To add more lists, just repeat the same html code. Since you want two columns, I'd do this:
    Code:
    <div class="AccordionPanelContent">
              <p id="pwmb">
</p>
              <div class="col50lft">
<ul class="bulleted">
<li>item goes here</li>
<li>etc.</li>
</ul>
<ul class="bulleted">
<li>second list starts here</li>
<li>etc.</li>
</ul>
<ul class="bulleted">
<li>3rd list here</li>
<li>etc.</li>
</ul>
         </div>
<div class="col50rt">
<ul class="bulleted">
<li>right column list goes here</li>
<li>etc.</li>
</ul>
              </div>
              </div>
    with this CSS:
    Code:
    .col50lft{
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
border-left:none;
border-right:none;
float:left;
width:50%
}
.col50rt{
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
border-left:none;
border-right:none;
float:right;
width:50%
}
/*I already introduced this next rule, above:*/
#pwmb{
margin-bottom: 3em;
}
    If you change any of the margin, padding, or border settings for the columns, you'll also need to decrease the width or the columns won't fit next to each other. If you have specific measurements for the columns, they would be better than percentages. You can change the margin-bottom for the paragraph as you want without worrying about the columns.
     
    Last edited: Dec 17, 2011
    PC-XT, Dec 17, 2011
    #8

MajorGeeks.Com Menu

Downloads All In One Tweaks \ Android \ Anti-Malware \ Anti-Virus \ Appearance \ Backup \ Browsers \ CD\DVD\Blu-Ray \ Covert Ops \ Drive Utilities \ Drivers \ Graphics \ Internet Tools \ Multimedia \ Networking \ Office Tools \ PC Games \ System Tools \ Mac/Apple/Ipad Downloads

Other News: Top Downloads \ News (Tech) \ Off Base (Other Websites News) \ Way Off Base (Offbeat Stories and Pics)

Social: Facebook \ YouTube \ Twitter \ Tumblr \ Pintrest \ RSS Feeds