Text Over Image CSS WordPress

• SOLVED

You need to be using a CSS3 compatible browser to view this correctly.

I want my text title (#single_wrap .index_title) to wrap correctly with the width of my image (#single_wrap img.index), right now the line breaks before it should as is apparent with the posts title "Right Aligned Image" and "Centered and Captioned Image, Longer Title".

[[LINK href="http://themeforward.com/demo2/"]]http://themeforward.com/demo2/[[/LINK]]

.excerpt_wrap { background:#191919; border:1px solid #101010; display:block; clear:both; margin:0; padding:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0px 0px 12px #161616; -moz-box-shadow:inset 0px 0px 12px #161616; box-shadow:inset 0px 0px 12px #161616; width:650px; height:450px }
.excerpt_line { border-top:#FFF 0px solid }
.index { margin:0 0 15px 0 }
.index p { font-size:13px!important }
#single_wrap p .index { display:block; line-height:30px }
#single_wrap img.index { position:absolute; width:650px!important; height:450px; display:inline!important; margin:0px auto 15px auto; z-index:50!important; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px }
#single_wrap img.index:active { }
#single_wrap .index_title, #single_wrap .index_title a { position:absolute; color:#666!important; background:#000; z-index:100; font-size:38px }
#single_wrap .index_title a:hover { color:#DA9901!important; text-decoration:none }


<?php get_header(); ?>

<div id="container">
<div id="home_content">

<!-- Grab posts -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<!-- Begin excerpt wrap -->
<div class="excerpt_wrap">
<div class="excerpt_line">

<!-- Excerpt and excerpt image-->
<div class="index">
<a href="<?php the_permalink() ?>">

<!-- Excerpt: post title -->
<span class="index_title"><?php the_title(); ?></span>

<!-- Excerpt: image -->
<?php $image = catch_that_image();
if( $image ) { ?>
<img src="<?php echo get_template_directory_uri(); ?>/scripts/timthumb.php?src=<?php echo $image; ?>&amp;h=450&amp;w=650" class="index" alt="<?php the_title(); ?>" title="<?php the_title(); ?>, <?php comments_number('No comments','One comment','% comments'); ?>" />
<?php } ?>
</a>


<!-- Excerpt: words -->
<?php the_excerpt(); ?>

<!-- Excerpt: Count -->
<div class="count">
<a href="<?php the_permalink() ?>" title="<?php comments_number('0','1','%'); ?> comments">+</a>
</div>

<!-- Excerpt: post time and author -->
<div class="sub-title">
<?php the_time("F j, Y"); ?> &nbsp;/&nbsp; <?php the_author_posts_link(); ?> &nbsp;/&nbsp; <?php the_category(', ') ?>
</div>

</div>


<!-- End excerpt wrap -->
</div>
</div>

<?php endwhile; ?>

<?php endif; ?>

</div>
<!-- Next/Previous Posts -->
<div class="paginationanimated">
<?php if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);
} ?>
</div>
</div>
</div>
<?php get_footer(); ?>

Answers (1)

2011-03-19

Sébastien | French WordpressDesigner answers:

replace

#single_wrap .index_title, #single_wrap .index_title a {
background: none repeat scroll 0 0 #000000;
color: #666666 !important;
font-size: 38px;
position: absolute;
z-index: 100;
}

with
#single_wrap .index_title, #single_wrap .index_title a {
background: none repeat scroll 0 0 #000000;
color: #666666 !important;
display: block;
font-size: 38px;
position: relative;
z-index: 100;
}

---

Lucas Wynne comments:

This is close, but not quite. Take a look at the page now : [[LINK href="http://themeforward.com/demo2/tag/wp-theme-demo/"]]http://themeforward.com/demo2/tag/wp-theme-demo/[[/LINK]]

I changed display to inline so the background fits the text, BUT I need the text/title to highlight even when I put my mouse on the picture... not only when I hover over the title.

---

Sébastien | French WordpressDesigner comments:

that's another question :-)

---

Lucas Wynne comments:

To preserve the same functionality is a given.

---

Sébastien | French WordpressDesigner comments:

replace
#single_wrap .index_title a:hover { color:#DA9901!important; text-decoration:none }
by
#single_wrap .index_title:hover { color:#DA9901!important; text-decoration:none }

---

Sébastien | French WordpressDesigner comments:

sorry, don't use this code

but add this code to your css
#single_wrap .index a:hover span{color:#DA9901!important; text-decoration:none }