Grow your CSS skills. Land your dream job.

[Solved] Dynamic height

  • # July 28, 2010 at 4:48 am

    Hello

    I am trying to figure out how to get a dynamic height on my posts in a wordpress blog.

    Here is what I am trying to achieve:

    http://www.simontornby.dk/bisgaard_test.html

    In my test i have made specific id’s for the two posts, but is it possible to to make the height of the posted image define the height of the post?

    thanks
    Simon

    # July 28, 2010 at 6:56 am

    If you change the naming convention to something like:

    Code:
    <div class="post">
    <div class="postheadline"></div>
    <div class="post-image"></div>
    <div class="post-p"></div>
    </div>

    And add this within your <head> section:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".post").each(function(){
    $(this).height($(this).find("post-image img:first").height());
    });
    });
    </script>

    It should have "dynamic" height, based on the height of the first image.
    What the jquery javascript is doing is:
    For each instance of .post
    Make it’s height that of the first .post-image image

    You had class="post img". I’m not sure if you are aware, but those are 2 separate classes. – div.post and div.image.

    # July 28, 2010 at 7:54 am

    Hello again

    Thank you for your reply.

    I am not quite sure how to implement this into wordpress

    My loop looks like this:

    Code:
    <?php get_header (); ?>

    <!– Begin Content –>

    <?php if(have_posts()) : ?>
    <?php while (have_posts()) : the_post () ?>

    <div id="post">

    <div class="postheadline">
    <h2> <?php the_title () ; ?> </h2>
    </div>

    <div id="postcontent">
    <?php the_content(); ?>
    <?php the_tags(); ?>
    <?php edit_post_link(‘edit’); ?>
    </div>

    </div>

    <?php endwhile; ?>
    <p><?php previous_posts_link (‘Tidligere indl&aelig;g’);?><? next_posts_link (‘Nyere indl&aelig;g’);?> </p>
    <?php endif; ?>

    <!– End Content –>

    <?php get_footer (); ?>

    Is there a way to seperate my <img> and <p> in my content? Or should I wrap my "the_content" with something else?

    /Simon

    # July 28, 2010 at 8:32 am

    First, the first thing you need to do is change all of your "id"s to "class" (Within the loop)

    IDs are unique, and there should only be one instance of an ID on a page at any given time.

    I misunderstood before, you shouldn’t need javascript for this.
    Change this:

    Code:
    <?php the_content(); ?>
    <?php the_tags(); ?>
    <?php edit_post_link(‘edit’); ?>
    </div>

    to this:

    Code:
    <?php the_content(); ?>
    <?php the_tags(); ?>
    <?php edit_post_link(‘edit’); ?>
    <div class="clear"></div>
    </div>

    and add this to your css file

    Code:
    .clear{clear: both;}
    # July 28, 2010 at 9:13 am

    It works.

    Thank you very much.

    But it seems that I now have a couple of new problems on my hands.

    -My posts are now jumbled together, and I can’t seem to find a way to seperate them. Putting in a margin doesn’t help, neither does position: absolute.

    Here is what it looks like:
    http://www.simontornby.dk/bisgaard-posts.jpg

    -I also need to control the width of my <p> in the posts. I need to put it inside a wrapper or give it a width and padding…
    http://www.simontornby.dk/bisgaard-p.jpg

    Have you got any idea how to fix this?

    Here’s the css:

    Code:
    /*****General Styles*****/

    body { background-color: #FFFFFF; font-family: Georgia, courier, times, serif; font-size: 0.80em; color: #4D4D4D; }

    #wrap { position: absolute; width: 2000px; height: 100%; margin-top: 100px; }

    ::-moz-selection{ background: #00CC00; color: #000000; }

    ::selection { background: #00CC00; color: #000000; }

    a:link { color: #000000; }

    a:visited { color: #000000; }

    a:hover { color: #FFFFFF; background-color: #000000; }

    .clear { clear: both; }

    .left { float: left; }

    .right { float: right; }

    alignright { float: right; padding: 15px }

    alignleft { float: left; padding: 15px; }

    /*****Header Styles*****/

    #header { float: right; position: relative; margin-right: 10px; }

    #login a { width: 20px; height: 20px; background: url(http://cdn.css-tricks.com/images/login.png) top left no-repeat; text-indent: -9999px; margin: 0 0px 0px 0; float: left; }

    h1#logo a { width: 300px; height: 130px; background: url(http://www.simontornby.dk/bisgaard.png) top left no-repeat; text-indent: -9999px; margin: 0 0px 0px 0; float: left; }

    /*****Menubar*****/

    #menubar { float: right; position: absolute; margin-top: 150px; margin-left: 55px; }
    ul.sf-menu { width: 760px; margin: 0px 0 0 0px;}

    ul.sf-menu li,
    ul.extra-nav li { display: inline;}

    ul.sf-menu li a,
    ul.extra-nav li a { text-transform: none; color: #000000; font-size: 15px; padding: 0px 8px; background: #FFFFFF;}

    ul.sf-menu li a:hover,
    ul.extra-nav li a:hover { background: white; color: #FFFFFF; background: #000000;}

    /*****Post Styles*****/

    .post { border-top: 1px solid #000000; border-bottom: 1px solid #000000; margin-bottom: 50px; margin-top: 25px;}

    .postheadline { float: left; margin-left: 3px; margin-top: -20px;}

    Thank you

    /Simon

    # July 28, 2010 at 9:20 am

    Sorry, a bit too fast there.

    I forgot to dele a div tag in my loop, so I got the jumbling together solved. :oops:

    I can’t seem to figure out how to control the <p> text in the post, and I would love any suggestions…

    Thanks
    /Simon

    # July 28, 2010 at 9:34 am

    What is it doing that you would like different?

    # July 28, 2010 at 9:48 am

    well now it looks like this:
    http://www.simontornby.dk/bisgaard-text1.jpg

    Here, the paragraph spans between the image and the end of my #wrap.

    And I would really like if I could make it do this:
    http://www.simontornby.dk/bisgaard-text2.jpg

    But everytime i touch the .p or .post p it affects the image aswell…

    Thank you
    Simon

    # July 28, 2010 at 12:44 pm

    Why don’t you use the "Featured Image" option?
    Are you using WordPress 3? http://www.blog.web6.org/wordpress-3-0-set-featured-image/

    # July 28, 2010 at 1:33 pm

    yes, I am using wp 3.0.

    I am not sure though how setting featured image would help me control the paragraph. Also, I would like to be able to post images in different sizes.

    The post, with border goes from edge to edge on my wrapper, which has a fixed size (e.g. 2500 px)

    I would like to control the paragraph inside the post.

    Is there somewhere I can declare a .p post class?

    /Simon

    # July 28, 2010 at 1:43 pm

    What you want to do is not control the paragraph, it is control the image.
    At the moment, you have

    Code:
    <p>
    <img src="etc" alt="" />
    lorem ipsum dolor sit amet etc.etc.
    </p>

    If you give the "p" a border or padding style, it will affect the text too. Using the featured image tool would help because you could easily style whatever image is the featured image. Using the featured image option wouldn’t mean that you restrict the image to a certain size.

    # July 28, 2010 at 4:42 pm

    ok, so if I use featured image, I would release the image from the <p>?

    I am still quite unsure of what you mean.

    sorry

    /Simon

    # July 28, 2010 at 4:57 pm

    It worked!!!

    Thank you for saving my day (again :) )

    /simon

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

You must be logged in to reply to this topic.

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