Hi there I'm having a few troubles achieving what I would like to achieve with CSS on the home page of www.helloelbow.com . In a nutshell, I would like the little black speech bubble (the one that sees "Tshirts.....*?%! yeah") to appear to the LEFT of the image which says "Free*", while also being top aligned with this image. Obviously, I also need this to take effect in Firefox, IE, and hopefully Google Chrome if possible. I've tried making the speech bubble float:left, and the "Free" image float:right, but have not had any luck...though I will admit I am hopeless at CSS so might be missing something completely obvious. Is anyone able to have a quick look at my code and tell me where I might be going wrong, pretty pleeeease?
try to put all the image in a div and make the position of the div to be relative. Then apply position absolute to the Tshirt..yeah image along with left:0px and top:0px good luck
Before going a step further, correct your errors. Debugging good code is hard enough. You must move your style elements to the head section, where they belong. cheers, gary
Hmmm, ok. Problem is, I'm not sure how to extract the style elements and place them in the CSS. I am using Javascript rollovers, and when I remove the style elements from this code and put it into the CSS, all of the Javascript rollovers seem to stop working. I would like to use CSS for my rollovers instead of Javascript, but can't work out how here is the original code for the page in question, with the style included. Underneath this, I have placed the CSS for the site... if you have any guidance whatsoever it would be hugely appreciated! <?php /* Template Name: Home */ ?> <?php get_header(); query_posts(array('showposts' => 1)); ?> <style> img.nohover {border:0; float: left;} img.hover {border:0;display:none; float: left;} A:hover img.hover {display:inline; float: left;} A:hover img.nohover {display:none; float: left;} </style> <A HREF="http://www.helloelbow.com/about"> <img src="http://www.helloelbow.com/wp-content/images/about-hello-elbow.gif" width=115 class="nohover"> <img src="http://www.helloelbow.com/wp-content/images/about-hello-elbow.gif" width=117 class="hover"> </A> <div class="storycontent"></p> <style> img.nohover {border:0; float: right;} img.hover {border:0;display:none; float: right;} A:hover img.hover {display:inline; float: right;} A:hover img.nohover {display:none; float: right;} </style> <A HREF="http://www.helloelbow.com/free-tshirts"> <img src="http://www.helloelbow.com/wp-content/images/free-tshirts-initial.gif" class="nohover"> <img src="http://www.helloelbow.com/wp-content/images/free-tshirts-initial_o.gif" class="hover"> </A> <style> img.nohover {border:0} img.hover {border:0;display:none} A:hover img.hover {display:inline} A:hover img.nohover {display:none} </style> <A HREF="http://www.helloelbow.com/latest-tshirts"> <img src="http://www.helloelbow.com/wp-content/images/latest-tshirts.gif" class="nohover"> <img src="http://www.helloelbow.com/wp-content/images/latest-tshirts-rollover.gif" class="hover"> </A> <style> img.nohover {border:0} img.hover {border:0;display:none} A:hover img.hover {display:inline} A:hover img.nohover {display:none} </style> <A HREF="http://www.helloelbow.com/tshirt-news"> <img src="http://www.helloelbow.com/wp-content/images/tshirt-news.gif" class="nohover"> <img src="http://www.helloelbow.com/wp-content/images/tshirt-news-rollover.gif" class="hover"> </A> <style> img.nohover {border:0} img.hover {border:0;display:none} A:hover img.hover {display:inline} A:hover img.nohover {display:none} </style> <A HREF="http://www.helloelbow.com/tshirt-discounts"> <img src="http://www.helloelbow.com/wp-content/images/tshirt-discounts.gif" class="nohover"> <img src="http://www.helloelbow.com/wp-content/images/tshirt-discounts-rollover.gif" class="hover"> </A> </div> <p> </p> <img src="http://www.helloelbow.com/wp-content/images/horizontal-line.gif"> <table border="0" bordercolor="#FFFFFF" style="background-color:#FFFFFF" width="100%" cellpadding="" cellspacing=""> <tr valign="top"> <td align="left"><img src="http://www.helloelbow.com/wp-content/images/most-recent.gif"></td> <td align="right"><style> img.nohover {border:0; float: right;} img.hover {border:0;display:none; float: right;} A:hover img.hover {display:inline; float: right;} A:hover img.nohover {display:none; float: right;} </style> <A HREF="http://www.helloelbow.com/most-recent"> <img src="http://www.helloelbow.com/wp-content/images/more-recent.gif" class="nohover"> <img src="http://www.helloelbow.com/wp-content/images/more-recent-rollover.gif" class="hover"> </A></td> </tr> </table> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <div class="storytitle"> <div class="title" id="flash-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a> </div> <script type="text/javascript"> // <![CDATA[ var so = new SWFObject("<?php bloginfo('template_directory'); ?>/title.swf", "flash-<?php the_ID(); ?>", "240", "240", "8", "#ffffff"); so.addVariable("titletext", "<?php the_title(); ?>"); so.addVariable("permalink", "<?php the_permalink() ?>"); so.write("flash-<?php the_ID(); ?>"); // ]]> </script> </div> <div class="storycontent"></p> <div class="imgauthorthumb" ><?php userphoto_the_author_thumbnail(); ?></div><em><strong> <?php the_author_posts_link(); ?></strong> says:</em> <?php the_content(__('(more...)')); ?> </div> <div class="meta"> <p> <?php _e("Filed under:"); ?> <?php the_category(',') ?> | <?php the_author() ?> | <?php the_date() ?> <?php edit_post_link(__('Edit This')); ?> <?php wp_link_pages(); ?> <div class="comments"><?php comments_popup_link('<span>0</span>', '<span>1</span>', '<span>%</span>'); ?></div> <!-- COMMENTS --> <?php the_tags('<div class="tags">', ', ', '</div> <!-- TAGS -->'); ?> </p> </div> </div> <div id="commentcontainer"> <?php comments_template(); // Get wp-comments.php template ?> </div> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> <div id="postnav"> <?php posts_nav_link(' — ', __('« Newer Posts'), __('Older Posts »')); ?> </div> <?php get_footer(); ?> Code (markup): CSS /* Theme Name: Paper Trail Theme URI: http://roytanck.com Description: 2-column theme sporting Flash titles and support for tags and widgets Version: 1.0 Author: Roy Tanck */ * { margin: 0; padding: 0; } p { margin-bottom: 1.25em; line-height: 150%; } body { font-family: Arial, sans-serif; font-size: 12px; color: #000; text-align: center; background: #fff url(pics/back.gif) repeat-y top center; padding: 0; } a { color: #FF0000; } a:hover { color: #c00; } a:visited { color: #FF0000; } a:active { color: #300; } #rap { width: 960px; text-align: left; margin: 0 auto; } #content { width: 720px; float: left; padding-top: 50px; background-color: #fff; } .post { clear: both; margin-bottom: 60px; line-height: 150%; } .storycontent { padding: 6px 0 10px 0; margin: 0px 40px 0 120px; } .storycontent img { border: 0px solid #000; max-width: 600px; } .imgauthorthumb{ float:left; padding-right: 10px } .storycontent img.wp-smiley { border: none; margin: 0; } .storytitle { width: 240px; height: 240px; float: left; } .meta { clear: both; margin: 0 20px 0 120px; font-size: 10px; color: #999; border-bottom: 0px solid #999; } #menu { margin-left: 720px; } #menu ul { list-style-type:none; line-height: 150%; } #menu ul li { margin: 0 0 20px 50px; font-weight: bold; } #menu ul ul li, #menu ul div, #menu ul form { margin: 0 0 0 0px; font-weight: normal; } #menu ul ul li { margin-left: 10px; } #menu ul li select{ display: block; } #menu .widget_recent_comments li { margin: 4px 0; } #menu input, #menu select { margin-bottom: 2px; } #postnav { clear: both; text-align: right; margin: 0 20px 20px 120px; } #credit { clear: both; text-align: right; margin: 0 260px 20px 20px; color: #999; font-size: 10px; } #credit a, #credit a:visited { color: #999; } .comments a { background:transparent url(img/comments.jpg) no-repeat scroll center top; color:#EE6705; display:block; height:48px; width:128px; } .comments a span { float:right; font-size:18px; font-weight:bold; margin:3px 6px 0 0; text-align:center; width:40px; } #commentcontainer { padding: 10px 0; margin: 0 20px 0 120px; } #commentlist { list-style-type: none; } #commentlist li { margin-bottom: 10px; border: 1px solid #999; padding: 15px 20px 0 20px; overflow: auto; } #commentlist cite { font-size: 10px; color: #999; } h2 { font-size: 15px; margin-bottom: 10px } #commentform input { width: 200px; } #commentform textarea { width: 576px; } .storycontent ul, .storycontent ol { padding-left: 20px; margin-bottom: 20px; } blockquote, code { clear: both; display: block; padding: 6px 10px; border-bottom: 6px solid #e0dfcc; background-color: #FFEBEB; margin-bottom: 10px; } .storycontent table { clear: both; border-collapse:collapse; margin-bottom: 10px; } .storycontent th { background-color: #900; border-bottom: 1px solid #ccc; padding: 2px 5px; color: #fff; } .storycontent td { border-bottom: 1px solid #ccc; padding: 2px 5px; } /* calendar styles */ #wp-calendar { border: 1px solid #999; empty-cells: show; margin: 0; width: 100%; } #wp-calendar #next a { padding-right: 10px; text-align: right; } #wp-calendar #prev a { padding-left: 10px; text-align: left; } #wp-calendar a { display: block; text-decoration: none; } #wp-calendar a:hover { background: #000; color: #fff; } #wp-calendar caption { font-weight: bold; text-align: left; } #wp-calendar td { padding: 2px 0; text-align: center; } #wp-calendar td.pad:hover { background: #000; color: #fff; } #wp-calendar td:hover, #wp-calendar #today { background: #000; color: #fff; } #wp-calendar th { font-style: normal; } .tags { background:transparent url(img/tags.jpg) no-repeat scroll left top; float:left; height:23px; margin-left:0px; margin-top:5px; padding-left:50px; padding-top:3px; width:255px; } .tags a:hover { color:#015F6B; } .tags a { color:#7D9198; font-weight:bold; text-transform:lowercase; } li.blockcrew { float: left; height: 180px; width: 82px; list-style: none; font-size: 10px; } li.blockcrew a:link, li.blockcrew a:active, li.blockcrew a:visited { text-decoration: none; } li.blockcrew a:hover { text-decoration: none; } ul.blocklist { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #clearblock; { clear: both; } Code (markup):
Try to replace the top part of your code with: <style> img.nohover {border:0; float: left;} img.hover {border:0;display:none; float: left;} A:hover img.hover {display:inline; float: left;} A:hover img.nohover {display:none; float: left;} .bubble-left { float:left; width: 117px; } <!-- added line --> .storycontent { margin:12px 0 0 0;} <!-- added line --> </style> <A HREF="http://www.helloelbow.com/about" class="bubble-left"> <!-- added class --> <img src="http://www.helloelbow.com/wp-content/images/about-hello-elbow.gif" width=115 class="nohover"> <img src="http://www.helloelbow.com/wp-content/images/about-hello-elbow.gif" width=117 class="hover"> </A> <div class="storycontent"></p> Code (markup): if this does not work, try making storycontent float left and set width to ~600px, like .storycontent { float:left; width: 600px; } Hope this helps.
this is a wordpress customisation issue, post question in blogging or buy,sell trade I am sure you will get someone to fix this cheaply...
Hey Dickieknee...thanks for your message, I didn't realise that I could actually request for small pieces of work to be done in the Buy, Sell, Trade section, thanks very much!