JSFiddle here.
I have an HTML page where the body consists of a <header> element followed by a <main> element. The problem is that there is a gap/empty-horizontal-space between the <header> and <main> elements, which is neither any padding nor any margin.
I need to get rid of this gap. How do I do that?
body {
background-color: black
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<header class="light-blue darken-4">
<div class="row section">
<div class="col s12">
<i class="material-icons">menu</i>
<span class="container">
Logo
</span>
</div>
<!-- .col -->
</div>
<!-- .row -->
<ul id="side-drawer-container" class="side-nav ">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<div class="row">
<div class="col s12">
<ul class="tabs tabs-transparent center">
<li class="tab">All</li>
<li class="tab">ONE</li>
<li class="tab">TWO</li>
<li class="tab">THREE</li>
</ul>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col s12">
<section id="all"></section>
<section id="One">
<div class="row hoverable lime lighten-3">
<div class="col s12">
<ul class="tabs tabs-transparent center lime lighten-3">
<li class="tab">Amy</li>
<li class="tab">Bob</li>
<li class="tab">Anna</li>
<li class="tab">Liv</li>
</ul>
</div>
<!-- .col -->
</div>
<!-- .row -->
<div id="amy">Amy amy</div>
<!-- #amy -->
<div id="bob">Bob bob</div>
<!-- #bob -->
<div id="anna">Anna anna</div>
<!-- #anna -->
<div id="liv">Liv liv</div>
<!-- #liv -->
</section>
<section id="Two">2
</section>
<section id="Three">3
</section>
</div>
</div>
</main>
It's the margin-bottom: 20px on .row creating that gap. It's the result of "margin collapse" because that .row is the last child of header and has a margin that is collapsing outside of header
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
You can either just remove that, or add overflow: hidden to header if you want the margin to show up inside of header instead of outside of it.
Related
So basically I'm using a template for my site and adjusting accordingly. The site defines the menu-bar to be hidden on start and it appears on scroll down.
The text and menu button however, always appear on start. I cant understand how I can also tell the text (email and phonenumber) to stay hidden with the rest of the menu-bar.
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
/* menu last class added */
$('ul.basic-menu>li').slice(-2).addClass('menu-p-right');
/* TOP Menu Stick */
win.on('scroll',function() {
if ($(this).scrollTop() > 1){
$('#sticky-header').addClass("sticky");
}
else{
$('#sticky-header').removeClass("sticky");
}
});
/* meanmenu */
$('#mobile-nav').meanmenu({
meanMenuContainer: '.basic-mobile-menu',
meanScreenWidth: "767"
});
/* hamburgers menu option */
$('.hamburger').on('click', function() {
$(this).toggleClass('is-active');
$(this).next().toggleClass('nav-menu-show');
});
$(document).on('scroll',function(){
$(".hamburger-menu").slideDown(); //i have used slide down function for animation, you can change class or add css display type changing properties
})
.makescroll{height:1000px;}
.hamburger-menu{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
<div class="makescroll">Extended scroll</div>
</div>
</div>
</div>
</div>
</div>
</header>
I just can't get the sidebar to work with a full height underneath the header/nav and above the footer.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<div class="header">
<div class="row">
<div class="col-3">
<img src="img/logo.png" alt="test">
</div>
<div class="col-6">
<h1>Music</h1>
</div>
<div class="col-3">
<button>sign in</button>
<button>sign up</button>
</div>
</div><!-- end row -->
<nav>
<ul>
<li>home</li>
<li>genres</li>
<li>artists</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</div><!-- end header -->
</header>
<main>
<div class="row">
<div class="col-9">
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
</div>
<div class="col-3 sidebar">
<p>test2</p>
</div>
</div>
</main>
<footer><p>Here comes the footer at the bottom of the page with 100% width</p></footer>
</body>
</html>
Here are my HTML and CSS. I hope someone knows what the solution is.
https://codepen.io/Midoriakwa/pen/wPqzZv
Your sidebar (col-3 sidebar) , has a parent element, classed row.
The row element has no explicit height set, so height: 100% won't work on the child element (col-3 sidebar).
When using height: 100%, you are saying something along the lines of:
Use 100% of the parent's height
If the parent has no height, nothing will happen.
See this question for more clarity.
When there are a certain number of items in my Bootstrap sidebar the sidebar overlaps with the footer content. I cannot just change the footers top margin or give the sidebar a bottom margin. Neither of these resolves the overlap. Also, I am using stickyNavbar.js which may be what is causing the overlay issue. If so, would this be solved by determining when the sidebar is activated and adding a margin to the footer? How would I detect this and make this change with StickyNavbar.js? http://www.jozefbutko.com/stickynavbar/
Here is an image of the resulting issue:
HTML:
<div class="container" id="main-content" >
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4">
<div id="sidebar" class="hidden-xm" data-spy="affix" data-offset-top="100">
<nav class="leftnav">
<ul class="nav nav-pills nav-stacked">
<li>Jobs#IU</li>
<li>Recruitment & Outreach</li>
<li>The Hiring Process
<ul>
<li>Pre-posting steps</li>
<li>Posting process</li>
<li>Hiring proposals</li>
<li>Closing the posting</li>
</ul>
</li>
<li>Temporary Hiring Process</li>
<li>Student Employment</li>
<li>Related Resources
<ul>
<li>Employee Policies</li>
<li>PeopleAdmin</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-sm-8 ajaxContent">
<div ng-view> </div>
</div>
</div>
Sidebar CSS:
None, using default styles from bootstrap
Footer CSS:
.footerspan{ background-color:#4b3b32; padding-bottom: 50px; margin-top: 50px; }
Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?
What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.
I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.
Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?
I currently have an index.html, a header.html and an offcanvas.html, as follows:
header.html:
<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
<div class="desktop">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
</li>
</ul>
<div class="account">
<div class="text-edit">
<div data-ng-show="global.authenticated" mean-token-editable></div>
</div>
<ul class="right" data-ng-hide="global.authenticated">
<li><a ui-sref='auth.register'>Register</a></li>
<li><a ui-sref='auth.login'>Login</a></li>
</ul>
<ul class="right" data-ng-show="global.authenticated">
<li class="has-dropdown">
{{global.user.name}}
<ul class="dropdown">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
</div>
offcanvas.html
<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">SOL ::</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
<li>Left Sidebar</li>
<li>Left Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
And finally, index.html
<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
<div class="row"> <!-- Site tag row -->
<div class="small-12 columns">
<h1 mean-token="'home-default'">SOL :: Search</h1>
</div>
</div> <!-- End site tag row -->
</section> <!-- End site tag section -->
<section> <!-- Logo section -->
<div class="row"> <!-- Logo row -->
<div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
<a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
</div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->
<section> <!-- Search input section -->
<div class="row"> <!-- Search row -->
<div class="small-8 columns small-offset-2"> <!-- Search column -->
<form>
<div class="row collapse"> <!-- Input group -->
<div class="large-9 columns">
<input type="text" placeholder="" class="form-control main-search-input">
</div>
<div class="small-3 columns">
Search
</div>
</div>
</form>
</div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->
The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).
It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?
I want to stick a div on top when scrolling the window.
Looks like Magellan of Foundation provides similar behavior. But I want to stick my custom elements(the div with attribute data-magellan-expedition="fixed") on top instead of Sub-Nav in Magellan's example.
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Sitemap</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" >Item1</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Login</li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<div data-magellan-expedition="fixed" >
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
someCodeToCreateCalendar();
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns">
<p>
very long content can be scrolled............
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>© 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li>About</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is full my code to try my thought. I want the calendar and map always stick on top when scrolling the window. But it does not work at all. Does anybody know how to do it?
Use CSS
.div-to-stick {
postion:fixed;
}
This will stick it to the top of the page on scroll.