I have this weird issue with Materialize CSS where the sidebar overlaps the content in the "main" panel as well as the footer (see image here: most content is censored on the page, the "m" in the title is part of the title text "Problem Submission"), even though I believe I have the gridding set properly. It happens both with Chrome and Safari (I bet no hope for IE either). Here's the basic structure of my document, where all of the below markup is within the <body> tag (it's a Jinja template, script includes and everything are located in a "base" template):
<header>
<nav class="top-nav green">
<div class="container">
<i class="material-icons">menu</i>
</div>
<div class="container">
<div class="nav-wrapper"><span id="logo-container" class="brand-logo">{{ self.title() }}</span></div>
</div>
</nav>
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo"><a id="logo-container" href="/" class="brand-logo">Brand Name</a></li>
<li></li>
<li></li>
<li></li>
{% block navlinks %}
<li class="bold">Back to Home</li>
{% endblock %}
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
{% block jumbo_content %}{% endblock %}
</div>
</div>
<div class="row">
<div class="col s12 m9 l10"><!-- Main content goes here -->
{% block main_content %}
{% endblock %}
</div>
<div class="col hide-on-small-only m3 l2"><!-- Nothing goes here (usually TOC -->
{% block toc_content %}
{% endblock %}
</div>
</div>
</div>
</main>
<footer class="page-footer green" style = "position: -webkit-sticky;">
<div class="container">
<div class="row">
<div class="col l9 m9 s12">
<h5 class="white-text">Brand Name</h5>
<p class="grey-text text-lighten-4">Description</p>
</div>
<div class="col l3 m3 offset-m3">
<h5 class="white-text">Important Links</h5>
<ul>
<li><a class="white-text" href="/login">Login</a></li>
<li><a class="white-text" href="/contact_us">Contact Us</a></li>
<li><a class="white-text" href="/about">About</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Copyright notice
</div>
</div>
</footer>
Has anyone had any similar issues or can anyone point out something wrong with my HTML layout?
If you check the side nav documentation and scroll all the way to the bottom, it shows how you can offset your content when using a fixed side nav.
Basically, you just add a padding left to your entire content.
header, main, footer {
padding-left: 240px;
}
#media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
The media query will make sure the padding disappears when your side nav disappears on smaller screens. You can also tweak the size of the padding left according to how big your side nav is.
Related
I am extending base.html in Django and want to change the <header> tag background-image. I {% extends 'blog/base.html' %} but the background-image does not appear on child template. I wonder what seems to be error? I am inheriting base template using {% block header %} tag to insert a new <header> tag into the child template. The base template header I want to change the header background-image is the following.
<header class="masthead" style="background-image: url('static/assets/img/home-bg.jpg');margin-bottom: 0;padding-top: 21%;padding-bottom: 10%;">
<div class="container position-relative px-4 px-lg-5" style="padding-top: 0;">
<div class="row gx-2 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<span class="subheading"> Novel life hacks, tricks, skills and methods in all walks of life.</span>
</div>
</div>
</div>
</div>
</header>
I got it to work through block template tag.
in base.html:
{% block header %}
<header class="masthead" style="background-image: url('static/assets/img/home-bg.jpg');margin-bottom: 0;padding-top: 21%;padding-bottom: 10%;">
<div class="container position-relative px-4 px-lg-5" style="padding-top: 0;">
<div class="row gx-2 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<span class="subheading"> Novel life hacks, tricks, skills and methods in all walks of life.</span>
</div>
</div>
</div>
</div>
</header>
{% endblock %}
and in postdetail.html:
{% block header %}
<header class="masthead" style="background-image: url({% static 'assets/img/home-bg.jpg' %}); ; background-position: center; margin-bottom: 0;padding-top: 21%;padding-bottom: 10%;">
<div class="container position-relative px-4 px-lg-5" style="padding-top: 0;">
<div class="row gx-2 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<span class="subheading"> Novel life hacks, tricks, skills and methods in all walks of life.</span>
</div>
</div>
</div>
</div>
</header>
{% endblock %}
I am trying to create a two-columns layout. Main content column contains the blog card and the second column which I'm trying to place at the top right corner contains.
This is the blog card.
The Bootstrap layout I'm using:
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url({{ post.featured_image }})"></div>
<ul class="details">
<li class="author">John Doe</li>
<li class="date">Aug. 24, 2015</li>
<li class="tags">
<ul>
<li>Learn</li>
<li>Code</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</div>
<div class="description">
<h1>{{post.title}}</h1>
<h2>Opening a door to the future</h2>
<p>{{post.summary}}</p>
<p class="read-more">
Read More
</p>
</div>
</div>
</div>
{% endfor %}
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>
You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
The col-md-4 content doesn't stick to the right on desktop view, it just appears at the bottom of the card. I've tried several methods but it doesn't work. I'm actually calling an API and using the blog card to display posts from the CMS I am using. Instead of the sidebar to remain at the top right with the first post it sticks to the last post.
You use container class in main tag. This class has max-width and padding from left and right. If you want use 100% of the page use container-fluid class.
<main role="main" class="container-fluid">
<div class="row">
<div class="col-md-8" style="border:solid 1px red">
{% blog %}{% card html }
</div>
<div class="col-md-4" style="border:solid 1px red">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>
You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>`
I eventually got it to work: I made the sidebar show only on certain screen sizes. Although, my blog card gets scattered, I am okay with the outcome.
Instead of using columns, media queries did the trick:
#media only screen and (min-width: 1020px) and (max-width: 3000px)
I've a footer that is divided in 2 columns, 1 to the left and 1 to the right.
But I'd like to set the margins so the content of the footer is align with the body (with the images you see there).
I've used Bootstrap4 tags (container) for the body but it is not working for the footer.
I'm expecting to replicate this:
Codepen
https://codepen.io/anon/pen/vwMowX
footer:
<!-- /* NEW FOOTER */ -->
{% load staticfiles %}
<style>
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
</style>
<div class="container-fluid">
<div id="footer-navbar" class="row footer navbar-fixed-bottom padding-top2 padding-bottom2">
<div class="col-md-6">
<div class="">
<nav class="">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<ul class="">
<li class="">
<a class="" href="{% url 'shop:quienes_somos' %}">¿Quiénes somos?</a>
</li>
<li class="">
<a class="" href="{% url 'shop:como_comprar' %}">¿Cómo comprar?</a>
</li>
<li class="">
<a class="" href="{% url 'shop:contactanos' %}">Contáctanos</a>
</li>
</ul>
</div>
</nav>
<ul class="left footer-links footer-interact hidden-md-down">
<li><i class="fab fa-twitter"></i></i></li>
<li><i class="fab fa-instagram"></i></i></li>
<li><i class="fab fa-facebook-square"></i></i></li>
<li><i class="fab fa-youtube"></i></i></li>
</ul>
</div>
</div>
<div class="col-md-6 text-right">
<div class="">
<p><img src="{% static 'img/home/peru-flag.png' %}"
width="40px" height="40px">Perú</p>
</div>
<div class="right footer-legal">
<span>© 2019 StickersGallito</span>
Privacy & Terms
</div>
</div>
</div>
</div>
UPDATE 1
adding the container-fluid div and container div don't allow the background to go full width.
This works for me:
https://codepen.io/anon/pen/jooNYJ#anon-login
All changes I've done are in the first 2 divs
They should look like:
<div id="footer-navbar">
<div class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2">
***content***
</div>
</div>
The class container-fluid sets width to 100%, container doesn't. You need to have an inner wrapping div with the container class.
<div class="container-fluid">
<div class="container">
*** Put your footer in here ***
</div>
</div>
The inner div will be centered.
I'm converting my landing page from Bootstrap to Semantic-UI. The page has a position fixed top navbar. The main content is divided in two columns (3-cols and 9-cols). The left column is used to show a sidebar and the right column is used for current content.
I tried to copy and paste the demo page of Semantic-UI. The navbar is 45px high. I noticed that the first 45px of main content is overlapped.
<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>
<div id="navbar" class="ui fixed inverted main menu">
<div class="container">
<div class="title item">
<b>Dashboard</b>
</div>
</div>
</div>
<div id="maincontent" class="ui bottom attached segment pushable">
<div id="sidebar" class="ui visible left vertical sidebar menu">
<a class="item">First Item</a>
<a class="item">Second Item</a>
<a class="item">Third Item</a>
<a class="item">Fourth Item</a>
<a class="item">Fifth Item</a>
</div>
<div id="content" class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>First paragraph...</p>
<p>Second paragraph...</p>
<p>Third paragraph...</p>
</div>
</div>
</div>
My current workaround is to add a 45px high placeholder after navbar.
<div style="height:45px"></div>
I'm pretty sure there are some good css style names can fix the content overlapping.
The solution is much simpler. You just need to add a padding to your main container:
<div id="navbar" class="ui fixed inverted main menu">
<!-- header content here -->
</div>
<div id="content" class="ui container">
<!-- main content here -->
</div>
And add in your CSS:
.ui#content{
// padding should be the same as header height
padding-top: 55px;
}
You have to wrap your page content in grid class:
<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>
<div id="navbar" class="ui fixed inverted main menu">
<div class="container">
<div class="title item">
<b>Dashboard</b>
</div>
</div>
</div>
<div class="ui grid">
<div class="row">
<div class="column">
<div id="maincontent" class="ui bottom attached segment pushable">
<div id="sidebar" class="ui visible left vertical sidebar menu">
<a class="item">First Item</a>
<a class="item">Second Item</a>
<a class="item">Third Item</a>
<a class="item">Fourth Item</a>
<a class="item">Fifth Item</a>
</div>
<div id="content" class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>First paragraph...</p>
<p>Second paragraph...</p>
<p>Third paragraph...</p>
</div>
</div>
</div>
</div>
</div>
</div>
What you could do is set a height on the content div and then set overflow:scroll. This way any long content will scroll in the div and it won't move up the page and under the nav bar.
I am using this bootsrtap template on my web, but the side bar is not starting from start, infect it is showing some distance down, however the content are is perfect.
<div class="container-fluid" style="margin-top:80px; min-height:500px; background-color:orange;">
<div class="row">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Admin Panel
</a>
</li>
<li>
Email Master List
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper" style="background-color:green;">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
{% block contentarea %}
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
{% endblock %}
</div>
</div>
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div> </div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</script>
</div>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div>
I want the black side bar to starts from the top, however on mobile screen it is showing from the top.
You can position #sidebar-wrapper on top
#sidebar-wrapper{
top:0px;
}
Demo:
http://jsfiddle.net/bronni/caprkok4/2/
U have given ur container itself a margin-top:80px so obviously your sidebar will start from down , though in computed it will show margin-top:0, but if you check the container it has a margin-top:80px;