This is my html5 code for footer:
<footer>
<div class="footer">
<nav class="footer-nav">
<ul class="list-1">
<li><img src="img/notes.png" alt="" /></li>
<li>ARTICLES</li>
<li>COLUMNS</li>
<li>BLOG</li>
<li>TOPICS</li>
</ul>
<ul class="list-2">
<li>ABOUT</li>
<li>AUTHORS</li>
<li>MASTHEAD</li>
<li>CONTRUBUTE</li>
<li>STYLE GUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style">
<div class="row">
<div class="footer-left">
<img src="img/footer1.png" alt="footer-image" />
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">Less of boring theory! Hands on programming is our training methodology! You'll love it.<p>
learn more
</div>
<div class="footer-right">
<img src="img/footer2.png" alt="footer-image" />
<p class="footer-title">Shopify Expert at $20/hour</p>
<p class="footer-pgf">Unique custom made shopify theme and tweakss. Strat selling online with stunning eCommerce storefronts created using the Shopify CMS</p>
learn more
</div>
</div>
<hr class="hr-style">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
and css:
.footer{
clear:both;
background:url('../img/footer-bg.jpg');
overflow: hidden;
}
.footer-left{
float:left;
width: 50%;
}
.footer-right{
float:right;
width:50%;
}
.footer-nav .list-1 {
font-size:13px;
font-weight:600;
text-align: center;
}
.footer-nav .list-2 {
font-size:12px;
font-weight:600;
text-align: center;
}
.footer-nav ul li{
display:inline;
padding:8px;
}
img{
vertical-align: middle;
}
.copyright{
font-size:13px;
text-align: center;
}
.footer-left:after,.footer-right:after{
clear:both;
content: "";
}
.row{}
In footer i added <hr /> two places, such as top of footer content and top of footer copyright, but it shows only in top footer-content.
What is my mistake, please help me.
This is JSfiddle link what i tried: http://jsfiddle.net/3jet0dfu/14/
You are missing a clear both div
<div style="clear:both;"></div>
inside the
<div class="row">
<div class="footer-left">...</div>
<div class="footer-right">...</div>
</div>
Please see the JSFiddle here
http://jsfiddle.net/3jet0dfu/15/
Try this
<html>
<head>
<style>
.footer
{
clear:both;
background:url('../img/footer-bg.jpg');
overflow: hidden;
}
.footer-left
{
float:left;
width: 50%;
}
.footer-right
{
float:right;
width:50%;
}
.footer-nav .list-1
{
font-size:13px;
font-weight:600;
text-align: center;
}
.footer-nav .list-2
{
font-size:12px;
font-weight:600;
text-align: center;
}
.footer-nav ul li
{
display:inline;
padding:8px;
}
img
{
vertical-align: middle;
}
.copyright
{
font-size:13px;
text-align: center;
}
.footer-left:after,.footer-right:after
{
clear:both;
content: "";
}
.a
{
width:500;
float:left;
}
.row{}
</style>
</head>
<body>
<div style="width:1000;margin:0 auto;">
<header>
<img src="http://s18.postimg.org/tvw52r1ux/logo.jpg" alt="logo">
<h1>The Articles</h1>
<nav class="header-nav">
<ul>
<li><img src="http://s12.postimg.org/hyaxg6xah/icon.png" alt="">Home</li>
<li>Articles</li>
</ul>
</nav>
</header>
<section id="section">
<div class="a">
<article class="article">
<div>
<img src="http://s18.postimg.org/7l8a2s4kp/articles.jpg" alt="articles" />
<p class="comments">by<span class="woo"> JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date></p>
<h1 class="issue">Issue No 376</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
</div>
<div>
<img src="http://s18.postimg.org/dnfwt9t0p/cat.png" alt="" />
<p class="comments">by <span class="woo">JOHN WOO</span> <date>June 04, 2013, 22 Comments</date></p>
<h1 class="issue">Issue No 375</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
</div>
</article>
</div>
<div class="a">
<aside class="aside" style="margin:0 0 0 200;">
<img src="http://s18.postimg.org/51cn8oh0p/agencies.jpg" alt="agencies" />
<h3>From the Blog</h3>
<p class="windows">DAVID <i> on </i>c# Windows</p>
<p class="hex">How to convert System.Color to HTML color (hex)?</p>
<p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
<a class="view" href="#">view answer</a>
</aside>
</div>
</section>
<footer>
<div class="footer">
<nav class="footer-nav">
<ul class="list-1">
<li><img src="http://s18.postimg.org/4xe8eom5h/notes.png" alt="" /></li>
<li>ARTICLES</li>
<li>COLUMNS</li>
<li>BLOG</li>
<li>TOPICS</li>
</ul>
<ul class="list-2">
<li>ABOUT</li>
<li>AUTHORS</li>
<li>MASTHEAD</li>
<li>CONTRUBUTE</li>
<li>STYLE GUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style">
<div class="row">
<div class="footer-left">
<img src="http://s18.postimg.org/itr24b7s9/footer1.png" alt="footer-image" />
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">Less of boring theory! Hands on programming is our training methodology! You'll love it.<p>
learn more
</div>
<div class="footer-right">
<img src="http://s18.postimg.org/gl8a98bah/footer2.png" alt="footer-image" />
<p class="footer-title">Shopify Expert at $20/hour</p>
<p class="footer-pgf">Unique custom made shopify theme and tweakss. Strat selling online with stunning eCommerce storefronts created using the Shopify CMS</p>
learn more
</div>
</div>
<hr class="hr-style">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
</div>
</body>
</html>
Related
I've been going in circles for 1 day on a simple footer which stays at the bottom of the page, unfixed.
I've managed to have it at the bottom of a full screen page. However, when I decrease the width of my browser's window to simulate a "responsive display", the footer stays at the same place when I scroll down the page and thus does not flush down.
Here is my html :
<html>
<body>
<div class="container">
<div class="row text-center">
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
And my CSS :
html {
height: 100%;
}
body {
height: 100%;
padding-bottom: 30px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
I've tried Bootstrap's column on the footer like this :
<div class="col-md-12 col-xs-12">
<div class="footer text-center">
<p class="small">© 2017 Le Point G</p>
</div>
</div>
But this method does not seem to be appropriate as it makes it inconsistent on my different pages as the amount of content differs from one page to another, pushing the footer more or less down.
Any better suggestions ?
If I understand your question correctly, you want the footer always to be fixed to the bottom of the window, reguardless of the length of the content of the page.
If so, try position: fixed instead of position: absolute
html {
height: 100%;
}
body {
height: 100%;
padding-bottom:30px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="container">
<div class="row text-center">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
you can have position:absolute just add
min-height:100%;position:relative;
to your container or row.
.row {
min-height:100%;
position:relative;
}
html {
height: 100%;
}
body {
padding-bottom: 30px;
}
.footer {
position:absolute;
background-color: blue;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="row text-center" >
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
Explanation
The container div has a min-height:100% -- this will ensure it stays the full height of the screen even if there is hardly any content. The container div is set to position:relative; this allows us to absolutely position elements inside it.
The footer has a set height in px. The footer is absolutely positioned with bottom:0 and this moves it to the bottom of the container div. When there is little content on the page the container div is exactly the height of the browser view-port as it is set to min-height:100% and the footer sits at the bottom of the screen. When there is more than a page of content the container div becomes larger and extends down below the bottom of the view-port - the footer is still positioned at the bottom of the container div. The footer is also set to width:100%; so it covers the whole page.
With Bootstrap3 you can use the class navbar-fixed-bottom.
Its not that nice but it works.
HTML:
<html>
<head>..</head>
<body>....
<div class="navbar-fixed-bottom">
<p>Your Text</p>
</div>
</body>
</html>
Something like that, but with "div" tags - w3schools
Snippet:
html, body {
margin: 0%;
padding: 0%;
}
.container {
height: 600px;
background-color: #6c6c6c;
}
myFooter {
background-color: #fff;
}
#media screen and (min-width: 480px){
footer {
position: absoulute;
bottom: 0;
background-color: #000 !important;
}
}
<html>
<head>
<meta charset="utf-8">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid text-center">
<p>Some Text in Container</p>
</div>
<footer class="myFooter text-center">
<p>Footer Text - Resize Window</p>
</footer>
</body>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<!-- Footer -->
<footer class="page-footer font-small indigo">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Very long link 1
</li>
<li>
Very long link 2
</li>
<li>
Very long link 3
</li>
<li>
Very long link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
MDBootstrap.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
I have a sample website from this.
But i don't know how to make it "center"?
There is my code
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Mobile - Basic Pin Page Responsive</title>
<!-- Included Bootstrap CSS Files -->
<link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./js/bootstrap/css/bootstrap-responsive.min.css" />
<!-- Includes FontAwesome -->
<link rel="stylesheet" href="./css/font-awesome/css/font-awesome.min.css" />
<!-- Website CSS Theme Css -->
<link rel="stylesheet" href="./css/stylesheet.css" />
</head>
<body>
<div class="wrapper">
<div id="main" class="container">
<div id="items" class="row-fluid" >
<div class="item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_04.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class="item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_07.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="author"> - John White - </div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_01.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_02.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_03.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_05.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_08.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<footer id="footer"></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="./js/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/jquery.masonry.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
And css file
body {
color: #000000;
font-family: sans-serif;
font-size: 12px;
font-weight: 400;
background-color: #CCCCCC;
}
.wrapper {}
#main {
margin-bottom: 30px;
margin-top: 55px;
}
#items {}
#items .item {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(to bottom, #F6F6F6 0%, #EAEAEA 100%) repeat scroll 0 0 transparent;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 1px rgba(0, 0, 0, 0.05);
text-shadow: 0 1px 0 #DDDDDD;
width: 236px;
margin: 10px;
float: left;
}
#items .item .item-content {
padding: 10px;
}
#items .item .picture .description {
margin-top: 10px;
}
#items .item .meta span {
font-size: 12px !important;
line-height: 16px !important;
margin-right: 5px;
}
#items .item .picture {
display: block;
position: relative;
z-index: 5;
border-top: 1px solid #999999;
border-radius: 4px 4px 4px 4px;
}
#items .item .picture a.image {
display: block;
height: auto;
width: 100%;
}
#items .item .picture img {
border-radius: 2px 2px 0px 0px;
height: auto;
position: relative;
width: 100%;
z-index: -1;
}
.picture img {
height: auto;
width: 100%;
}
.navbar-inner {
box-shadow: 0px 5px 10px #999 !important;
}
/* RESPONSIVE CSS HACKS
-------------------------------------------------- */
#media (max-width: 768px) {
#main {
margin-top: 5px;
}
}
Can you please help me?
Thanks.
Managed to gather the details I need. Can't test it through debug of devtools because Masory need to reload to re-init the size of item. This may work
Use the class .container wrapper. So it will be cantered.
Init your mansory like this .Don't set the columnsWidth property, and use gutter instead of margin in your CSS. This is to make your items have dynamic width with CSS
jQuery(document).ready(function() {
var $container = $('#items');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
isAnimated: true,
gutter: 10
});
});
});
In your CSS .Set width to dynamic, dont use float or margin (Because you use gutter instead of margin ^above)
#items .item {
box-sizing: border-box;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(to bottom, #F6F6F6 0%, #EAEAEA 100%) repeat scroll 0 0 transparent;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 1px rgba(0, 0, 0, 0.05);
text-shadow: 0 1px 0 #DDDDDD;
width: 20%;
}
When it come to small screen size, use #media query
#media (max-width: 768px){
#items item{
width: 50%;
}
}
I am puzzled by a wrap that works 90% of the time - but breaks in specific word compositions.
It's based on the css-tricks "Don't overthink it grids" blog post, so it seems the problem already existed there at the end of the tutorial.
Live/Demo/Code: http://codepen.io/anon/pen/xdFhr
As you can see the following paragraph:
BIDFIK roolbool rackorack op deenoopaloomba ka jandalop me pep google lopski
perfect preference group call later go take foot pep universal.
Flows out of the parent div. Why?
<h1>Don't Overthink It Grids <em>(while we wait for flexbox!)</em></h1>
<div class="grid">
<div class="col-2-3">
<div class="module">
<h3>2/3</h3>
<p>BIDFIK roolbool rackorack op deenoopaloomba ka jandalop me pep google lopski perfect preference group call later go take foot pep universal.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>1/3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies</p>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-2-3">
<div class="module">
<h3>2/3 (Opt-in Outside Padding)</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>1/3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-4">
<div class="module">
<h3>1/4</h3>
</div>
</div>
<div class="col-1-2">
<div class="module">
<h3>1/2</h3>
</div>
</div>
<div class="col-1-4">
<div class="module">
<h3>1/4</h3>
</div>
</div>
</div>
CSS:
* {
#include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or #extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
.col-1-8 {
width: 12.5%;
}
.module {
padding: $pad;
background: #eee;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
body {
padding: 10px 50px 200px;
background: url(http://s.cdpn.io/3/dark_wall_#2X.png);
background-size: 300px 300px;
}
h1 {
color: white;
em {
color: #666;
font-size: 16px;
}
}
It was invisible chars/hidden characters.
I removed it with a Vim command:
:%s/\%xa0/ /gc
Where xa0 is the hex code of the char (0xA0).
i have a little big problem with a project in Bootstrap. I have two files with the same code: ctr+a to select all the code from the original file, ctrl+c to copy it then ctrl+v to paste it in the second file.
I'm currently using Bootstrap 3.
The result is this:
The original file is the one in the bottom half of the image and the copy is the one in the upper half.
Both files are in the same directory. The code is this:
<!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="">
<!-- <link rel="shortcut icon" href="../../assets/ico/favicon.png"> -->
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/mainhardt.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Associació d'Amics de Mainhardt</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Inici</li>
<li class="dropdown">
Publicacions <b class="caret"></b>
<ul class="dropdown-menu">
<li>Revistes</li>
<li>Llibres</li>
</ul>
</li>
<li>Intercanvi</li>
<li class="dropdown">
Jornades d'Estudis Gaspatxers <b class="caret"></b>
<ul class="dropdown-menu">
<li>I Jornades "El Carlisme a les nostres terres"</li>
<li>II Jornades "Memòries al voltant d'una guerra"</li>
<li>III Jornades "Retalls de cultura popular"</li>
</ul>
</li>
<li class="dropdown">
Gent d'ací <b class="caret"></b>
<ul class="dropdown-menu">
<li>Carme Vidal</li>
<li>Jorge Julve</li>
<li>Mar de fons</li>
</ul>
</li>
<li class="dropdown">
Exposicions <b class="caret"></b>
<ul class="dropdown-menu">
<li>Eclipse 1905</li>
<li>Cara a cara (Carme Vidal & Joan Sanz)</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron" style="background-color: #E3F6CE;">
<img class="img-responsive" src="img/LOGO GRANDE.png"/>
</div>
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">
<img class="imagen-slider" src="img/slider/desembre2009.jpg" alt="Antennae Galaxies" />
</a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">
<img class="imagen-slider" src="img/slider/abril2010.jpg" alt="Carina Caterpillar" />
</a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/">
<img class="imagen-slider" src="img/slider/cartelljornadesgaspatxeres2.jpg" alt="Light Echo" />
</a>
<div class="carousel-caption">
<p>Light Echo From Star V838 Monocerotis</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/">
<img src="img/ngc5866.jpg" alt="Galaxy NGC5866" />
</a>
<div class="carousel-caption">
<p>Galaxy NGC 5866</p>
<p>Hubblesite.org »</p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="separador"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Quí som?</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Publicacions</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Intercanvi</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<div class="separador"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h3>Jornades d'estudis Gaspatxers</h3></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Gent d'ací</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Exposicions</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<div class="separador_grande"></div>
<div class="jumbotron" style="background-color: #333333;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-3 contacte">
<h4>Contacte</h4>
<p class="contacte_info">
<img src="img/contacte.ico"> Associació d'amics de Mainhardt<br>
<img src="img/mail.ico"> correu#1and1.es<br>
<img src="img/tlf.ico"> tlf contacte<br>
</p>
</div>
<!-- Formulari Contacte
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 contacte">
<h2>Formulari de contacte</h2>
<form role="form">
<div class="form-group input-group-sm">
<label for="inputEmail1">Direcció e-mail</label>
<input type="email" class="form-control" id="inputEmail1" placeholder="e-mail">
</div>
<div class="form-group">
<label for="inputName">Nom</label>
<input type="text" class="form-control" id="inputName" placeholder="Nom">
</div>
<div class="form-group">
<label for="inputText">Missatge</label>
<textarea class="form-control" rows="3" id="inputText" placeholder="Missatge"></textarea>
</div>
<button type="submit" class="btn btn-default">Envia</button>
</form>
</div>
Fi Formulari Contacte -->
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 contacte">
<ul class="nav navbar-nav contacte_info menu_abajo">
<li><h4>Inici</h4></li>
<li>
<h4>Publicacions</h4>
<ul>
<li>Revistes</li>
<li>Llibres</li>
</ul>
</li>
<li><h4>Intercanvi</h4></li>
<li>
<h4>Jornades Gaspatxeres</h4>
<ul>
<li>I Jornades</li>
<li>II Jornades</li>
<li>II Jornades</li>
</ul>
</li>
<li>
<h4>Gent d'aci</h4>
<ul>
<li>Carme Vidal</li>
<li>Jorge Julve</li>
<li>Mar de fons</li>
</ul>
</li>
<li>
<h4>Exposicions</h4>
<ul>
<li>Eclipse 1905</li>
<li>Cara a Cara</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="separador_grande"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 contacte">
<p class="contacte_info copyright">Avís legal. Copyright </p>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
And this is the css with some modifications i made (mainhardt.css)
body
{
font-family: arial,helvetica,sans-serif;
background-color: rgb(255, 252, 229);
}
.container
{
background-color: #E3F6CE;
}
p{
text-align: justify;
}
.img_small
{
max-height: 100px;
max-width: 175px;
}
.contacte
{
color: #999;
}
.contacte_info
{
font-size: 12px;
}
.copyright
{
text-align: center;
}
.menu_abajo li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.menu_abajo > li > ul > li
{
display: block;
}
.separador
{
margin-top: 30px;
margin-bottom: 30px;
}
.separador_grande
{
margin: 60px 0 60px 0;
}
.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px 15px 5px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
color: #ffffff;
}
.imagen-slider
{
margin: 0 auto 0;
}
.carousel-inner
{
background-image: url(../img/glyphicons-halflings-white.png);
}
See the address bar in the second picture. You have zoomed out in the second picture...
Zooming in will solve your problem..
How to make the caption of a Twitter Bootstrap thumbnail be placed to the right of the image instead of below? Preferably in CSS. So far I am just using existing tags as my css knowledge is very limited.
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail span4">
<div class="span2">
<img src="http://placehold.it/120x160" alt="">
</div>
<div class="caption">
<h5>Thumbnail label </h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
</li>
</ul>
With a slight modification of your HTML, and the addition of a new class (right-caption), a few CSS rules should cover you.
HTML
<div class="thumbnail right-caption span4">
<img src="http://placehold.it/120x160" alt="">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
Note: I'm taking the <img> out of the <div> you originally wrapped it in.
CSS
.thumbnail.right-caption > img {
float: left;
margin-right: 9px;
}
.thumbnail.right-caption {
float: left;
}
.thumbnail.right-caption > .caption {
padding: 4px;
}
Note: The margin and padding are just stylistic; floating is the key.
JSFiddle
No additional css. Change a/span tags to div if needed
<a href="..." class="thumbnail clearfix">
<img src="..." class="pull-left">
<span class="caption pull-right">
Lorem ipsum
</span>
</a>