WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Name of div affects css (7 posts)

  1. Walton
    Member
    Posted 3 years ago #

    I am playing with a new layout in twenty ten where I have a featured post at top (http://www.englishadvantage.info/testblog/)

    I have one div id called featured_post, then to make the image float left and the excerpt float right, I have two other divs featured_post_image and featured_post_details. At the moment, my css for the featured post div is not applying to my featured post (border bottom, border left, grey background). In fact it seems to think that the featured post div is between the post and the menu. However if I change the name of featured_post_details to something else (feat_post_ex for example) then I get my featured post formatting BUT the excerpt part doesn't float right.

    Why would the name affect the formatting of a div and how can I get the image to float left and the text to wrap AND be able to apply formatting to both together?

    Code for this loop included below in case I made a syntax error.

    <?php
    $featured= array('post_type' => 'lesson',
    'tags' => 'featured',
    'posts_per_page'=>1,);
    query_posts($featured);
    if ( have_posts() ) :
    while (have_posts()) : the_post();
    ?>
    <div id="featured_post">
    <div id="featured_post_image">
    <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
    </div>
    <div id="featured_post_details">
    <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <div class="entry-meta">
    <?php echo get_the_term_list( $post->ID, 'level', 'Level: ', ', ', '<br>' );
    echo get_the_term_list( $post->ID, 'skill', 'Skill: ', ', ', '<br>' );
    echo get_the_term_list( $post->ID, 'area', 'Area: ', ', ', '<br>' );
    echo get_the_term_list( $post->ID, 'theme', 'Theme: ', ', ', '<br>' );?>
    </div>
    <?php the_excerpt(); ?>
    </div>
    <?php endwhile; else: ?>
    <p>Sorry, no lesson plans here.</p>
    <?php endif; wp_reset_query(); ?>
    </div>
  2. Digital Raindrops
    Member
    Posted 3 years ago #

    WordPress 'Twenty Ten' already has a set of styles for this, just use one of these.

    <div class="alignleft">
        <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
    </div>
    
    <div class="alignright">
        <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
    </div>
    
    <div class="aligncenter">
        <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
    </div>

    You will find the image styles in the style.css Line #759 to Line #844

    B.T.W. if you want to keep youe original class/id then copy the style from the style.css and add your class/id name.

    HTH

    David

  3. Walton
    Member
    Posted 3 years ago #

    I did that. The image aligns left but the text doesn't wrap around it.
    If I try to add any kind <div> around the post details it just goes haywire as if it's one div too many.
    I'm happy with the image aligning left but how do I get the text to wrap? I tried playing with the css but it's not helping.

  4. Walton
    Member
    Posted 3 years ago #

    Or put another way, is there some reason why I can't put a div around:

    <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <div class="entry-meta">
    <?php echo get_the_term_list( $post->ID, 'level', 'Level: ', ', ', '<br>' );
    echo get_the_term_list( $post->ID, 'skill', 'Skill: ', ', ', '<br>' );
    echo get_the_term_list( $post->ID, 'area', 'Area: ', ', ', '<br>' );
    echo get_the_term_list( $post->ID, 'theme', 'Theme: ', ', ', '<br>' );?>
    </div>
    <?php the_excerpt(); ?>

    Whenever I try, it screws up the whole element order of that first featured post area.

  5. Digital Raindrops
    Member
    Posted 3 years ago #

    I am on a client site so do not have samples handy.

    I wrap the excerpt() right of the image in this tutorial, this is just done with inline styles.

    It might help you resolve your issue.

    Looking at your code nothing jumps out except that you have the image before the post title, it could be that.

    You have
    image
    Title
    -Excerpt

    You likely need
    Title
    -Image-Excerpt

    Regards

    David

  6. Digital Raindrops
    Member
    Posted 3 years ago #

    <?php
       $featured= array('post_type' => 'lesson','tags' => 'featured','posts_per_page'=>1,);
       query_posts($featured);
       if ( have_posts() ) :
       while (have_posts()) : the_post();
    ?>
       <div id="featured_post">
          <div id="featured_post_details">
            <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
            <div class="entry-meta">
               <?php
                     echo get_the_term_list( $post->ID, 'level', 'Level: ', ', ', '<br>' );
                     echo get_the_term_list( $post->ID, 'skill', 'Skill: ', ', ', '<br>' );
                     echo get_the_term_list( $post->ID, 'area', 'Area: ', ', ', '<br>' );
                     echo get_the_term_list( $post->ID, 'theme', 'Theme: ', ', ', '<br>' );
               ?>
            </div>
            <div id="featured_post_image">
               <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
            </div>
            <?php the_excerpt(); ?>
       </div>
    <?php endwhile; else: ?>
       <p>Sorry, no lesson plans here.</p>
    <?php endif; wp_reset_query(); ?>
    </div>
  7. Walton
    Member
    Posted 3 years ago #

    That solved the problem, thanks. I should have figured out that the placement of the image was the issue.

    I wouldn't mind being able to put the post details in a different div, in case I choose to play around but at least the image wraps now.

Topic Closed

This topic has been closed to new replies.

About this Topic