Forums

[resolved] css ordered list help (4 posts)

  1. bespokeordie
    Member
    Posted 3 years ago #

    Hello Again Everyone,

    I am working on the header for my site. The RSS section at the top right shows an icon followed by 3 links. I have been trying unsuccessfully to add a twitter icon followed by the word "twitter" right before the RSS info already there on the same line. I think the problem may be because i am trying to put 2 ordered lists on the same line with the ul class function. Here is the relevant code:

    .PHP HEADER FILE:

    <div id="page_navi" class="wrap">
    				<div class="col-left">
    					<ul id="nav">
    						<?php if (is_page()) { $highlight = "page_item"; } else {$highlight = "page_item current_page_item"; } ?>
    						<li class="<?php echo $highlight; ?>"><a href="<?php bloginfo('url'); ?>">Home</a></li>
    						<?php wp_list_pages('sort_column=menu_order&amp;depth=0&amp;title_li='); ?>
    					</ul>
    				</div>
    				<div class="col-right">
    					<ul class="rss">
    						<li><a href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>">Posts</a></li>
    						<li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments</a></li>
    						<li class="last"><a href="http://feedburner.google.com/fb/a/mailverify?uri=<?php $feedburner_id = get_option('woo_feedburner_id'); echo $feedburner_id; ?>&amp;loc=en_US" target="_blank">Email</a></li>
    					</ul>
    				</div>
    			</div>

    .CSS FILE:

    .col-right {
    	float: right;
    }
    /* I deleted the irrelevant code here */
    /* Page Navigation (rss) */
    
    #page_navi ul.rss {
    	background: url(images/bg_rss.gif) no-repeat 0 5px;
    	padding: 6px 0 2px 15px;
    }
    
    #page_navi ul.rss li {
    	padding: 0 10px;
    	display: inline;
    	background: url(images/bg_separator.gif) no-repeat right 4px;
    }
    
    #page_navi ul.rss li.last {
    	background: none;
    }

    I tried copying this and creating a #page_nav ul.twitter, but it kept showing up above the rss line and not in front of it. Any thoughts? Thank you for your time and your help.

    Chris
    http://www.bespokeordie.com

  2. bespokeordie
    Member
    Posted 3 years ago #

    bumpy bump bump

  3. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    They're unordered lists - not ordered (numbered) lists.

    <ul class="rss">
    <li class="twitter"><a href="link_to_twitter"><img src="url_of_image" width="" height="" alt="Twitter" /></a></li>
    <li><a href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>">Posts</a></li>
    <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments</a></li>
    <li class="last"><a href="http://feedburner.google.com/fb/a/mailverify?uri=<?php $feedburner_id = get_option('woo_feedburner_id'); echo $feedburner_id; ?>&amp;loc=en_US" target="_blank">Email</a></li>
    </ul>

    is probably the easiest way to do it. Also ensures that, if images are disabled, the link is still visible.

  4. bespokeordie
    Member
    Posted 3 years ago #

    Thank you so much for your help. You are always helping me out. I can't thank you enough. I'm off to my next problem. Trying to figure out why my updated theme comments.php just removes the comments all together.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.