The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS converting ul based layout to div based

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #29881

    hello all,

    I’m trying to convert the ul based layout here:

    to a div based layout for my WP site.

    here’s the html i have to work with:

    header stuff here
    excerpt here
    tags and shortlink here

    and the css, i have so far:

    .post-container { width: 300px; float: left; margin: 10px; } { width: 300px; float: left; margin: 10px; position: relative; } { 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)”; } { 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; } { 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.




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


    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.




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


    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 =
    ul.columns li:hover .info = ? ( i think this is where my problem is )

    Anyone with any ideas?


    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)
  • The forum ‘CSS’ is closed to new topics and replies.