I'm using wordpress and woocommerce and I'm having difficulty with the css on single product pages :
The red border should surround all the content like here : http://lebruloir.com/cafe-bistrot/
But when on single product page it is all messed up : http://lebruloir.com/boutique/test/
I'm pretty sure it is a really simple solution but I can't seem to find it.
the code of woocommerce.php (which is used to display content) PS : it is normal that there is a alone it is closing a div called from the header
Thank you so much
<?php get_header(); ?>
<div class="col span_5_of_8 transparent">
<div class="site-content">
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<div class="border"></div>
<?php woocommerce_content(); ?>
</div>
</div>
This is caused by the floating content inside the <div> with the border.
Try adding overflow: auto to .site-content.
.site-content {
font-family: 'Radley', 'Libre Baskerville', 'Fenix', serif;
color: #6B0001;
font-size: 110%;
z-index: 1;
word-wrap: break-word;
padding: 4% 4% 0;
border: solid 1px #6B0001;
margin: 15px 15px 15px;
overflow: auto; /* ADD THIS */
}
Related
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?
we can see lot of empty space in link as below the image. I want to hide those empty space.
.main {
margin: 0 auto;
width: 1000px;
}
body, button, input, select, table, textarea {
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}
html
<div class="custom_case">
<div class="custom_case_left">
<h1 class="cc1">Custom Cases</h1>
<h2 class="cc2">Make Your Own design</h2>
</div>
<?php
$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';
$brandSelect .= '</select>';
echo '<select id="model_select"><option value="">My Model</option></select>';
?>
<div class ="cc3">
<div class ="cc4">
<span class ="cc5"> See Cases > </span>
</div>
</div>
I dont want to give so much empty space between image and below footer
please help me for this.
Thanks in advance.
Figured it out for you!
Your image of the phone cases is what is causing the space issue.
.custom_case_right img {
/*float:right;*/
/*bottom:320px;*/
}
That will fix the spacing beneath your image. Now your image is displaying improperly and to fix do this
.custom_case_right {
float:right;
margin-top:-310px;
}
These two changes ought to take care of it for you. I tested this out in Chrome.
You'll still need to think about how you want to have your image behave as your viewport shrinks though.
trying to make img:
line-height: 0;
vertical-align: top or bottom;
You have to fix the height of main-container.
enter code here.main-container{
height:550px;
}
Make this changes to your classes:
.col1-layout .col-main {
position: relative;
}
.custom_case_right {
float: left;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
And in your image remove position absolute, add this style instead:
.custom_case_right img {
position: relative;
width: 620px;
height: 100%;
}
So I've been racking my brains over this CSS for a while now, need someone to look over it with a fresh set of eyes... Basically what's happening is that I have 4 columns which sit next to each other in the Footer, but the last column is automatically shifting underneath the 3rd column. I can't see what's happening to make it do that?!
Check out the link below:
test.snowflakesoftware.com
Below is the CSS:
#mod_footer {
width: 100%;
background: url(images/footer.jpg);
background-position: center top;
background-repeat: no-repeat;
background-color: #212530;
}
.mod_footer_container {
margin: 0 auto;
width: 1200px;
padding-top: 25px;
}
.mod_footer_col {
float: left;
width: 25%;
padding-right: 25px;
}
#mod_footer_col_end {
float: left;
width: 25%;
}
#nav-bottom-left,
#nav-bottom-left ul {list-style-image: url(images/bullet.png); font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #FFF;}
#nav-bottom-left a {}
#nav-bottom-left li {margin-left: 25px;}
#nav-bottom-right,
#nav-bottom-right ul {list-style-image: url(images/bullet.png); font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #FFF;}
#nav-bottom-right a {}
#nav-bottom-right li {}
p.footer_title {color: #9bcbf3;}
p.footer {font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px; color: #FFF;}
p.footer .menu-item {list-style-image: url(http://www.snowflakesoftware.com/wp-content/themes/images/bullet.png);}
.mod_footer_container_bottom {
clear: both;
margin: 0 auto;
width: 1200px;
padding-top: 25px;
padding-bottom: 25px;
}
#mod_footer_bottom_col {
width: 100%;
}
And below is the HTML:
<div id="mod_footer"><footer>
<div class="mod_footer_container">
<div class="mod_footer_col">
<p class="footer_title">Quick Links</p>
<br />
<div id="nav-bottom-left" class="nav"><nav>
<p class="footer"><?php wp_nav_menu( array('theme_location' => 'footer-menu-one' )); /* editable within the Wordpress backend */ ?></p>
</nav></div><!--#nav-bottom-left-->
</div><!--mod_footer_col-->
<div class="mod_footer_col">
<p class="footer_title">In our Labs</p>
<br />
<div id="nav-bottom-right" class="nav"><nav>
<p class="footer"><?php wp_nav_menu( array('theme_location' => 'footer-menu-two' )); /* editable within the Wordpress backend */ ?></p>
</nav></div><!--#nav-bottom-right-->
</div><!--mod_footer_col-->
<div class="mod_footer_col">
<p class="footer_title">Become a Partner</p>
<br />
<p class="footer">We're always looking for new partners to team up with in order to encourage and facilitate the use of geospatial data and components within mainstream IT systems. Want to join us? All you need to do is contact us and we can get the ball rolling...</p>
<br />
<p class="footer">Join our Partner Programme</p>
</div><!--mod_footer_col-->
<div id="mod_footer_col_end">
<p class="footer">Interoperable data exchange via open standards - It's what we're all about.</p>
<br />
<p class="footer">Whether you want to load OS MasterMap, publish INSPIRE compliant data or know how to deliver AIXM via web services or any other GML data, we can help. Our software is enabling geographic information specialists around the world to easily load, publish, visualise and share geospatial data....</p>
</div><!--mod_footer_col_end-->
</div><!--mod_footer_container-->
<div class="mod_footer_container_bottom">
<div id="mod_footer_bottom_col">
<p class="footer">© <?php echo date("Y") ?> <?php bloginfo('name'); ?>. <?php _e('All Rights Reserved.'); ?></p>
</div><!--mod_footer_bottom_col-->
</div><!--mod_footer_container_bottom-->
</footer></div><!--mod_footer-->
As you can see by visiting the link, the 4th column starts with the words 'Interoperable data exchange via open standards'
Hope someone can help!
Thanks!
Your cols are all 25% width. So 4 of them should make up 100% of the width of the footer.
Where you've gone wrong is adding the padding of 25px to them. So your essentially saying 100% + 75px which is forcing your last col to do what it's doing.
Either do your measurements in pixels as you know the width of the footer and subtract the 25px padding from the width or do it all in percentages but make sure the width + padding isn't > 100%.
I agree with Spacebeer's answer, here is an alternative solution to the problem:
css3 box-sizing: http://css-tricks.com/box-sizing/
Using this as
.mod_footer_col{box-sizing:border-box;}
would allow you to keep the padding.
Note: this doesn't work in ancient browsers. (ie7)
Remove padding-right:25px from .mod_footer_col as your columns have width 25% each. And this 25px padding when added in 25% columns width it pushes your 4th column down.
You can add padding in p.footer to keep spacing between columns paragraphs.
This is my HTML code to display font with a background in a small container . .
here is the css
.cons_save h4{font:bold 22px/60px Arial,Helvetica, sans-serif;margin:20px 0px -15px 20px; color:#f78d1d;vertical-align: bottom; background:url(../images/save_bg_cons.png) no-repeat; width:151px; height:69px;}
im not able to put it ! in the bottom of that container whatever the other content above it in the container remains
My HTML CODE
<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">
<span class="cons_save fl clr">
<h4><?php echo $save. " %"; ?> </h4>
</span>
</div>
First, I would write each property of the CSS separately as follows:
.cons_save h4 {
font-weight: bold;
font-size: 22px/60px;
font-family: Arial, Helvetica, sans-serif;
margin: 20px 0px -15px 20px;
color: #f78d1d;
vertical-align: bottom;
background: url(../images/save_bg_cons.png) no-repeat;
width: 151px;
height: 69px;
}
then, it seems that the class name does not match the one in the span tag.
You should actually try and set the class name in the header tag itself.
Don't put heading tags insides spans
<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">
<div class="cons_save fl clr">
<h4><?php echo $save. " %"; ?> </h4>
</div>
</div>
And also heading having a lot of margin & padding by default. So might be the reason to come in the bottom. Be sure to clear it
.cons_save h4 { margin: 0;padding:0; }
It works without the reset too, check here
not sure what is the problem, if you could sepcify using http://jsfiddle.net/ then it would be nice.
anyway, i suggest you changing span to div, like this:
<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">
<div class="cons_save fl clr">
<h4><?php echo $save. " %"; ?> </h4>
</div>
</div>
moreover, you have vertical-align which would not work, unless you add to your css display: table-cell [note: this will not work in IE7]:
.cons_save h4{display: table-cell;font:bold 22px/60px Arial,Helvetica, sans-serif;margin:20px 0px -15px 20px; color:#f78d1d;vertical-align: bottom; background:url(../images/save_bg_cons.png) no-repeat; width:151px; height:69px;}
I wouldn't recommend you to use that property (vertical-align) on block level elements. And don't put a heading inside a span.
Without changing the HTML I would do this:
#Collect{
border: 1px solid #ccc;
width: 151px;
height: 69px;
}
h4{
font-weight: bold;
font-size: 22px/60px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
color: #f78d1d;
background: url(../images/save_bg_cons.png) no-repeat;
background:#eee;
position: absolute;
bottom: 0;
}
You can even get rid of the span.
In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D
Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here
This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}
I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)