I have some issues with a website of my business.
So I bought a theme for my website(Wordpress) and downloaded few extension to that, because it was included to the theme. Unfortunately I saw some issue, when I zoom out by my browser Chrome/Firefox, the right picture "Teilen" displace to the next line, and I want to force it to stay as it is by original one.
And here is the code:
.products li.product.grid.with-hover .product-actions {
top: 5px;
left: 19px;
right: 19px;
padding-top: 13px;
text-align: center;
position: absolute;
border-top: 0;
}
<div class="product-actions">
<a class="out-of-stock" title="Vergriffen">Vergriffen</a> Quick View <div class="buttons buttons_3 group">
Details
<div class="yith-wcwl-add-to-wishlist add-to-wishlist-2150">
<div class="yith-wcwl-add-button hide" style="display: none;">
<a href="/?add_to_wishlist=2150" rel="nofollow" data-product-id="2150" data-product-type="simple" class="add_to_wishlist" style="zoom: 1;">
Wunschliste<div class="blockUI" style="display:none"></div><div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.6; cursor: none; position: absolute; background: url("http://lockpick.ch/wp-content/themes/bazar/theme/assets/images/ajax-loader.gif") center center no-repeat rgb(255, 255, 255);"></div><div class="blockUI blockMsg blockElement" style="z-index: 1011; display: none; position: absolute; left: 32px; top: 25px;"></div></a>
<img src="http://lockpick.ch/wp-admin/images/wpspin_light.gif" class="ajax-loading" alt="loading" width="16" height="16" style="visibility: hidden;">
</div>
<div class="yith-wcwl-wishlistaddedbrowse show" style="display: block;">
<span class="feedback">Produkt hinzugefügt!</span>
<a href="http://lockpick.ch/wishlist/view/">
Wunschliste ansehen </a>
</div>
<div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
<span class="feedback">Dieses Produkt ist bereits in der Wunschliste vorhanden.</span>
<a href="http://lockpick.ch/wishlist/view/">
Wunschliste ansehen </a>
</div>
<div style="clear:both"></div>
<div class="yith-wcwl-wishlistaddresponse"></div>
</div>
<div class="clear"></div>
Teilen </div>
</div>
CSS issue
Website: www.lockpick.ch
Hope you can help me, because I am totaly newbie to CSS/HTML...
Greetings
Lucia
The issue comes from the use of a width of 33.3333% for these elements. While in most cases this approximation of 1/3 works, in some settings it ends up being problematic and the 3 elements end up being slightly more than 100% width.
A simple fix would be to edit this 33.3333% to 33%. Visually the users shouldn't see the 1% missing on the right and it solves your issue.
From the website link you provided, it is located in style.css line 675:
ul.products li.product.grid.with-hover .product-actions .buttons.buttons_3 > *,
.product-box .buttons.buttons_3 > * {
width: 33%;
}
Please try so :) Because by default the box-sizing is content-box which is meaning width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included.
These element has border-left: 1px solid #e0dfdf; and width: 33.333%. In the smaller screen, each element will has small width, e.g less than 100px lead to 1px border costs more than 1% of width. Then the last element is pushed down to next line.
ul.products li.product.grid.with-hover .product-actions .buttons a.details, .product-box .buttons a.details {
box-sizing: border-box;
}
Related
I found a good contact page that I want reproduce, see this link at Contatti section.
I'm using Initializr with Twitter Bootstrap3.
Here is HTML/css/js structure for Contact Section, I've a gmaps iframe (id="map") inside iframeWrapper placed with position:relative, iframeBlock is a full width/height panel with opacity = 0.7 to overshadow iframe, iframeCont with two panel with some contact link and btn-map and btn-cont to switch between active (no opacity and possibility to make the scroll and to use zoom buttons ) and inactive iframe.
I set position:absolute for all other element inside a iframeWrapper.
$('#btn-map').click(function(){
$('#iframeBlock').hide();
$('#iframeCont').hide();
$('#btn-map').css('display','none');
$('#btn-cont').css('display','block');
});
$('#btn-cont').click(function(){
$('#iframeBlock').show();
$('#iframeCont').show();
$('#btn-map').css('display','block');
$('#btn-cont').css('display','none');
});
#cont{
width: 100%;
height: 100%;
padding-top: 50px;
text-align: center;
background: #fff;
}
#map{
z-index:5;
width: 100%;
padding: 0;
}
#iframeWrapper{
position: relative;
}
#iframeBlock{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
opacity:0.7;
background: #000;
z-index: 6;
text-align:center;
}
#iframeCont{
position: absolute;
top:20%;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 7;
text-align:center;
}
.cont-element{
background: #0b5394;
color:#FFF;
margin-bottom: 5%;
border-radius: 10px;
padding: 3%;
font-size: 1.2em;
}
#btn-map{
position: absolute;
top:70%;
left:25%;
z-index: 7;
opacity: 1;
background: #cc0000;
color: #FFF;
border-color: #FFF;
display:block;
}
#btn-cont{
position: absolute;
top:70%;
left:30%;
z-index: 7;
opacity: 0.7;
background: #FFF;
color: #000;
border-color: #cc0000;
display:none;
}
<!-- Contatti Section -->
<section id="cont" class="cont-section">
<div class="container-fluid">
<div class="row-fluid">
<div id="iframeWrapper">
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2786.232975915266!2d8.878734115818997!3d45.70636282527264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478688abc9247355%3A0x59d85ca1774dc65a!2sASD+Pallacanestro+Lonate+Ceppino!5e0!3m2!1sit!2sit!4v1445187794194" frameborder="0" style="border:0" allowfullscreen></iframe>
<div id="iframeBlock">
</div>
<div id="iframeCont">
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-8 cont-element">
<i class="fa fa-mobile"></i> </br> <a href:"tel:xxxxxxxx">xxxxxxxx</a> <span>Giovanni</span>
</div>
<div class="col-xs-2">
</div>
</div>
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-8 cont-element">
<i class="fa fa-envelope"></i> </br> xxxxxxxx#gmail.com
</div>
<div class="col-xs-2">
</div>
</div>
</div>
<button id="btn-map" class="btn btn-info btn-lg"><i class="fa fa-map-o"></i> <strong>Visualizza Mappa</strong></button>
<button id="btn-cont" class="btn btn-info btn-lg"><i class="fa fa-phone"></i> <strong>Contattaci</strong></button>
</div>
</div>
</div>
<!-- begin snippet: js hide: false -->
Everything works but I have a padding of 15px around iframeWrapper due to container-fluid and then see two white borders on the left and right side.
I tried to reset the padding for the container-fluid to zero, but It displays a horizontal scroll bar and it is as if the content is outside the viewport.
Image that show contact section
Could you help me? Thanks
analyzing the code with Google Chrome Developers Tool, I found that two rows exceed viewport width. (For example, if viewport width is 380px, the row width is 410px), so I write this CSS rule:
#iframeCont .row{
width: 100%;
}
which refers just to the two rows, and now I have no more white space around my iframe.
But for me is a bad solution! I probably poorly designed html structure!
I need advice on the following issue:
We are using wordpress as backend for a website and a theme that comes with a slider. I use that slider with some css to let divs slide up and show hidden content on mouseover (divs are displayed in front of a background image). This works great so far after searching for it here in stackoverflow.
What I would need now is a functionality that changes the image of the slider on mouseover of a div that is inside the slider-div.
HTML looks like this (extremely simplified):
<div class="ls-wp-fullwidth-container" style="height: 692px;">
<div class="ls-wp-fullwidth-helper" style="height: 692px; width: 1383px; left: 0px;">
<div id="layerslider_3" class="ls-wp-container ls-container ls-fullwidth" style="margin: 0px auto; visibility: visible; width: 1383px; height: 691.5px;">
<div class="ls-webkit-hack">
</div>
<div class="ls-inner" style="width: 1383px; height: 692px;">
<div class="ls-layer ls-active" style="left: auto; right: 0px; top: 0px; bottom: auto; width: 1383px; height: 692px; display: none; visibility: visible;">
<img src="http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Zürich.jpg" class="ls-bg" alt="Slide background" style="padding: 0px; border-width: 0px; width: 1660px; height: 922px; margin-left: -830px; margin-top: -461px;">
<div class="ls-s-1 Highlight1" style="position: absolute; color: rgb(0, 111, 0); border-radius: 20px; white-space: nowrap; opacity: 1; transform: rotate(0deg) scale(1, 1); display: block; visibility: visible; margin-left: 0px; margin-top: 0px; width: 253.55px; height: auto; font-size: 23.05px; line-height: 23.05px; padding: 0px; border-width: 0px; left: 138.3px; top: 507.1px; background: rgb(255, 255, 255);">
<div id="parent">
<center>
<br>
<br>
<h1>Siebdruck</h1>
<ul>
<li>Content</li>
</ul>
</center>
<br>
<br>
<div id="hover-content">
<center>
<ul>
<li>Content shown on hover</li>
</ul>
<br>
<br>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I want to do now is to change the image within the
<div class="ls-layer ls-active>
<img src="...">
</div>"
I figured out this would only be possible by using javascript so I tried the following:
Using this code in a header file:
var elem = document.getElementById("parent");
elem.addEventListener("mouseover",mouseOver);
elem.addEventListener("mouseout",mouseOut);
function mouseOver() {
document.getElementByClassName("ls-layer ls- active").style.backgroundImage="url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg)";
}
function mouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg)";
}
Didn't work, so I tried this:
function MouseIn() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg) no-repeat";
}
function MouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg) no-repeat";
}
Didn't work as well, so I messed around with names and ids but couldn't figure out what I am doing wrong.
So, long story short: Is it possible to change the image within the structure stated above (<div class="ls-layer ls-active><img src="..."></div>") when hovering <div id="parent"></div>? And if so, what am I obviously doing wrong?
As mentioned before, transitions created using css are working perfectly fine...
I hope you can help me, I'm growing more and more desperate about this.
Just try this:
$("#parent").on({
"mouseover" : function() {
$( ".ls-bg" ).attr( "src", "http://placehold.it/350x150" );
},
"mouseout" : function() {
$( ".ls-bg" ).attr( "src", "http://placehold.it/950x150" );
}
});
HTML:
<div id="parent">
<img src="http://placehold.it/950x150" class="ls-bg" alt="Slide background">
</div>
UPDATE ---
Looking at your question I modified my code. I think this is what you want:
JSFIDDLE
I have a container div with an image overlayed on top of it.
I want to center this container div within a basic popin. I am sure it has something to do with the overlay approach I am using within the CSS, but I cannot figure it out. How can I center the container dev within the popin?
EDIT: There are several of these blocks placed in-line.
CSS and HTML are as follows:
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
.popin{
background:#fff;
padding:15px;
box-shadow: 0 0 20px #999;
border-radius:2px;
}
#underlay1 {
width: 320px;
height: 320px;
position: relative;
}
#underlay2 {
width: 320px;
height: 320px;
position: relative;
}
<div class="row">
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay1"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay2"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
</div>
Underlay is receiving an image from an API. overlayimage.gif is another image being placed on top.
Just remove float: left; from .containerdiv and give text-align: center; to .popin will solve your issue.
You can center absolute div like following way:
left: 50%;
transform: translate(-50%, 0px);
http://jsfiddle.net/5z2k1b1r/
Edit:
use margin: 0 auto; for #underlay as per your expected output.
Check Fiddle
I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}
It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle
Using jQuery the jquery plugin along with the easing plugin.
I have a series of anchors, in a list which are all fixed heights and widths. Within each div is another I've called 'content', this is positioned absolute and slides into view, from the bottom, when the mouse enters the containing div. When the mouse leaves the containing div, the 'content' div slides back out of view.
I had this working, using a combination of top and bottom values but this doesn't work cross-browser (only works correctly in firefox from what I can tell). The code for this is below (html, css and javascript):
<!doctype html>
<head>
<style>
.index {
float: left;
margin: 0 0 30px 0;
margin-left: 0;
padding: 0;
position: relative;
}
.index li {
border: 2px solid #f3f3f3;
float: left;
list-style: none;
font-family:"Helvetica";
font-size:14px;
font-weight:normal;
margin: 0 10px 10px 0;
padding: 1px;
position: relative;
}
.index li a {
float: left;
height: 126px;
overflow: hidden;
position: relative;
width: 224px;
}
.index li img {
display: block;
}
.index li .content {
background: #f7f7f7;
bottom: auto;
display: block;
margin: 0;
padding: 10px 0 3px;
position: absolute;
top: 132px;
width: 224px;
}
.index li a:hover .content {
bottom: 0;
top: auto;
}
.index .content h3 {
background: url(../img/content/arw-sma.png) no-repeat 0 -100px;
color: #666;
margin: 0 10px 1px;
padding-left: 20px;
}
.index .content p {
color: #999;
display: block;
float: left;
font-size: 12px;
margin: 0 10px 2px;
padding: 0;
}
</style>
<script src="js//jquery-1.6.2.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script type="text/javascript">
$(function(){
$('.index .content').css( {'top':'132px', 'bottom':'auto'});
$('.index li a').hover(
function(){
$(this).find('img').animate({'opacity': '.7'}, 200);
$(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});
},
function(){
$(this).find('img').animate({'opacity': '1.0'}, 200);
$(this).find('.content').animate({'top':'132px'}, 150);
}
);
});
</script>
</head>
<body>
<ul class="index panel">
<li>
<a href="#" title="TITLE TEXT.">
<img src="thumb-1.jpg" alt="ALT TEXT." />
<div class="content">
<h3>Title Here</h3>
<p>Other content goes here</p>
</div>
</a>
</li>
<li>
<a href="#" title="TITLE TEXT.">
<img src="thumb-1.jpg" alt="ALT TEXT." />
<div class="content">
<h3>Title Here</h3>
<p>Other content goes here</p>
</div>
</a>
</li>
<li>
<a href="#" title="TITLE TEXT.">
<img src="thumb-1.jpg" alt="ALT TEXT." />
<div class="content">
<h3>Title Here</h3>
<p>Other content goes here</p>
</div>
</a>
</li>
</ul>
</body>
Different browsers don't like using both top and bottom values. So ideally, I'm guessing I need to just use 'top'. The problem is, I don't know how tall the 'content div' will be, so I can't set an explicit value, as if its taller, it will chop off some of the content.
Since I know the anchor will be 126 pixels in height. I've been trying to use .height() to detect the height of the 'content div'. Then subtract this value from 126 - which would leave me with the value I need to set 'top' to be, to position it within the div.
Does this sound plausible and am I making sense? Hopefully this isn't to long winded, just trying to be as detailed as I can.
Hope someone can help and I love forward to you replies!
demo jsBin
Use SPAN instead of DIV (DIV are block level elements, and AFAIK it won't validate your document.)
You can just set an initial bottom value like -132...-150 ...or whatever you prefer for your .content
.index li .content {
background: #f7f7f7;
bottom: -132px;
display: block;
margin: 0;
padding: 10px 0 3px;
position: absolute;
top: 132px;
width: 224px;
}
jQ:
$(function(){
$('.panel li a').hover(
function(){
$(this).find('img').animate({'opacity': '.7'}, 200);
$(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});
},
function(){
$(this).find('img').animate({'opacity': '1.0'}, 200);
$(this).find('.content').animate({'bottom':'-132px'}, 150);
}
);
});
THe other solution I would use is to: at DOM ready, calculate each content height ( var outerH = $(this).outerHeight(true) ) and set that value as a data-height for each element. ($(this).data('height', outerH);). Than you can animate on hover the exact N of px that is stored in that element data-height.