Hello everybody,
I'm struggling with the following question for a while. I appreciate it very
much if someone want to help me.
I have the following code for displaying three posts and a custom field
(WordPress):
<div class="staticcustomfield">
<?php the_meta(); ?>
</div>
<?php query_posts( $query_string . '&posts_per_page=3' );
$c = 0;
if (have_posts()) : while (have_posts()) : the_post();
$c++;
$class = ' post-num-' . $c;?>
<div <?php post_class( $class );?> id="post-<?php the_ID();?>">
<ul>
<li><h2 class="titel"><a href="<?php the_permalink(); ?>"><?php the_title();
?></a><h2></li>
<li><?php the_time(get_option('date_format'));?></…
<li><?php the_excerpt();?></li>
</ul>
</div>
<?php endwhile;?>
<?php endif;?>
I get, with these code in a page template, this (only added "background:
white;" in the css file for all the elements):
http://cl.ly/image/1b0b412W012J
How can I chance this to te following design:
http://cl.ly/image/0Z3I20183A0H
I am stuck here. The problem isn't for the rounded edges, font, colors or other
details, I can't get the position right. Can someone help me? The elements are:
.staticcustomfield
.post-num-1
.post-num-2
.post-num-3
I've tried the following:
.staticcustomfield {
background: white;
float: right;
width: 27%;
}
.post-num-1 {
background: white;
float: left;
width: 65%
}
.post-num-2 {
background: white;
float: left;
width: 35%
}
.post-num-3 {
background: white;
float: right;
width: 35%
}
But if I use these codes, the 'main' div for all the content on the page loose
the height and the footer will come between the elements, and the positioning
is also wrong (http://cl.ly/image/0l2r3c07412l <-- footer is has the dark-blue
color as background).
Can someone please explain what I am doing wrong and what the solution is for
this problem? Thanks! I've created a quick site where you can see the problem:
http://www.marijnbent.nl/fakelocalwordpressinstallation/.
Regards,
Marijn Bent
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
