Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Horizontal unordered list problem.


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
 
Prev Previous Post   Next Post Next
  #1  
Old Nov 16, 2010, 01:40 AM
gmedel
 
7 posts · Feb 2010
Unhappy [SOLVED] Horizontal unordered list problem.

Hi, I'm using a plugin called "Tumblr Widget" to display, on my wordpress blog, the last 4 posts from my Tumblr Blog. The plugin creates an unordered list to display the posts, so the list appears with the same styling that any other unordered list has (for example, just like the BFA_polular_posts widget), the only difference is that normally this "tumblr posts" are images or videos, no text.

I want to be able to display this items horizontally, but I've unable to do it with the CSS inserts.

This is the code generated by the plugin (inside a custom widget):

Code:
<div id="tumblr_widget_area" class="bfa_widget_area">
<div id="tumblr-widget-3" class="widget Tumblr">
<div id="Tumblr_List"> /* This line was added by me, by editing the plugin code. */
<ul>
<li class="tumblr_post video"><object width="100" height="81.5"><param name="movie" value="http://www.youtube.com/v/0pemlKXKQXM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/0pemlKXKQXM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="100" height="81.5"></object><br><p><a href="http://hrfavorites.tumblr.com/post/1469167109" class="tumblr_link">11/03/10</a></p>
</li>
<li class="tumblr_post photo"><a href="http://26.media.tumblr.com/tumblr_l6pgw2iOI81qcl834o1_500.jpg"><img src="http://28.media.tumblr.com/tumblr_l6pgw2iOI81qcl834o1_100.jpg"></a><br><p><a href="http://hrfavorites.tumblr.com/post/1469144441" class="tumblr_link">11/03/10</a></p>
</li>
</ul>
</div> /* This line was added by me, by editing the plugin code. */
</div>
</div>
and this is my current CSS insert:

Code:
#Tumblr_List ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }
#Tumblr_List li {display: inline; }
and this is the end result:



As you can see, the first CSS line is doing nothing, and the second one, for some reason it just displays the gray padding on the left of each item with a less height (normally the gray padding has the same height of each item).

I'm not sure what am I doing wrong here. Could anyone please give me some pointers on this matter?
 

Bookmarks

Tags
css inserts

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem with horizontal scrolling rcrsupport Header configuration & styling 0 Apr 13, 2010 07:16 PM
[SOLVED] How can I move vertical links list into horizontal list on navigation bar? kevandali Page & Category Menu Bars 2 Jul 21, 2009 01:04 PM


All times are GMT -6. The time now is 06:00 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.