I have the following:
.home-thumbs h2 {
background: url("images/top-left-label.png") no-repeat scroll left top #CBCBCB;
font-size: 12px;
margin-left: -8px;
margin-top: -66px;
max-width: 268px;
padding-left: 12px;
position: absolute;
I only want to get that small png with a cut corner outside my div, but can't manage to do it. How should I do it, what am I missing here?!
The div is meant to be a "label" for a title over an image. I am having the same problem with a tooltip from a testimonial, I can't use the bottom part with the arrows and normal borders as, again, my img won't show outside the containing div.
Thanks.
P.S. HTML & PHP ..
<div id="home" class="home-thumbs">
<?php query_posts('cat=19&posts_per_page=1');
if(have_posts()) : while(have_posts()) : the_post(); ?>
<p class="cat-title"><?php echo single_cat_title();?></p> <?php the_post_thumbnail('medium'); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<?php $cat_id = 19; $cat_link = get_category_link( $cat_id ); ?>
<?php the_excerpt(); ?>
More in this section
</div>
<?php endwhile; endif; wp_reset_query(); ?>
</div>
You have it positioned absolutely, so use top and left as you're supposed to
.home-thumbs h2 {
background: url("images/top-left-label.png") no-repeat scroll left top #CBCBCB;
font-size: 12px;
max-width: 268px;
padding-left: 12px;
position: absolute;
top: -66px;
left: -8px;
}
Try overflow:visible on the containing <div>.
Related
Hello dear developers,
Iam having a problem by coding my Post grid. I want to blur the background image on hovering. But my text (in the same div is also blurring). Do you have a solution for this? Or isnt there an other way, without using this picture in a new div in the container. Want to keep it as background-image
The posts php:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>);" onclick="self.location.href='<?php echo get_permalink( $leavename = false ); ?>'">
<div class="post_info">
<span class="post_cat"><?php the_category(' ') ?></span>
<h2 class="post_title"><?php the_title(); ?></h2>
<span class="post_date"><?php the_time('d.m.Y') ?></span>
</div>
<!-- .article --></div>
The css:
.article:hover {
-webkit-filter: blur(2px);
}
.article {
margin-top: 15px;
position: relative;
height: 229px;
margin-left: 15px;
margin-right: 15px;
float: left;
width: 25%;
cursor: pointer;
}
Thank you for helping me out, ExotiQ
You can't blur a background image, but you can blur any elements or pseudo-elements
I would go on and give a solution to your problem, but this one sums it up pretty good.
Check out this awnser
Hope that helps you out!
On the footer of my posts I have a bottom border that also displays my comment count and social share buttons. I want the comment count to display left (and aligned with the front of the border) and I want the social button to display on the right. The social buttons are aligned with the end of the line, but for some reason the comment count is slightly indented on the left? Does anyone know why this is? Thanks in advance. I have attached a picture of what it looks like below.
I found this issue - thanks for the help
my single.php
<?php
get_header();
the_post_thumbnail('banner-image');
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<?php wpb_set_post_views(get_the_ID()); ?>
<div class="post-info">
<h1 class="post-title"><?php the_title(); ?></h1>
<h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>
</div>
<div class="post-content"><?php the_content(); ?></div>
<div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
<div class="post-footer-bloglovin"><h1>never miss a post</h1><h2>subscribe to email</h2></div>
<?php get_template_part( 'prevandnextpost' ); ?>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
?>
the css
.post-footer {
border-bottom: 1px solid #000000;
margin:40px 100px 0 100px;
max-width:1865px;
display: block;
overflow: hidden;
}
.post-footer-comment {
text-transform: uppercase;
font-size: 13px;
letter-spacing: .2em;
font-family: 'Lato', sans-serif;
display: inline-block;
float: left;
}
.post-footer-comment a:hover {
color:#555555;
}
.share-buttons-post {
letter-spacing: 10px;
display: inline-block;
}
.share {
text-transform: uppercase;
font-size: 13px;
letter-spacing: .2em;
font-family: 'Lato', sans-serif;
display: inline-block;
float: right;
margin-top:7px;
}
.share span {
display: inline-block;
position: relative;
top:3px;
}
It appears that your comment count is inside of an h1 tag which inherently has margin, padding, etc. applied to it. You'll need to modify the class for that h1:
.post-footer-comment {
margin-left: 0;
padding-left: 0;
text-transform: uppercase;
font-size: 13px;
letter-spacing: .2em;
font-family: 'Lato', sans-serif;
display: inline-block;
float: left;
}
Semantically speaking, that's not a great use for an h1 tag. Since your footer content isn't inside of a section tag or anything that resets the context of headers, you're essentially stating that the footer text "X Comments" and later "never miss a post" are equally as important as your "post title" h1. You'd be better off to wrap that entire footer section inside of a footer tag if you want to reset the context of those h1's.
When your content is indexed by a search engine, or when it's read by a screen reader or other assistive device, the context is going to be odd. In the interest of building solid, semantic HTML structure, I would revisit those elements.
That said, to solve your problem, you can just remove the margin and padding on the target elements.
I'm not sure because i can't run your code easily.
I think you should look at:
<h1 class="post-footer-comment">
it's css i think is the issue:
display: inline-block;
float: left;
This will force the footer comments title onto the next line.
Try to remove the float: left and see what it does.
Can you take a screenshot and attach for a better picture of whats going on?
Dear Stackoverflow community,
I just can't figure out how to center the footer links on my magento website. The footer links are within a div and the correspondig CSS is, as I believe, as follows:
I have tried everything, from margin:auto to margin-right and margin-left auto.
Then I thought, maybe the right footer, there used to be a newsletter box there, is forcing to take up space, so I slashed it out, but still no effect. Anyone any idea what could be the solution? Thank you so much!
.footer-container { width:100%; text-align: left;}
.footer { margin: 0 auto 0;width: 940px; padding: 0 20px 30px; background: #fff; }
.aditional-footer { margin:0 auto 0; padding: 30px 20px 35px; width: 940px; background: #FFF;}
.footer .links li { text-transform: none;}
.footer-container a { color:#666669; font-size: 9px; }
/*.footer-container .footer-right { width: 250px; }*/
.footer .f-left { width:520px; text-align: left; margin: 0 auto;}
/*.footer .f-right { width:420px; text-align: right; }*/
This is the HTML
<html>
<div class="footer-container">
<div class="aditional-footer">
<?php echo $this->getChildHtml('bottomContainer') ?>
<div class="f-right">
<div class="footer-right">
<div class="right-conteiner">
<?php echo $this->getChildHtml('newsletter') ?>
<div class="clear"></div>
</div>
<div class="right-conteiner">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footer_time')->toHtml(); ?>
<?php if(themeOptions('topbtn')): ?>
<div id="back-to-top"><?php echo $this->__('Back to top') ?></div>
<?php endif; ?>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div class="f-left footer-left">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footer_shipping')->toHtml(); ?>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="footer">
<?php echo $this->getChildHtml('bottomContainer') ?>
<div class="f-left">
<?php echo $this->getChildHtml('footer_links') ?><br />
<?php echo $this->getCopyright() ?>
<?php echo $this->getChildHtml('cms_footer_links') ?>
</div>
<div class="f-right">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('verify')->toHtml(); ?>
</div>
</div>
</html>
Change the following code
.footer-container { width:100%; text-align: left;}
to
.footer-container { width:100%; text-align: center;}
Let me know if you have any query
I'm working in the custom-header.php file of my wordpress site and I'm trying to overlay a div containing a shortcode that produces a radio player (somewhat similar to this) on top of a div that contains an image. For some reason, despite using absolute and relative positioning and z-index, I can't seem to get it to lie on top of the image- it's consistently behind it. This is my code in custom-header.php:
<div id="headimg">
<div id="logo-image">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php bloginfo( 'name' ); ?>" />
<div id="logo-player">
<?php echo do_shortcode('[radioforge id=1]') ?>
</div>
</div><!-- end of #logo -->
</div>
and my CSS:
#headimg #logo-image {
width: 100%;
overflow: hidden;
position: relative;
}
#headimg #logo-image img {
max-width: 100%;
height: auto;
border: none;
}
#headimg #logo-player {
position: absolute;
top: 50;
left: 50;
z-index: 10;
}
Not really sure why this isn't producing the desired result. I've tried giving #logo-image a negative z-index value as well, but that changes nothing. I know my radio player is appearing behind the image because I've set it to autoplay when the page loads and I can hear it, but for some reason I just cannot get it to sit on top. What am I doing wrong?
I have this page here and the div .menu-content only reaches half the page even on 100% height. I really have no idea why.
Thanks!
<div class = "menu-content">
<div class="wrapper" style = "background-color:white; height:100%; width:750px;">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php global $rd_data; if ($rd_data['rd_error_text']) { ?>
<?php echo $rd_data['rd_error_text']; ?>
<?php } else { ?>
Oops, It looks like an error has occured
<?php } ?>
<?php endif; ?>
</div>
You need to remove height:100%; on .menu-content .wrapper in your CSS code and in the inline style you set on it.
That way it will be set to default height:auto; and the height will be calculated by it's content.
Try this css..
.menu-content {
display: table;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
position: relative;
}
Add html {height: 100%} and it should work.
to solve this you can simply add a div with style = "clear:both;" at the end of your div .menu-content
like this :
<div class="menu-content">
.....................
<div style="clear:both;"></div>
</div>
you have to use css this way. use the overflow:auto property and remove the unnecessary property like z-index and position from class .wrapper.
.menu-content {
background-color: #FFFFFF;
height: 100%;
overflow: auto;
}
.wrapper {
margin: 0 auto;
width: 750px;
}