Grow your CSS skills. Land your dream job.

converting ul based layout to div based

  • # August 10, 2010 at 3:13 pm

    hello all,

    I’m trying to convert the ul based layout here:
    http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css/

    to a div based layout for my WP site.

    here’s the html i have to work with:

    Code:


    header stuff here
    excerpt here
    tags and shortlink here

    and the css, i have so far:

    Code:
    .post-container { width: 300px; float: left; margin: 10px; }

    article.post { width: 300px; float: left; margin: 10px; position: relative; }

    article.post:hover { z-index: 99; }

    .wp-post-image { border: 1px solid #333; position: relative; filter: alpha(opacity=30); opacity: 0.3; -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=30)”; /*–IE8 Specific–*/ }

    .wp-post-image:hover { z-index: 999; filter: alpha(opacity=100); opacity: 1; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”; }

    section.info { position: absolute; left: -10px; top: -10px; padding: 310px 10px 10px; width: 320px; display: none; background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

    section.info:hover { display: block; }

    i think i almost have it. but, for some reason, it’s not working. i can post an example, it that’ll make it clearer.

    thanks for the help.

    cheers,

    D.

    # August 10, 2010 at 6:52 pm

    Why would you want to change something that a great designer like Soh Tanaka has made and probably refined?

    # August 10, 2010 at 7:18 pm

    sorting my wordpress posts that way, won’t work very well for me. but the way i have my posts showing, on my front page, would work very well with a similar layout.

    on a side note, i just saw that there’s an ‘add foe’ button on here. nice.

    cheers,

    D

    # August 10, 2010 at 7:45 pm

    Oh so I guess I have made an enemy! :)

    # August 10, 2010 at 8:01 pm

    nah. i try not to collect too many enemies. :twisted:

    but, let’s see if i have this right.

    ul.columns = #post-container
    ul.columns li = .post
    ul.columns li:hover = .post:hover

    ul.columns li img = .post.wp-post-image
    ul.columns li:hover img = .post.wp-post-image:hover

    ul.columns li .info = .post.info
    ul.columns li:hover .info = ? ( i think this is where my problem is )

    Anyone with any ideas?

    # August 10, 2010 at 10:08 pm

    The logical sequence to your question would be .post .info:hover but looking at your earlier code it could be post-container .post .info:hover. But I’m no great shakes with WordPress.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".