[Solved] Dynamic height - CSS-Tricks

This topic is empty.

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

Author

Posts
July 28, 2010 at 4:48 am #29773

revok
Participant

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 #80539

jamygolden
Member

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 #80541

revok
Participant

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æg’);?><? next_posts_link (‘Nyere indlæ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 #80542

jamygolden
Member

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 #80543

revok
Participant

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(/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 #80544

revok
Participant

Sorry, a bit too fast there.

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

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 #80545

jamygolden
Member

What is it doing that you would like different?

July 28, 2010 at 9:48 am #80546

revok
Participant

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 #80586

jamygolden
Member

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 #80597

revok
Participant

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 #80599

jamygolden
Member

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 #80610

revok
Participant

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 #80611

revok
Participant

It worked!!!

Thank you for saving my day (again )

/simon
Author

Posts

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

The forum ‘CSS’ is closed to new topics and replies.