I'm making a fixed sidebar but it won't collapse.. I really don't know how to do it.
I have searched on the internet .. still couldn't find any results.
here is my sidebar.html
<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
<div class="pt-5 text-center pb-2 ">
<a href="../index.php" class="logo-normal pr-3">
<img src='../assets/img/favicon.ico' width="50px">
</a>
<a href="../index.php" class="logo-normal">
Fitness Addict
</a>
</div>
<hr style="border-color:white; width:90%" align=center>
<ul class="nav pl-4">
<li >
<a href="../home/myhome.php">
<i class="fa fa-home icon pr-4"></i>
My Home
</a>
</li>
.
.
.
</ul>
</div>
The css:
.sidebar{
height: calc(100vh - 90px);
width: 230px;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-size: cover;
background-position: center center;
display: block;
background: #408000;
box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
margin-top: 80px;
margin-left: 20px;
border-radius: 5px;
}
.sidebar .nav {
margin-top: 20px;
display: block;
}
I have tried to do it through JavaScript but I don't know how to make it.
anyone can help?
Your JavaScript might look like this:
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav()
{
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav()
{
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
And then you'd need to add this JS as source on the HTML using relevant code. Via W3Schools tutorial on creating a collapsible sidebar.
You might also want to have a look here at the awesome responsive sidebar tutorial on W3Schools.
collapsed:
max-width: 0;
not collapsed:
max-width: auto;
you can add property to sidebar
tranform:translateX(-100%);
when sidebar is active add class active using js and add css
sidebar.active{
tranform:translateX(0%);
}
to the parent of side bar add property
.parent{
overflow-x:hidden;
}
not collapsed:
.sidebar {
transition: left 0.3s ease-out;
}
collapsed via adding class 'hide' :
.sidebar.hide {
left: -295px;
}
-295px because width is 230px, margin-left is 20px and box-shadow has blur 45px
You could use css and the transition property.
in .css:
.sidebar {
// your current code
left: -210px; // example
transition: left 2s ease;
}
.sidebar:hover{
left: 0px;
}
This will let your div slide in over 2 seconds and disapear when not hoovered anymore.
See an example here.
Try Bootstrap, its made for creating responsive websites for all devices with little hassle, and you can find lots of other cool options! check out their documentation
You can use media queries to detect screen size, and then hide the sidebar at smaller sizes:
.sidebar{
height: calc(100vh - 90px);
width: 230px;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-size: cover;
background-position: center center;
display: block;
background: #408000;
box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
margin-top: 80px;
margin-left: 20px;
border-radius: 5px;
}
.sidebar .nav {
margin-top: 20px;
display: block;
}
#media (max-width: 400px) {
.sidebar {
display: none;
}
}
<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
<div class="pt-5 text-center pb-2 ">
<a href="../index.php" class="logo-normal pr-3">
<img src='../assets/img/favicon.ico' width="50px">
</a>
<a href="../index.php" class="logo-normal">
Fitness Addict
</a>
</div>
<hr style="border-color:white; width:90%" align=center>
<ul class="nav pl-4">
<li >
<a href="../home/myhome.php">
<i class="fa fa-home icon pr-4"></i>
My Home
</a>
</li>
</ul>
</div>
Related
I want to space out the contents to be evenly and then spaces to all have equal amount but I'm not sure how to do so. When I add padding to the list or increase the space in the column it messes up the format of the page
I have also tride putting an offset in the row but it still doesnt fix it
So I'm trying for it to be like:
Projects About Me Contact Me
Pic Pic Pic
But anytime I change something it changes to:
Projects Pic About Me Contact Me
Pic Pic
.header {
font-family: Cambria;
font-size: xx-large;
text-align: center;
padding: 50px;
background-color: lightblue;
background-image: linear-gradient(to bottom right, darkgray, lightblue);
}
.home {
width: 100%;
}
.home div {
width: 200px;
}
.home img {
vertical-align: middle;
border-style: none;
height: 200px;
width: 200px;
object-fit: cover;
}
.home ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
}
.home li {
margin-left: 20px;
list-style: none;
float: left;
}
.home a {
text-decoration: none;
font-family: Cambria;
font-weight: lighter;
color: steelblue;
}
.home a:hover {
font-weight: bold;
color: darkblue;
}
.home img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<body style="background-color:mintcream">
<div class="header">
<span style="color:darkblue">const</span>
<span style="color:white">_name =</span>
<span style="color:darkblue">"My_Name"</span>
</div>
<div class="row">
<ul class="home" style="padding-top:20px;">
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">Projects</span>
<span><img src="https://via.placeholder.com/300.png/09f/fff"/
</span>
</a>
</li>
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">About Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
<li class="col-md-2">
<a href="#">
<span style="font-size:35px">Contact Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
</ul>
</div>
</body>
As #apanesar11 pointed out, grids should resolve your problem.
Another solution is the use of the flexbox.
I made you and example with the snippet given by #mplungjan :
https://codepen.io/mdubus/pen/BvXXmJ
.home {
width: 100%;
display:flex;
flex-direction:row;
justify-content:space-around;
}
If you're not satisfied with the alignment, you can also replace the justify-content:space-around; in .home with justify-content:space-between;.
I'm not sure about the kind of alignment you want, but hope it helps ! :)
EDIT :
I also changed the .home a with
display:flex;
flex-direction:column; so that your picture goes under your text.
have you used grid systems? It'll make everything a lot easier to do and your webpage much more responsive. Check out some of my sample code here: https://github.com/apanesar11/CSS-Grids
The reason you're having this behavior currently is because span is an inline element, whereas div is a block element. Because of this the about.png and phone.jpg images are positioned currently, because start a new, since they are wrapped in a div element. Your project.jpg img is wrapped within a span element and span elements do not start on a new line and they take only the space they need.
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'm working on my custom home page and I'd like to make a transition of one element to another.
Here's my HTML code:
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the support forum so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">Test title</h5>
<span id="feature-10-description" class="feature-description">Test</span>
</li>
</ul>
</div>
CSS:
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
#index-features ul:last-child li:last-child
{
border-bottom: none;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
As you can see, I've two ul tag and what I want is to do a transition of the first ul to the other ul: http://prntscr.com/7ftax4 and the second ul: http://prntscr.com/7ftba6
The idea would be that the first ul is displayed and after 10 seconds, second ul passes over the first ul.
How can I do it with JavaScript or CSS please?
Here is a piece of jQuery which will successively add an active class over the <ul> elements. Then using CSS the <ul> elements can be hidden and shown when the .active class is applied
$(function(){
$('#index-features ul').first().addClass('active');
setInterval(loop,10000);
function loop(){
var $active=$('ul.active');
var $next=$active.nextAll('ul').first();
if($next.length===0)$next=$active.prevAll('ul').last();
$active.removeClass('active')
$next.addClass('active');
}
});
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
#index-features ul:last-child li:last-child
{
border-bottom: none;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
#index-features ul {
position: absolute;
top: 0;
opacity: 0;
transition: opacity 0.5s;
}
#index-features ul.active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the support forum so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">Test title</h5>
<span id="feature-10-description" class="feature-description">Test</span>
</li>
</ul>
</div>
This can be done with pure CSS, but you need animation and animation delay. I have made a fiddle where one div will be covered by another div after 10 seconds so be patient: http://jsfiddle.net/Lcek5s21/
#number1, #number2 {
height:100px;
width: 100px;
}
#number1 {
background-color:red;
}
#number2 {
background-color:green;
-webkit-animation: mymove 3s infinite;/* Chrome, Safari, Opera */
-webkit-animation-delay: 10s;/* Chrome, Safari, Opera */
animation: mymove 3s infinite;
animation-delay: 10s;
position:relative;
opacity:0;
}
#-webkit-keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}
My navigation has a border-bottom on hover, after you slide down on the site my first nav gits hidden and my 2nd nav gets shown. The navs have the same css, but my border-bottom on the 2nd nav doesn't work. Is this a problem with my css or jquery? Can anyone help me fix this?
HTML:
<header>
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo.png">
</a>
<nav>
Home
About
Projects
Contact
</nav>
</header>
<div id="header" class="fade">
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo-white.png">
</a>
<nav>
Home
About
Projects
Contact
</nav>
</div>
Jquery:
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').show();
$('header').removeClass('slideUp');
$('header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
CSS:
header, #header{
height: 75px;
background: rgba(26, 28, 30, 0.75);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 50;
}
header{
display: none;
}
#header{
background-color: transparent;
}
nav{
position: fixed;
right: 0;
margin-top: 22.5px;
margin-right: 30px;
z-index: 55;
}
nav a:link, nav a:visited{
position: relative;
display: inline-block;
padding: 0px 10px 0px 10px;
text-decoration: none;
font-size: 1.5em;
color: #fffffa;
}
nav a:after{
content: '';
display: block;
margin: auto;
width: 0px;
background: transparent;
transition: width .5s ease,
background-color .5s ease;
}
nav a:hover:after{
width: 100%;
border-bottom: 2px solid #fffffa !important;
}
Looks like your JQuery is having some syntax issues in the id selectors. Make sure to include #
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('#header').show();
$('#header').removeClass('slideUp');
$('#header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('#header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
Edit
Per feedback, I have re-visited this issue and have crafted a fiddle with my interpretation of what I believe will solve this. Continuous feedback will be great in getting this resolved.
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').addClass('hide');
$('#header').removeClass('hide');
} else {
$('#header').addClass('hide');
$('header').removeClass('hide');
};
});
Updated JSFiddle Link
The first problem in your script is HTML code.
You should put the second nav inside the header element like this:
<header>
<nav id="first-nav">
Home
About
Projects
Contact
</nav>
<nav id="second-nav">
Home
About
Projects
Contact
</nav>
</header>
I gave the id of "first-nav" and "second-nav" for easy handling.
Second problem is your jQuery. In your if condition, you tell jQuery to hide the header element when the browser has been scrolled more than 100. That's the problem because nav element need to be used inside header element.
I have edited your jQuery.
$(document).ready(funciton() {
//hide the second nav
$('#second-nav').hide();
//when the scroll event fired
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#second-nav').show();
$('#first-hav').hide();
}
else {
$('#first-nav').show();
$('#second-hav').hide();
}
});
});
If there is anything that is not clear please let me know, I'll be happy to help.
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