WordPress.org

Ready to get started?Download WordPress

Forums

UL LI OL Confusion + CSS (4 posts)

  1. elmsblog
    Member
    Posted 6 years ago #

    I am using the Iowa Autumn 1 theme as a starting point for my website. The sidebar seems to make no sense of the lists. For example, the pages are an li inside a ul inside an li inside a ul! Seems to be a lot of lists inside lists just to display the menu items. It also makes it confusing to edit my CSS, not knowing what combination of ul / li / ol I need to alter.

    I was just trying all possible combinations until the list appeared the way I wanted it, but [gasp], IE adds a bullet point and doesn't observe the center alignment. I'd like to simplify the lists as much as possible, thus simplifying my CSS as well. I'm attaching the code for my sidebar, and the CSS is linked above.

    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
    
    			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
    
    			<li><h2>Author</h2>
    
    			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
    
    			</li>
    
    			-->
    
    			<?php wp_list_pages('title_li=<h2>Site Pages</h2>&sort_column=menu_order' ); ?>
    
    <!--
    	<li><h2>Archives</h2>
    
    				<ul>
    
    				<?php wp_get_archives('type=monthly'); ?>
    
    				</ul>
    
    			</li>
    -->
    
    			<?php wp_list_categories('title_li=<h2>Issues</h2>'); ?>
    
    			<?php wp_list_bookmarks(); ?>
    
    				<li><h2>Meta</h2>
    
    				<ul>
    
    					<?php wp_register(); ?>
    
    					<li><?php wp_loginout(); ?></li>
    
    					<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
    
    					<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
    
    					<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
    
    					<?php wp_meta(); ?>
    
    				</ul>
    
    				</li>
    
      <?php endif; ?> 
    
    	</div>
  2. Root
    Member
    Posted 6 years ago #

    The default WP nested lists from hell do take a bit of getting used to. From a certain limited perspective they do make sense but............

  3. moshu
    Member
    Posted 6 years ago #

  4. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    The "normal" way sidebars are done is like this:

    <ul class="sidebar">
    <li><h2>Item #1 name</h2>
    Item Content
    </li>
    <li><h2>Item #2 name</h2>
    ...
    </li>
    </ul>

    This is just a single list of items. Pretty straightforward, really. Where it gets confusing is when "item content" has a list of stuff itself. This comes up a lot, actually, because a lot of sidebar items are lists of links. wp_list_bookmarks, for example, produces this sort of thing by default.

    As long as you remember that everything is pretty much expecting the sidebar to be a list by default, things are pretty simple. The sidebar starts with a UL, then has widgets, then ends with a UL.

    Actually attempting to simplify things by using a DIV for the sidebar ends up making them more complicated. Why? Because all the defaults for this stuff are geared to producing LI's to go into the sidebar directly.

    For styling, start from your sidebar itself:

    .sidebar {
    // this is the style for the sidebar as a whole
    }
    .sidebar li {
    // this is the style for the sidebar items (all of them)
    }
    .sidebar li ul {
    // this is the style for any sidebars that have lists in them
    }
    .sidebar li ul li {
    // this is the style for the items in those lists
    }

    And so on..

    If you're using Firefox, I highly recommend installing the Web Developer extension. This has some very useful bits in it:
    1. The "View Styles" (shift-ctrl-Y) allows you to mouseover anything on the page and see the full path and all the applicable styles.
    2. The "Edit CSS" (shift-ctrl-E) allows you to edit the CSS in real time and see your changes immediately in the browser. After you refine the CSS you're using, you can cut and paste it into your style.css file for your theme.

    In particular, your site is using a <div id="sidebar"> which is causing most of your headaches. Try changing that to a <ul id="sidebar"> instead. You may need to screw with the CSS some more after this, but the styles will start to make a lot more sense.

Topic Closed

This topic has been closed to new replies.

About this Topic