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;
}
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!
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 on "Related Articles" widget carousel navigation in WordPress. Widgets is working fine and now I'm working on styling part.
This is what I currently have:
This is what I want to achieve:
The problem is that I'm stuck on styling li. The problem is that I'm trying first of all to add width and height even with !important and it's still not re-sizing. So I need to split this carousel navigation into 8 similar parts. I think display:inline / display:inline-block might cause this issue.
CSS:
div.carousel_navigation {
display: inline-block;
background: #eeebe7;
width: 224px;
position: relative;
border-right: 1px solid #b1afa9;
border-left: 1px solid #b1afa9;
border-bottom: 1px solid #b1afa9;
}
ul li.prev-article, ul li.next-article {
display: inline;
width: 28px;
height: 20px;
}
li.nav-item-links {
display: inline;
width: 28px;
height: 20px;
}
PHP:
<div class="carousel_navigation">
<ul>
<li class="prev-article"><a class="prev-article"><</a></li>
<?php $count = 1; foreach( $related_posts_guides as $post): // variable must be called $post (IMPORTANT) ?>
<li class="nav-item-links">
<a href="#item_<?php echo $count; ?>">
<?php echo $count; ?>
</a>
</li>
<?php $count++; endforeach; ?>
<li class="next-article"><a class="next-article">></a></li>
</ul>
</div><!-- .carousel_navigation -->
Thank you in advance!
That's because your li elements are inline. If you want them to be in line with eachother, but also stylable with properties like height and width, you'll need to set them as inline-block instead:
ul li.prev-article, ul li.next-article,
li.nav-item-links {
display: inline-block;
width: 28px;
height: 20px;
}
Note that I've also joined both of your selectors with a comma as their style properties were identical.
I’m trying to make an image gallery, the issues i am having with the following code is that
the images are not floating to the left because the images are different sizes. also when i click on the image to see the full size its very pig. is there a way to fix this, or maybe display half of the picture when in galley mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css'>
</head>
<body>
<div class='container'>
<?php if($images):?>
<div class='gallery cf'>
<?php foreach($images as $image):?>
<div class='gallery-item'>
<img src="<?php echo $image['full'] ?>" >
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
There are no images
<?php endif; ?>
</div>
</body>
</html>
.cf:before,
.cf:after{
content: " ";
display: table;
}
.cf:after{
clear:both;
}
.container{
max-width: 940px;
padding: 10px;
background: #f0f0f0;
margin: 0 auto;
}
.gallery{
width:100%;
}
.gallery-item{
float:left;
background: #fff;
width:19%;
margin:1%;
padding:2%;
padding-bottom: 5%;
box-shadow:1px 1px 3px rgba(0,0,0,.2);
}
.gallery-item img{
width:100%;
}
Instead of using <img> with different sizes in the thumb gallery, use a div with a fixe dimensions, so they will float perfectly, than set the image as a background-image and add background-size: cover; So the image will cover the div and the overflow will be hidden.
Here's the code using what Simon Arnold suggested:
<div class='container'>
<?php if($images):?>
<div class='gallery cf'>
<?php foreach($images as $image):?>
<a href="<?php echo $image['full'] ?>">
<div class='gallery-item' style="background:url(<?php echo $image['full'] ?>);">
</div><!-- .gallery-item -->
</a>
<?php endforeach; ?>
</div>
<!-- .gallery cf-->
<?php else: ?>There are no images
<?php endif; ?>
</div>
<!-- .container -->
CSS
.gallery-item {
width:number;
height:number;
background-size:cover;
}
I just build a Social media site and (2) things I do when A user uploads a pic
Resize image to multiple sizes for proper use / viewing (Try and keep a consistent height or width) Photoshop images to a specific height this way its consistent.
Use CSS to keep the image width an height from expanding out side the region.
CSS CHANGES:
.gallery-item img{
width:100%;
height:**MAKE THIS YOUR CONSTANT HEIGHT**;
}
It will stretch the image if its scale is off alot but you will have your answer or put it as a background in a div as listed below.
CSS CHANGES:
#Pic{
height: **MAKE THIS YOUR CONSTANT HEIGHT**;
}
<div id='Pic' style='background:url(picture.jpg)'></div>
Here is a preview (although image will stretch your layout and gallery will stay organized and clean.
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>.