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
Related
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;
}
I want to show a div with list of data over a div(this div has google map).
So a list of Locations want to show in a div over google map div.
Html Code :
<div id="mapcan" style="width:100%;height:400px"></div>
<div class="air">
<h3>Example project</h3>
<ul class="nmap">
<li id="_d0" class="bus_station">
<div class="mlih">bus station</div>
</li>
</ul>
</div>
Style code:
.air {
background: #fff;
width: 300px;
padding: 20px;
position: absolute;
top: 1350px;
left: 12px;
}
I am giving fix margin from top 1350px but if i added more content on above google map div list div goes to top so it's not properly work.
i want to fix it on google map div if added more content above or below from this div. This list div will not affect.
Put your "legend" div inside your map and give your map a position: relative style.
That way, the absolute position of the child will be relative to its parent, meaning it will stay inside the parent div, even if you add content above/below the parent div.
#mapcan {
background: blue;
position: relative;
}
.air {
background: #fff;
width: 300px;
padding: 20px;
position: absolute;
top: 12px;
left: 12px;
}
.content {
height: 100px;
border: 1px solid black;
}
<div class="content">content above</div>
<div id="mapcan" style="width:100%;height:200px">
<div class="air">
<h3>Example project</h3>
<ul class="nmap">
<li id="_d0" class="bus_station">
<div class="mlih">bus station</div>
</li>
</ul>
</div>
</div>
<div class="content">content below</div>
I thing you want to like this:
Wrap both div with main div and add relative position of main div. Then try this code:
<div class="map-section">
<div id="mapcan" style="width:100%;height:400px"> map Div</div>
<div class="air">
<h3>Example project</h3>
<ul class="nmap">
<li id="_d0" class="bus_station">
<div class="mlih">bus station</div>
</li>
</ul>
</div>
</div>
css:
.air {
background: #fff;
width: 300px;
padding: 20px;
position: absolute;
top: 30px;
left: 12px;
}
.map-section{
position:relative;
}
#mapcan{
background:rgba(0,0,0,0.4);
}
Here is jsfiddle code : https://jsfiddle.net/aou5gmcv/
Add z-index: 0; to the bottom div and z-index: 1 to the top div
and add position: absolute; to both div's
Currently, I have a nav bar that contains divs, and inside of the divs there's text. Unfortunately, when the browser resizes it causes the text to shift and eventually they are all warped on each other.
Check out the fiddle:
https://jsfiddle.net/6jvxLr4k/4/
html
<nav id= 'headWrap' class="wrapFix"> <div id= "nameCont"> Tupac Shakur
</div>
<div class="link" id="postOne"> Yo! </div>
<div class="link" id="postTwo"> About </div>
<div class="link" id="postThree"> GitHub </div>
<div class="link" id= "postFour"> Contact </div>
</nav>
css
nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: red;
display: inline-block;
}
#nameCont {
position:relative;
margin-left: 3%;
margin-right: 3%;
display: inline-block;
}
.link {
display: inline-block;
margin-right:5%;
}
#postOne {
position: absolute;
right:40%;
top:0;
}
#postTwo {
position: absolute;
right:20%;
top:0;
}
#postThree {
position: absolute;
right:10%;
top:0;
}
#postFour {
position: absolute;
right:0;
top:0;
}
position:absolute will do that. Just give the elements inside .wrapFix a percentage width to position them.
Here is the updated css https://jsfiddle.net/6jvxLr4k/7/
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.
I want to have horizontal lists that can run as wide as possible but within a fixed width container. I am using jQuery to allow scrolling on the really wide list, and overflow:automatic for users without javascript.
I have code along the lines of this:
<div class="list">
<ul>
<li class="feed">
<section>
<h1><span class="name">Title</span></h1>
<div class="scroll_left"><a class="ir" href="#">Scroll Back</a></div>
<div class="article_list">
<ul class="article_list">
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<!-- variable number of li's, from 10s to 100s -->
</ul>
</div>
</section>
</li>
<!-- More of these lists -->
</ul>
</div>
I'll just give a subset of my css that I think is relevant:
.feed .article_list {
position: relative;
overflow: auto;
float: left;
width: 900px;
}
.feed .article_list ul {
position: relative;
width: 10000px; /** I want this to be wide, but not allow scrolling past the end*/
margin: 0;
background-color: #ffffff;
}
.feed .article_list li {
display: block;
width: 130px;
height: 150px;
position: relative;
float: left;
border-right: 2px solid #b5e8f4;
border-left: 2px solid #b5e8f4;
margin: 0 5px 0 0;
}
My javascript is:
$(document).ready(function() {
$('div.article_list').css({
'overflow' : 'hidden'
});
$('.scroll_left a').click(function() {
toScroll = $(this).parent().next();
toScroll.animate({scrollLeft: "-=135"});
return false;
});
$('.scroll_right a').click(function() {
toScroll = $(this).parent().prev();
toScroll.animate({scrollLeft: "+=135"});
return false;
});
});
So as it is, I either have to make the inner ul really wide, so users can scroll well beyond the list items, or I can restrict it but if I add too many items (dynamically, so I don't have a lot of control), then the layout breaks.
Can I somehow get that scrollable area to just be as wide as its floated contents?
Or is the only solution to set the width in javascript (less than ideal, but I can do that)?
Its the float: left on the .feed .article_list that you really don't want but I've removed it from all of them that I could.
I would move to an inline setup instead of floating:
.feed .article_list {
position: relative;
overflow: auto;
width: 100%; /* specify what ever width you want. I think 100% is proper. */
}
.feed .article_list ul {
position: relative;
overflow-x: scroll;
margin: 0;
background-color: #ffffff;
white-space: nowrap;
}
By making the overflow-x: scroll you have a permanent scroll bar (not totally necessary, it can be removed if you prefer). The white-space: nowrap Will keep the children on one line (instead of floating.)
.feed .article_list li {
display: inline-block;
// etc. etc. etc. ...
on the children display: inline-block; will let you specify height/width like a block element and keep them inline at the same time.
JsFiddle:- http://jsfiddle.net/GBtCb/
UPDATE :-
In an effort to make it cross-browser compatible make the following changes:
remove the overflow: auto from .feed .article_list
and add:
.feed
{
overflow: hidden;
}
.article_list
{
overflow: auto;
from quirksmode.com:
http://www.quirksmode.org/css/whitespace.html : white-space: nowrap is compatible IE7+.
-