I want to create an horizontal carousel that has a phrase or several words scrolling end to end of the screen in a loop.
What I've tried is duplicating the phrase in two different divs, to avoid the gap in the animation (otherwise, the phrase goes almost away before it starts from the beginning and looks awful).
The problem (even though I've tried to delay the 2nd animation by half the time of the first one for them not to overlap), depending on the device, the text still overlaps.
How can I create such cacrousel (with or without JS) making sure texts don't overlap? https://tucuerpofit.com/testcarousel/
I've made an example, you could customize it as you want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel</title>
</head>
<body>
<div id="carousel" >
<p>Personal</p>
</div>
<style>
body{
max-width: 100vw;
max-height: 100vh;
background-color: black;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
}
p{
margin: 10rem;
font-size: 2rem;
font-weight: 900;
color: white;
}
#carousel{
position: absolute;
top: 50vh;
left: 0%;
animation: mover 5s infinite;
}
#carousel>*{
display: inline-flex;
}
#carousel::before{
color: white;
content: 'YOUR TEXT';
}
#carousel::after{
color: white;
content: 'YOUR TEXT';
}
#keyframes mover {
0%{
position: absolute;
top: 50vh;
left: 0%;
}
100%{
position: absolute;
top: 50vh;
left: 85%;
}
}
</style>
</body>
</html>
Use Bootstrap carousel, this is much easier and more flexible to work with: here is an example:
Update: The main reason I am telling you to use this, is you have so many ways to design your carousel with all features in Bootstrap, here I just created the simplest one, you can use Left or Right or Click to move to the next slide, also it automatically moves to next slide.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<title>Stack16</title>
</head>
<body>
<h1 class="text-center">Hello, text carousel!</h1>
<div id="textCaro" class="carousel slide mt-1 mb-1" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="1" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="2" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="3" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner mb-3 mt-3">
<div class="carousel-item active" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">This is a long text...............</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#textCaro" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#textCaro" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The final result:
Related
`I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive
.top-section{
padding-top: 2rem;
}
.btn-search{
background-color: #EEEFEE;
border-radius: 0px !important;
}
.fa-search{
color: #8E8F8F;
}
.form-control{
border-radius: 0px !important;
}
.link-end{
text-align: end;
display: flex;
justify-content: end;
align-items: baseline;
}
.first-link{
margin-right: 2rem;
}
#media (max-width:991px) {
.link-end{
padding-top: 2rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<link rel="stylesheet" href="contact.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print-Shop Contact</title>
</head>
<body>
<div class="top-section">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-12">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-search" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<!--Empty Div-->
<div class="col-lg-4 d-md-block d-none"></div>
<!--End of Empty Div-->
<div class="col-lg-4 col-12">
<div class="link-end">
Help
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want the dropdown menu to be responsible. It only got irresponsible when I align both to inline. I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive
To test the grid structure, I removed the styles that added margin and padding to the elements. Then I updated the columns for responsive design; see the reference document for the grid system to be displayed differently in different browser sizes.
.btn-search {
background-color: #EEEFEE;
}
.fa-search {
color: #8E8F8F;
}
.link-end {
text-align: end;
display: flex;
justify-content: end;
align-items: baseline;
}
.first-link {
margin-right: 10px;
}
.customDropdownStyle{
margin-right: 110px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<link rel="stylesheet" href="contact.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print-Shop Contact</title>
</head>
<body>
<div class="top-section">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-search" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="link-end">
Help
<div class="dropdown customDropdownStyle">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
References
Grid system
just update the css of this class .link-end add this line in the css align-items: flex-end;
check the link here of updated code. updated code
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 3 years ago.
I'm trying to create a simple website that has a Header containing the logo and other information, then a ribbon as separator and then a two-column section. Left column will have a selector. Right column will have information depending on the option chosen on the selector.
I was able to do this so far but now I wanna take it to the next level.
I would like my site to always fit to the window so no vertical scrollbar needed.
I'm comfortable with the sizes of my header and ribbon so I want the two-column section to take the remaining space in the window. The scrollbar, if needed, would be on the information div.
Just in case, I want the left-half (selector) to take as much space as it needs. Right-half (information) should adjust to the space it has left.
I have this code so far:
CSS
.container {
display: table;
width: 100%;
}
.left-half {
display: table-cell;
background-color:#7ec0ee;
}
.right-half {
display: table-cell;
overflow: auto;
}
HTML
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
Here I have use some bootstrap classes. I think this will help you out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm" style="background-color: lavender">
One of three columns
</div>
<div class="col-sm" style="background-color: #EAE7EE">
One of three columns
</div>
<div class="col-sm" style="background-color: #E6E2EB">
One of three columns
</div>
</div>
</div>
</body>
</html>
I suggest using flex. It's fantastic for responsive designs. You can set the width in the flex property on your left or right halwes.
.container {
display: flex;
width: 100%;
height: calc(100vh - 98px); //98px is the height of your header
}
.left-half {
flex: 1;
background: red;
}
.right-half {
flex: 1;
padding: 1em;
overflow: auto;
background: blue;
}
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
This might work for you. you can make use of the calc function in CSS.
.container {
display: flex;
width: 100%;
height: calc(100vh - 100px); //Replace this 100px with whatever value elements other than container are occupying
}
.left-half {
width:50%;
background-color:#7ec0ee;
}
.right-half {
background: red;
width: 50%;
}
I have Used Bootstrap here....My popover tootip position is not correct. As I want it to appear in the extreme right corner with the Glyphicon but it still appears at the left Position.
So, what I Tried earlier :
1) I just changed the CSS and tried to align the popover on the right but it did not work.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title : 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
.form-control {width:120px;}
.popover {
max-width:300px; }
#contact_query.btn.btn-primary
{
background-color:#74a5d0;
}
#call_icon.glyphicon.glyphicon-earphone {
position: fixed;
top: 8px;
right: 16px;
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary
{
font-size:13px;
}
#query-pos
{
font-size:13px;
}
#email-pos
{
font-size:13px;
}
#ph_1,#ph_2
{
font-size:13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a data-placement="right" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12" ><div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12" ><div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div></div>
</div><hr>
<div class="row">
<div class="col-xs-12"><p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p></p></div></div>
<div ><hr><p><b>Or you can</b><br/><p id="email-pos">E-mail us # example#example.com</p></p></div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>
Add position: fixed on the anchor that opens the popup instead of the icon. Because popover is trying the align the popover relative to the anchor that opens it. And the position of the anchor is still at left as its not position: fixed to the right.
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
Also changed the data-placement to left, as there is no space on right.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title: 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
.form-control {
width: 120px;
}
.popover {
max-width: 300px;
}
#contact_query.btn.btn-primary {
background-color: #74a5d0;
}
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary {
font-size: 13px;
}
#query-pos {
font-size: 13px;
}
#email-pos {
font-size: 13px;
}
#ph_1,
#ph_2 {
font-size: 13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a class="phone_icon" data-placement="left" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12">
<div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p>
</p>
</div>
</div>
<div>
<hr>
<p><b>Or you can</b><br/>
<p id="email-pos">E-mail us # example#example.com</p>
</p>
</div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>
For some reason no matter what I do my navbar displays menu items horizontally on collapse with my logo in the middle of them! When I used the visible-xs etc it aligns it to the left for some reason when it is visible!
I have tried methods found on other similar overflow questions such as displaying the list items inline-block (despite not wanting to use inline-styles!)
But nothing is working for me!
I know the problem is because I have my logo in the center of my menu items on desktop view, so it isn't a standard menu but there must be a way around this to make my menu items display vertically without the logo in the middle? I am new-ish to this so perhaps I am just being stupid and missing something?
I am using jquery mobile if it makes any difference (could it be this breaking the menu and preventing it from being closed?)
here is what I have and have tried:
HTML for navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, no-index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favv.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../assets/js/main.js"></script>
<!-- Custom styles for this template -->
<link href="../node_modules/jquery-mobile/mobilestyles.css" rel="stylesheet">
<link href="/Silver-Lining/css/template.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]>
<!--============ Navigation ===============-->
<nav class="navbar navbar-default navbar-fixed-top text-center">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="top-social">
<a href="tel:+1-303-499-7111"> <i class="fa fa-phone" aria-hidden="true">
</i> 0787000000
</a>
<a href="#">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>OUR CARS</li>
<li>PRICES</li>
<a class="hidden-sm-down" href="index.php" data-ajax="false"><img src="../assets/images/logo" width="250" alt="Logo"></a>
<li>PACKAGES</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS example to make menu items appear vertically on Collapse:
#media (max-width: 932px) {
#navbar-primary .navbar-nav li a {
float: none;
position: inherit;
display: inline-block !important;
vertical-align: top;
max-height: 300px;
}
}
Css for navbar
// Remove excess borders
.navbar-default {
border-top: none;
border-left: 0;
border-right: none;
margin-top: 0px;
padding-bottom: 10px;
font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 0;
font-size: 18px;
border-color: transparent;
white-space: normal;
}
.navbar-default .navbar-nav > li {
margin-top: 20px;
}
Any help would be much appreciated, I have been very confused and stuck on this for several days at least and really want to keep the same navbar without having to make it all over again
After much playing with the code I found that
#media screen and (max-width: 768px) {
#navbar-primary .navbar-nav > li {
display: block;
}
}
gave me the result I wanted (vertically stacked menu items on collapse!)
The facebook comment works well until it is given too many comments and overlaps into the footer. Is there any way to limit the Facebook comment plugin to the point where it stays within a table and uses a sidebar to scroll up and down?
The url showing this is: http://cardspoiler.com/Bootstrap/Munter/Theme/Counterfeit_coin_bootstrap.html
Here's the code:
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Cardspoiler - Counterfeit Coin</title>
<link rel="shortcut icon" href="../../../../Cardspoiler_Title_Logo.tif">
<meta name="description" content="BlackTie.co - Free Handsome Bootstrap Themes" />
<meta name="keywords" content="themes, bootstrap, free, templates, bootstrap 3, freebie,">
<meta property="og:title" content="">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
background: #232526;
background: -webkit-linear-gradient(to right, #232526 , #414345);
background: linear-gradient(to right, #232526 , #414345);
margin: 0em;
}
a { cursor: pointer; cursor: hand; }
footer {
position: fixed;
width: 100%;
bottom: 0;
height: 130px;
background: #e4e6e5;
background-color: rgba(228,230,229,.9);
transform: translateZ(0);
-webkit-transform: translateZ(0);
border-top: solid transparent 5px;
}
#content{
padding: 70px 0 0 0;
}
#text-content{
padding: 175px 0 0 0;
}
.col-aligncenter{float: none;margin: 0 auto;}
#locator { /* for the FB comments plugin */
position: absolute; visibility: visible; left: 775px; top: -320px; height: 100px; width: 500px; z-index: 200;
}
#media (min-width: 1000px) {
.container{
max-width: 1200px;
}
}
.fb_container{
height: 400px;
}
</style>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container-fullwidth">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../../Navbar/Home.html">Cardspoiler</a>
<div class="nav-collapse collapse navbar-responsive-collapse" >
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-1"><a id="home" title="Home"><span class="icon icon-home"></span> <span class="text">Home</span></a></li>
<li data-slide="2" class="col-12 col-sm-1"><a id="warrior" title="Warrior" class="external nav"><span class="icon icon-filter"></span> <span class="text">Warrior</span></a></li>
<li data-slide="3" class="col-12 col-sm-1"><a id="druid" title="Druid"><span class="icon icon-leaf"></span> <span class="text">Druid</span></a></li>
<li data-slide="4" class="col-12 col-sm-1"><a id="priest"title="Priest"><span class="icon icon-plus-sign"></span> <span class="text">Priest</span></a></li>
<li data-slide="5" class="col-12 col-sm-1"><a id="paladin" title="Paladin"><span class="icon icon-heart"></span> <span class="text">Paladin</span></a></li>
<li data-slide="6" class="col-12 col-sm-1"><a id="hunter" title="Hunter"><span class="icon icon-screenshot"></span> <span class="text">Hunter</span></a></li>
<li data-slide="7" class="col-12 col-sm-1"><a id="mage" title="Mage"><span class="icon icon-fire"></span> <span class="text">Mage</span></a></li>
<li data-slide="8" class="col-12 col-sm-1"><a id="shaman" title="Shaman"><span class="icon icon-tint"></span> <span class="text">Shaman</span></a></li>
<li data-slide="9" class="col-12 col-sm-1"><a id="warlock" title="Warlock"><span class="icon icon-user"></span> <span class="text">Warlock</span></a></li>
<li data-slide="10" class="col-12 col-sm-1"><a id="rogue" htitle="Rogue"><span class="icon icon-eye-close"></span> <span class="text">Rogue</span></a></li>
<li data-slide="11" class="col-12 col-sm-1"><a id="minions" title="Minions"><span class="icon icon-chevron-up"></span> <span class="text">Minions</span></a></li>
<li data-slide="12" class="col-12 col-sm-1"><a id="spells" title="Spells"><span class="icon icon-chevron-down"></span> <span class="text">Spells</span></a></li>
</ul>
<div class="row">
<div class="col-sm-1 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="table-responsive" id="content">
<div class="container">
<table class="table">
<td valign="top">
<img src="../../../../0/Counterfeit_Coin.png" align="left" class="img-responsive">
<div id="center">
<div id="text-content">
<font color="#888888" style="font-size:300%">
Counterfeit Coin
</font>
<br>
s <br>
<font style="font-size:160%" color="9B764C">
Cost:
</font>
<font style="font-size:130%" color="#888888">
0
</font>
<br>
<font style="font-size:160%" color="9B764C">
Type:
</font>
<font style="font-size:130%" color="#888888">
Spell
</font>
<br>
<font style="font-size:160%" color="9B764C">
Text:
</font>
<font style="font-size:130%" color="#888888">
Gain 1 mana crystal this turn only.
<div id="right">
<div id="locator">
<div class="hidden-xs hidden-sm">
<div class="fb_container">
<div class="fb-comments" data-href="https://www.facebook.com/cody.bontecou" align="right" data-width="500px" data-numposts="3"></div>
</div>
</div>
</div>
</div>
<br>
<br><br>
<br><br>
<br>
<br>
</font>
</div>
</div>
</div>
</table>
</div>
</div>
<center>
<footer>
<div class="footer" id="footer">
<div class="container.customcontainer">
<div class="col-lg-6">
<div align="right">
<font color="888888" size="4%">CARDSPOILER.COM</font>
<font color="9B764C" size="3%">
<br>
Freedom to know
</font>
<br>
<br>
<font size="2%" color="666666">
We are here to bring you visual, leaked spoilers for all of <br> the cards you love within a simple gallery.
<br>
</font>
<font color="#333333">
CONTACT US
PRIVACY POLICY
</font>
</div>
</div>
<div class="col-lg-6">
<div align="left">
<font color="#888888" size="2%">
Mean Streets of Gadgetzan
</font>
<br>
<font color="#888888" size="2%">
One Night in Karazhan
</font>
<br>
<font color="#888888" size="2%">
Whispers of the Old Gods
</font>
<br>
<font color="#888888" size="2%">
The League of Explorers
</font>
<br>
<font color="#888888" size="2%">
The Grand Tournament
</font>
<br>
<font color="#888888" size="2%">
Blackrock Mountain
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
<!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '220939261681295',
xfbml : true,
version : 'v2.8'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
$(".fb_container").css("height","400px");
</script>
</html>
Your problem is not the sidebar, but the footer.
Add these rules to your code:
footer {
z-index: 200;
}
#content {
padding-bottom: 130px;
}
Side note: If you coded that layout, you should read some more about layouts, responsiveness and CSS do's and don'ts. If someone else made it for you, you probably want to have a chat with a professional web-developer.