I'm creating a website, and I want a footer at the bottom of the website.
Here is my html:
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="text-muted">Copyright ©2015 Chalford Sports & Social Club | All rights reserved</p>
</div>
</div>
I used the basic CSS of bootstrap.
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
How can i do ?
Your html should be like
<body>
<div id="wrap">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
this is footer
</div>
</div>
</body>
and your css be like
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: #f5f5f5;
}
Just a concept. Play with the classes as you like.here is fiddle
Related
I'm trying to do a page with simple, pure-CSS parallax sections. I applied perspective to the body element and preserve-3d to the section containers, but the background images aren't scrolling at a slower rate, they're just scrolling normally.
HTML:
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
CSS:
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
perspective: 10px;
}
.p-section {
transform-style: preserve-3d;
height: 100vh;
position: relative;
}
.content,
.bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg {
transform: translateZ(-10px) scale(2);
}
Here's a CodePen.
perspective doesn't work when applied to the body element. You need to wrap your sections in a containing element and apply perspective to that.
HTML
<div class="p-container">
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
</div>
CSS
.p-container {
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
perspective: 10px;
}
Example CodePen
I'm using the technique in this article to add momentum/intertia scrolling to an element.
html:
<h1>My title</h1>
<div class="container">
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
</div>
CSS:
body{
overflow: hidden;
}
.container{
margin-top: 5em;
overflow-x: scroll;
white-space: nowrap;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
.cause{
/* prettify */
background: blue;
color: white;
text-align:center;
/* real shit */
display: inline-block;
width: 260px
}
This works, but the problem is that it takes other elements with it! My title scrolls off with it. This happens even if I add position: fixed (probably because fixed isn't fully supported on iOS Safari.
Does anybody know of a way to get inertia scrolling working while still jeeping the other elements in the right place?
I solved this by using the code in this pen. The important bit seems to be the whitespace: no-wrap bit.
HTML:
<div class="wrapper">
item 1
item 2
item 3
item 4
item 5
item 6
</div>
CSS:
body {
background-color: #333;
}
.wrapper {
width: 320px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 1rem;
background-color: #ccc;
}
.internal {
display: inline;
background-color: wheat;
&:nth-child(odd) {
background-color: hotpink;
}
}
I've been trying to reference a image in my scss file by passing the code:
background-image: asset-url("bg.jpg", image) no-repeat center center fixed;
I've also tried:
background-image: image-url("bg.jpg") no-repeat center center fixed;
However when I run rails s I get the following error:
ActionController::RoutingError (No route matches [GET] "/assets/images/bg.jpg"):
And yes, I'm certain that my image is on app/assets/images.
How can I manage to solve this problem?
View File (Downloaded from Startup Bootstrap):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Stylish Portfolio Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<%= stylesheet_link_tag "bootstrap", "custom" %>
</head>
<body>
<!-- Side Menu -->
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">Start Bootstrap
</li>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /Side Menu -->
<!-- Full Page Image Header Area -->
<div id="top" class="header">
<div class="vert-text">
<h1>Start Bootstrap</h1>
<h3>
<em>We</em> Build Great Templates,
<em>You</em> Make Them Better</h3>
Find Out More
</div>
</div>
<!-- /Full Page Image Header Area -->
<!-- Intro -->
<div id="about" class="intro">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h2>Subtle Sidebar is the Perfect Template for your Next Portfolio Website Project!</h2>
<p class="lead">This template really has it all. It's up to you to customize it to your liking! It features some fresh photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p>
</div>
</div>
</div>
</div>
<!-- /Intro -->
<!-- Services -->
<div id="services" class="services">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Our Services</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-rocket"></i>
<h4>Spacecraft Repair</h4>
<p>Did your navigation system shut down in the middle of that asteroid field? We can repair any dings and scrapes to your spacecraft!</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-magnet"></i>
<h4>Problem Solving</h4>
<p>Need to know how magnets work? Our problem solving solutions team can help you identify problems and conduct exploratory research.</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-shield"></i>
<h4>Blacksmithing</h4>
<p>Planning a time travel trip to the middle ages? Preserve the space time continuum by blending in with period accurate armor and weapons.</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-pencil"></i>
<h4>Pencil Sharpening</h4>
<p>We've been voted the best pencil sharpening service for 10 consecutive years. If you have a pencil that feels dull, we'll get it sharp!</p>
</div>
</div>
</div>
</div>
</div>
<!-- /Services -->
<!-- Callout -->
<div class="callout">
<div class="vert-text">
<h1>A Dramatic Text Area</h1>
</div>
</div>
<!-- /Callout -->
<!-- Portfolio -->
<div id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Our Work</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-1.jpg" %>
<h4>Cityscape</h4>
</div>
</div>
<div class="col-md-4 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-2.jpg" %>
<h4>Is That On Fire?</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-3.jpg" %>
<h4>Stop Sign</h4>
</div>
</div>
<div class="col-md-4 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-4.jpg" %>
<h4>Narrow Focus</h4>
</div>
</div>
</div>
</div>
</div>
<!-- /Portfolio -->
<!-- Call to Action -->
<div class="call-to-action">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>The buttons below are impossible to resist.</h3>
Click Me!
Look at Me!
</div>
</div>
</div>
</div>
<!-- /Call to Action -->
<!-- Map -->
<div id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</div>
<!-- /Map -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="list-inline">
<li><i class="fa fa-facebook fa-3x"></i>
</li>
<li><i class="fa fa-twitter fa-3x"></i>
</li>
<li><i class="fa fa-dribbble fa-3x"></i>
</li>
</ul>
<div class="top-scroll">
<i class="fa fa-circle-arrow-up scroll fa-4x"></i>
</div>
<hr>
<p>Copyright © Company 2013</p>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- JavaScript -->
<%= javascript_include_tag "jquery-1.10.2.js" %>
<%= javascript_include_tag "bootstrap.js" %>
<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
CSS File:
html,
body {
height: 100%;
width: 100%;
}
.vert-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vert-text h1 {
padding: 0;
margin: 0;
font-size: 4.5em;
font-weight: 700;
}
/* Side Menu */
#sidebar-wrapper {
margin-right: -250px;
right: 0;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
top: 0;
right: 0;
position: fixed;
z-index: 1;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
/* Full Page Image Header Area */
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
background-image: image-url("bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Intro */
.intro {
padding: 50px 0;
}
/* Services */
.services {
background: #7fbbda;
padding: 50px 0;
color: #ffffff;
}
.service-item {
margin-bottom: 15px;
}
i.service-icon {
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
font-size: 56px;
width: 140px;
height: 140px;
line-height: 136px;
vertical-align: middle;
text-align: center;
}
/* Callout */
.callout {
color: #ffffff;
display: table;
height: 400px;
width: 100%;
background-image: image-url("callout.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Portfolio */
.portfolio {
padding: 50px 0;
}
.portfolio-item {
margin-bottom: 25px;
}
.img-portfolio {
margin: 0 auto;
}
/* Call to Action */
.call-to-action {
color: #ffffff;
background: #0a5175;
padding: 50px 0;
}
.call-to-action .btn {
margin: 10px;
}
/* Map */
.map {
height: 500px;
}
/* Footer */
footer {
padding: 100px 0;
}
.top-scroll {
margin-top: 50px;
}
.top-scroll a {
text-decoration: none;
color: inherit;
}
i.scroll {
color: #333333;
}
i.scroll:hover {
color: #0a5175;
}
/* Responsive */
#media (max-width: 768px) {
.header {
background-image: image-url("bg.jpg") no-repeat center center scroll;
}
.callout {
background-image: image-url("callout.jpg") no-repeat center center scroll;
}
.map {
height: 75%;
}
}
Run bundle exec rake assets:precompile to precompile yours assets. image-url("bg.jpg") literally becomes url(/assets/bg.jpg), which would yield a broken link in your case.
Is it possible to set a checkbox instead of a split button in a split-button-list in jquery-mobile??
It seems to be easy to change it to be another button, but checkbox..
I want my checkbox to appear on a RIGHT side INSTEAD of a split button, not instead of a picture
Thanks for help..
Here is a DEMO FIDDLE
The UL does not use split icon, but instead an absolutely positioned DIV on the right with a checkbox inside. The CSS is used to position everything correctly:
<ul class="has-right-radio" data-role="listview" data-inset="true">
<li data-icon="false">
<a href="#">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" />
<h3>Picture</h3>
<p>List item with thumbnail and right radio</p>
</a>
<div class="right-radio">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="" />
<label for="checkbox-1a"></label>
</div>
</li>
</ul>
.has-right-radio .ui-link-inherit {
margin-right: 48px !important;
}
.right-radio {
position: absolute;
top: 0px; bottom: 0px; right: 0px;
width: 48px;
border-left: 1px solid rgb(204, 204, 204);
}
.right-radio .ui-checkbox input {
visibility: hidden;
}
.right-radio .ui-checkbox, .right-radio .ui-checkbox label {
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px;
}
.right-radio .ui-checkbox label {
background-image: none;
background-color: transparent;
border: 0;
}
.right-radio .ui-checkbox label .ui-btn-inner {
position: absolute;
top: 50%;
margin-top: -10px;
}
If you do not need the thumbnail, just leave out the IMG tag like the second LI in the fiddle.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
.ui-btn-up-c{border:none;}
.ui-btn-hover-c{border:none;}
.ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color:none;background:none;border:0px; }
</style>
</head>
<body>
<div data-role="page" id="myPage1">
<ul data-role="listview">
<li>
<div class="ui-grid-b">
<div class="ui-block-a" style="width: 30%;">
<div data-role="fieldcontain">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">
</div>
</div>
<div class="ui-block-b" style="width: 60%;">
<div data-role="fieldcontain">
<h2>Phoenix</h2>
<p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p>
</div>
</div>
<div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;">
<div style="float: right;">
<label>
<input name="checkbox-0 " type="checkbox">
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
I have a web with bootstrap 3.0 with this structure of sections:
<html>
<header>
</header>
<body>
<div class="container" id="section1">
<div class="row">
<div class="col-lg-12 section">
<header>
<h3 ></h3>
<h4></h4>
</header>
</div>
</div>
</div>
<div class="container" id="section2">
<div class="row">
<div class="col-lg-12 section">
<header>
<h3 ></h3>
<h4></h4>
</header>
</div>
</div>
</div>
</body>
</html>
I tried to put a background image fixed and cover in each div "container". In higher devices works great but in ipad and iphone it doesn't work.
This is my css for section1:
#section1{
background-color: transparent;
background-image: url("img/about.jpg");
background-repeat: no-repeat;
background-attachment: fixed !important;
background-position: center top;
background-clip: border-box;
background-origin: padding-box;
margin-top: 50px;
padding-top: 120px;
min-height: 700px;
width: 100%;
background-size: cover;
}
I tried various solutions read in posts and Google, but nothing seems to work.
Any ideas?
Thanks in advance