Impossible to Add List-style to h3 Element?

HTML & CSS
1

Hello,

With my menus on Atlanta Review Group- Product Articles, I find that list-styles make the list flow nicely for the reader, thus I would like to add them to the sub-section headings which are <h3> elements. I tried adding a list-style in the CSS, but I’m guessing this might not be the right HTML element for this. Anyone know? :slight_smile:

2

Do this:

<h3><span>Diet</span></h3>
================
h3 {
    padding-left: 40px;  /*adjust to suit*/
    }

h3 span {
    display: list-item;
    list-style-type: disc;
    }

You need a parent for the list-item so there’s padding for the marker.

cheers,

gary

3

it’s not impossible… it’s just overkill.

your page only contains navigation ( am assuming at some point you will want content in there… I HOPE) That means that you will have a BUNCH of h2, h3, h4s before your h1( main story) or at best competing with your main story and sections ( h1 and or h2…etc)

So then it would stand to reason that you ONLY want the Hx’s there for the sake of style and not semantics.

  1. I would STOP with the doubling of LI/DIVs:
<li><a href="http://www.atlantareviewgroup.com/health.html">health</a>
    		<div id="health">

Since the LI is already a block element, you dont really need the DIV

  1. what you need to do is NEST your list properly.

eseentially like this:



	<ul> 
	<li><a href="http://www.atlantareviewgroup.com/health.html">health</a>
        		<ul>
			   <li><div class="head"><strong>weight loss</strong></div>
				<ul>
               		 	 <li><div class="head"><strong>fitnesss</strong></div>
                      			<ul>
                       				 <li><a href="http://www.atlantareviewgroup.com/health/fitness/weiderpowerbell1.html">Weider PowerBell</a></li>
                             			 <li><a href="http://www.atlantareviewgroup.com/health/fitness/brazilbuttlift1.html">Brazil Butt Lift</a></li>
                             			 <li><a href="http://www.atlantareviewgroup.com/health/fitness/georgesstpierre1.html">MMA Training with Georges St. Pierre</a></li>
                             			 <li><a href="http://www.atlantareviewgroup.com/health/fitness/turbofire1.html">TurboFire Fitness</a></li>
                           		 </ul>
				</li>
               		 	 <li><div class="head"><strong>fitnesss</strong></div>
                      			<ul>
                       		 	 	<li><a href="http://www.atlantareviewgroup.com/health/dieting/healthetrimdiet1.html">Health&eacute; Trim Diet</a></li>
                              	  		<li><a href="http://www.atlantareviewgroup.com/health/dieting/southbeach1.html">South Beach Diet</a></li>
                            		</ul>
				</li>
				</ul>
			   <li><div class="head"><strong>skin care</strong></div>
                   		<ul>
                   	 		 <li><a href="http://www.atlantareviewgroup.com/health/skincare/shivaacne1.html">Shiva23 Acne Cream</a></li>
               		  		<li><a href="http://www.atlantareviewgroup.com/health/skincare/deadseamineral1.html">Dead Sea Mineral Cellulite Treatment</a></li>
        	       		</ul>
			  </li>
			   <li><div class="head"><strong>Supplements</strong></div>
				<ul>
				    <li><div class="head"><strong>Vitamins</strong></div>
                    				<ul>
                            				<li><a href="http://www.atlantareviewgroup.com/health/Rx/nutrilitevitamins1.html">Nutrilite Multivitamins</a></li>
                            				<li><a href="http://www.atlantareviewgroup.com/health/Rx/dochangover1.html">Doc Hangover Cure</a></li>
                       				 </ul>
				</li>
			  	 <li><div class="head"><strong>male enhancement</strong></div>
                    			<ul>
                        			<li><a href="http://www.atlantareviewgroup.com/health/Rx/libigrow1.html">Libigrow</a></li>
                       			 </ul>
				</li>
                    		<li><div class="head"><strong>stop smoking</strong></div>
                   			<ul>
                        			<li><a href="http://www.atlantareviewgroup.com/health/Rx/smokedeter1.html">Smoke Deter</a></li>
                           			 <li><a href="http://www.atlantareviewgroup.com/health/ecig1.html">Electronic Cigarettes</a></li>
                        		</ul>
				</li>
			</ul>
	
    </li> 
       </ul>
       </li>
       </ul>

once that has been properly structured… you can style your “list heads” simply by doing this:



#pMenu li .head{ top section style rules}
#pMenu li li .head{ second section style rules}
#pMenu li li li  .head{ third section style rules.. you get the idea}
  1. I added the STRONG tag, for semantic emphasis to each LIST-section header. I wrapped it in a DIV because the STRONG tag is a inline element while a UL is a a block level element and you shouldn’t have block level and inline as siblings.

hope that helps you out.

4

Hell, I’d still use headers. Looking at the content, those are headers regardless of the desired style. Let users who use linear browsing get the benefit of using headers for navigation and skimming.


<ul id="main">
  <li>
    (div)<a href="http://www.atlantareviewgroup.com/health.html">health</a>(/div)
    <div><!-- the dropdown box-->
      <h2>weight loss</h2>
      <h3>fitnesss</h3>
      <ul>
         Links to fitness...
      </ul>
      <h3>dieting</h3>
      <ul>
         Links to dieting...
      </ul>

      <h2>skin care</h2>
      <ul>
        Links to skin care... no sub headings
      </ul>
      <h2>Supplements</h2>
      <h3>Vitamins</h3>
      <ul>
        Links to vitamins...
      </ul>
      <h3>Male enhancement</h3>
      <ul>
         Links to male enhancement... (since this is only one, consider maybe just a p with a link rather than a list)
      </ul>
      <h3>Smoking Cessation</h3>
      <ul>
        Links to smoking help... 
      </ul>     
    </div>
  </li><!--end health dropdown-->
  <li>
    <!--begin insurance...-->
  </li>
  ...
</ul>
End navigation menu entirely

That’s how I’d do it (and if you’re squeamish about blocks next to inlines, wrap a div around it and use #main li div+div to style the main dropdown div). Looking at the site, those looks like headers. They contextually feel like headers. Therefore I’ll say semantically they should be headers.

If you are looking for little icons in front of the headers like list-item images, why not just

#main h2 {
padding-left: width of image;
background-image: url(someimg) 0 50% no-repeat;
}
(make sure line-height or min-height is enough for the image)
#main h3 {
padding-left: width of image;
background-image: url(something) 0 50% no-repeat;
}

Using background images for list-style images is actually still more popular than using actual list-style-type, simply because it’s always allowed more cross-browser control.

5

Thanks for your Post!!! :cool::goof::rofl::p:D:)