I have the following HTML,
header {
background: #f6f6f6;
width: 100%;
min-height: 120px;
position: fixed;
z-index: 100;
top: 0;
padding: 5px 0;
}
<header>
<div class="container">
<div class="row">
<a href="index.html">
<img src="images/logo.png" class="img-responsive" alt="">
</a>
</div>
</div>
</header>
As you can see it is a fixed header and I've given it a min-height of 120px. This makes the header overlap the content below and I've prevented that by giving the div that wraps the content a margin-top of 90px.
This works fine on larger layouts but when the layout gets smaller and the image starts re-sizing(due to the .img-responsive class) its height reduces and it results in an empty space below it. I could write a media query and reduce the margin-top but I was wondering if there is some other way to prevent this from happening.
You can use JS to update the margin based on the header size on page load.
$(function() {
var headHeight = $('header').outerHeight();
$('.welcome-home').css({'margin-top': headHeight });
});
This will get the total height of the header element and then apply that size as margin-top to .welcome-home.
Here's a fiddle: https://jsfiddle.net/13n7mpbk/
If you try adding to the header, it will automatically increase the margin as needed when the page is loaded.
Related
I've a sidebar which is positioned sticky but in some cases larger than the height of the screen.
If the sidebar is in fact larger as the screen height, I don't want it to stick on the top. It should scroll down with the content of the page.
I'm using Bootstraps sticky-top class for that.
It has the following attributes:
.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
}
I changed the top: 0 to top: 50px in my case because I need the space above.
Here's some example code: https://codepen.io/cray_code/pen/ZEaOXwo
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="toc sticky-top">
<nav class="list-group">
Links (see example)
</nav>
</div>
</div>
<div class="col-lg-9">
Content (see example)
</div>
</div>
</div>
I tried the solution from here and added the following code to my class:
.toc {
overflow-y: auto;
max-height: 100vh;
}
But that doesn't help.
Is there a pure CSS solution for that or do I need to use JavaScript?
Not sure if this is what you want, but maybe using the calc() in your css could help you.
.toc{
overflow-y: auto;
max-height: calc(100vh - 50px);
}
Hope this pen helps
Some explanations:
in js we use .offsetHeight&.clientHeight to get height we check weather this height(493px) + 50px offset is more than screen height or not.
When screen size is small we set position to static
Also we set margin-top: 50px instead of top: 50px
because top works only for sticky and margin-top works for static
For aside blocks that higher then window height you can use smartSticky script
Just add "data-smartsticky" atribute to your aside block
https://www.npmjs.com/package/smartsticker
Parent block of sticky block must be height 100%, or for flex - flex-grow:1
I've used viewport height numerous times with success but this time it is causing me problems and I cannnot figure out why. You can see my issue on this web page: http://staging.chinahiking.cn/great-wall-hiking/wild-jinshanling-to-restored-jinshanling-great-wall-hike-1day/
.top-container.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.viewport-height {
height: 80vh;
}
<body>
<div class="top-container sticky"></div>
<div class="content">
<div class="viewport-height"></div>
<div class="description-container"></div>
</div>
</body>
But for some reason, the viewport height is not registering. And, when I change the screen height, the content within .description-container overlaps the content in my .viewport-height container. Does anyone know why this is happening and how I can get the content within my viewport-height container to be either 80vh or 100vh?
Make it height auto fix your problem because of contain problem is coming
.description-section-divider {
height: auto;
}
If you need some white space give some padding as per your requirement else if you want to fix using height:287px then you hvae to write media query for that better suggestion take height:auto;
I have six of my portfolio images (of kittens). How do I stack six of them on top of the lake wallpaper? I don't want there to be any white space, just the word "Portfolio" and six kittens on top of the lake, followed by the grey background section of the website.
Portfolio - How do I make six kitten photos on top of the lake img?
About - Grey background with white font and profile pic (Already done)
Contact - Contact form (Already done)
I've read about z-index, and tried background-size: cover and contain, but it doesn't seem to work... Can anyone explain all this to me?
HTML
<header id="portfolio" class="container-fluid">
<div class="container">
<h1 class="font-italic">Portfolio</h1>
<div class="row">
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio1" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio2" class="img-thumbnail>
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio3" class="img-thumbnail">
</div>
</div>
<div class="row portfolio-buffer">
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio4" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio5" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio6" class="img-thumbnail">
</div>
</div>
</div>
</header>
CSS
.portfolio-buffer {
margin-top: 30px;
}
section {
padding: 85px 0;
}
footer {
padding: 40px 0;
}
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
width: calc(100% + 30px); /* Compensate for the container */
}
https://codepen.io/jenlky/pen/GMENBL/
You have numerous problems with your fiddle:
Your .wallpaper selector doesn't actually have a matching element; you have no element with a class of wallpaper.
You are using Boostrap's container-fluid, but not using a column-based layout. Your elements in this container that are not in Bootstrap rows (such as this background) need to have margin-left and margin-right of -15px to accommodate for Boostrap.
You have rows that have combined columns counts other than 12.
Most elements overflow their container.
As for the background not working with background-size, that is because background-size requires a background to operate, added via a CSS property like background: url(background.jpg). You are simply using an <img> tag.
Having said that, all you need to do is make sure that your image has a max-width of 100%, to ensure that it stays within the bounds. You'll probably also want to make it fixed to the page, which can be done with position: fixed.
I've created a new selector based on your current structure, and added the relevant properties:
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
margin-right: -15px; /* Compensate for the container */
max-width: 100%;
position: fixed; /* Optional */
}
This can be seen working here.
Note that you'll probably want to add max-width: 100%; and max-height: 100%; to all images, to ensure that they don't go outside of their container.
Update
In order to have the background only cover the portfolio section, you'll want to remove position: fixed (to give it the default position relative). You'll still want to keep the negative left margin, but you'll want to make it 100% of the width of the container plus 30 pixels in order to compensate for the padding and offset. That can be done with a CSS calculation:
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
width: calc(100% + 30px); /* Compensate for the container */
}
I've created a new pen showcasing this here.
And again, note that you'll probably want to set a max-width of 100% on all images, and you should set margin-left (and technically margin-right) on all elements that are directly under a Bootstrap column. For example, the cats can be fixed with:
.col-md-4 > img.img-absolute {
margin-left: -15px;
margin-right: -15px;
max-width: 100%;
}
Hope this helps! :)
Ok thanks to Obsidian Age for giving me the idea of using background-image instead of img src="...". So I removed img src and added this in:
header {
background-image: url("https://wallpaperscraft.com/image/forest_lake_reflection_island_mist_97668_1920x1080.jpg");
padding: 85px 0;
background-repeat: no-repeat;
}
That works and solved the problem I had. I've updated in my codepen (https://codepen.io/jenlky/pen/GMENBL/). Cheers!
I've put a codepen example to explain:
http://codepen.io/djnutron/pen/gPJzGJ
Basically, I'm wondering why the html and body tags will not go full width. My screen is 1920x1080, but the html tag refuses to be 1920 - it always goes to 1903 for some reason? Any idea why? Also the parent div of the img tag is adding some padding somewhere - because the img is 1900 wide and the surrounding div goes to 1903? Im wondering where this padding is coming from? Ive tried adding display:block, and also vertical-align:top to the image, but no dice...
Here's the code:
HTML
<div class="gallery" >
<div class="gallery-cell">
<div class="innerG">
<img src="http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg" />
</div>
</div>
<div class="gallery-cell">Lorem ipsum dolor sit</div>
</div>
CSS
html, body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.gallery-cell {
padding: 0;
margin: 0;
}
I believe this is the case:
The scrollbar is 17 pixels wide
Also the div you have called "innerG" is display block, so it has the width of the full page. No padding is hidden anywhere. :)
Just zoom out and you will see that it's size is changing to match the screen width
If you want to have full body width all the time, you can set this in CSS:
html, body {
padding: 0;
margin: 0;
min-width: 1920px;
}
You could try to set both your HTML and Body to width: 100%;
Is there any content that is longer than the window's height? If so, might be the scroll bar as Silviagreen said.
I'm trying to make this template have a fixed navbar: here
I'm a beginner at CSS, so sorry about the silly question. When I try to make .masthead have position:fixed, the "Home About Contact" part disappears.
Thanks in advance!
The problem:
When you set position:fixed, the width of the masthead becomes the size of the elements inside by default. Usually you would be able to declare width:100% on the masthead so it stretches the entire width of the parent div, but in this case, setting percentage width on the fixed element makes it calculate based on the width of the viewport: see here for more details:
Percentage width for fixed elements?
Since the rest of the content has a max-width of 700px, we can set the width of the masthead to also be 700px but the issue is when you shrink the viewport, the rest of the page will shrink but the masthead won't. Setting max-width on the masthead doesn't work because its original width is less than 700px.
.masthead {
position: fixed;
width: 700px;
top: 0;
background-color: white;
border-bottom: 2px solid rgb(220,220,220);
}
Note that we set the background to white otherwise the bar will by default have a transparent background and the elements underneath will just intersect -- very ugly. We set the top property to 0 so it is now attached to the top of the page and doesn't leave a gap when we scroll.
(The border I added was just for looks, you can remove that if you'd like.)
Since we set the masthead to fixed positioning, it is now removed from the page flow, so everything else in the page acts like the masthead wasn't there. That leads to an issue: everything in the page shifts up, and one of the <hr />s on the top becomes hidden. To solve this, we add a margin-top: 50px; to the top <hr />, and everything is shifted downwards.
Due to the default margin styling (margin-bottom: 20px;
margin-left: 0;) on .navs in bootstrap the "Home About Contact" section ends up looking a bit awkward. We fix this by setting the margins to something more appropriate: margin: 14px 0;
Quick Note: I applied all these styles as inline in the chrome web inspector, so that they would override any other properties
Edit: Actually, it works nicely too if you just delete the HR from the document with the web inspector
First, you need to add some CSS to the header so it can be used as a fixed header. It needs a background color, and a given width:
.masthead {
width: 700px;
background: white;
}
Then, because the header is not aligned with the top of the page, you'll need some javascript to make it stick to the top:
<script>
$(document).ready(function() {
var div = $('.masthead');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</script>
Look at the boostrap navbar docs
Here is an example of a fixed navbar using bootstrap:
<div class="navbar navbar-fixed-top" style="position: absolute;">
<div class="navbar-inner">
<div class="container" style="width: auto; padding: 0 20px;">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
This is a navbar that works with position: fixed:
<div class='container'>
<div class='navbar'>
<div align='right'> <a class='menu1 menu-item'>Home</a>
<a class='menu2 menu-item'>About</a>
<a class='menu3 menu-item'>Contact</a>
</div>
</div>
</div>
http://jsfiddle.net/H9mMk/3/