Help CSS vertical list

Discussion in 'CSS' started by dhisky, Jan 16, 2010.

  1. #1
    How can I make this code vertical list?

    Thanks!
     
    dhisky, Jan 16, 2010 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    looks like it already is... or should be... But again, a tiny CSS snippet that may or may not be everything that's being affected isn't going to tell us much - and frankly CSS without the HTML it's applied to is usually complete gibberish anyways.

    Or did you mean horizontal (across) and not vertical (up/down)? what you have there should have the LI vertical since you aren't setting display:inline or float on the LI... Though that could also be something screwy in the markup. (and from what little CSS I see, I suspect that too could be the case)
     
    deathshadow, Jan 16, 2010 IP
  3. dhisky

    dhisky Peon

    Messages:
    207
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3


    deathshadow thanks!

    Actually it's a wordpress plugin that display a posts list in a page but my problem is, it's aligned horizontally.

    Here's the little html code that I'm using on the plugin setting.
    What do you think is the prob? Thanks!
     
    dhisky, Jan 16, 2010 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Given the CSS you showed it should be vertical - so I would assume your CSS is inheriting a property from somewhere else in the CSS. I'd have to see the full page to find it, though I can point you towards finding it for yourself.

    Fire up Opera or Firefox, if FF, install the firebug plugin and start up firebug on that page. If Opera, go to tools > advanced > developer tools to start up dragonfly.

    Should be a toolbar in fb/df that has what looks like a cursor over a box - select that and use the properties pane to figure out what CSS is being applied to the element.

    If that's too complex for you, I'd have to see the FULL markup and FULL CSS for the site to be certain where/what is being applied, preferably as a live page. See the post that was being bumped here for a while entitled "Why we can't help you"

    Posting little half-snippets instead of just linking to a live copy of the site was on that list.

    WAIT... is it making separate UL's for each and every item? If so, "well there's your problem"... and if so, whoever wrote that plugin is a **** idiot - but then that's par for the course when it comes to the HTML output by Turdpress. (I doubt that's what's happening, but again I'd have to see the actual output from a live copy to say for sure)

    You could try pulling the float off the UL. If it's outputting multiple UL's that will make them stop stacking - but at that point I would REALLY suggest changing what it outputs for markup.
     
    deathshadow, Jan 16, 2010 IP
  5. dhisky

    dhisky Peon

    Messages:
    207
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5


    Actually this plugin is a sidebar widget but it has a feature where you can use it also in a page. I have this on my mind that the css of the sidebar are somehow affecting it.

    Here's the ul and li css code of the sidebar.


    I also sent you via private message the whole css code and the url of my website.

    Thanks!
     
    dhisky, Jan 16, 2010 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Ok, looking at the URL you sent via PM, your problem is apparent and it's the 'worst case' I speculated about.

    Instead of it outputting one UL with a bunch of LI, you've got one UL being output for EACH LI.

    <p><!-- WordPress Plugin PostLists by Rene Ade - http://www.rene-ade.de/inhalte/wordpress-plugin-postlists.html --><ul class="ajaxul">
    <li><a href="/2010/01/css/">css</a></li></ul><ul class="ajaxul">
    <li><a href="/2010/01/raptors/">Raptors</a></li></ul><ul class="ajaxul">
    <li><a href="/2010/01/spurs/">Spurs</a></li></ul><ul class="ajaxul">
    <li><a href="/2010/01/lakers/">Lakers</a></li></ul><ul class="ajaxul">
    <li><a href="/2010/01/celtics/">Celtics</a></li></ul><ul class="ajaxul">
    <li><a href="/2010/01/knicks/">Knicks</a></li></ul></p>
    Code (markup):
    WORSE, the list seems to also be inside a paragraph tag for no good reason. I'm not certain how that plugin works, but you need to make it so that BEFORE the items it outputs just ONE UL (probably where that paragraph is opened - in fact, INSTEAD of that paragraph!) and then only have it loop/repeat the LI... So your output would be reduced to this:

    <ul class="ajaxul"><!-- WordPress Plugin PostLists by Rene Ade - http://www.rene-ade.de/inhalte/wordpress-plugin-postlists.html -->
    	<li><a href="/2010/01/css/">css</a></li>
    	<li><a href="/2010/01/raptors/">Raptors</a></li>
    	<li><a href="/2010/01/spurs/">Spurs</a></li>
    	<li><a href="/2010/01/lakers/">Lakers</a></li>
    	<li><a href="/2010/01/celtics/">Celtics</a></li>
    	<li><a href="/2010/01/knicks/">Knicks</a></li>
    </ul>
    Code (markup):
    ONE list of items, not six lists having one item apiece. Basically remove the UL from where you are currently entering it, and replace that pointless paragraph tag at the start and end with the UL instead.

    Though as I suggested, removing the float would also work... unless you want that float so content rides up next to it - and that's not a 'real' fix as the problem was not in the CSS, the problem was with the markup.
     
    deathshadow, Jan 16, 2010 IP