I frequent a website called GOOD and I love one aesthetic style in particular; how the navigation bar extends its colours across the background of the website. You'll see what I mean if you visit the site.
In CSS, how could I replicate this in the most simply way possible? I've tried all sorts of things with z-index/margins/float and it simply isn't happening.
Just put A div (position'd absolute) in the back with the menu in it and put another div, with the actual content in it over that.
Little example:
<html>
<body>
<div style="position: absolute; top:200px; left:0px; width:100%">The menu here, at A 100% width</div>
<div style="position: absolute; top:0px; left: 0px;">The content here.</div>
</body>
</html>
That should work!
Hope that helps.
Its all about position: absolute. The nav container which holds all of those links is given this CSS property which removes it from the normal flow of the page. It has top: 165px to set it where it is positioned. Each of the links are given the display: block property which means they will fill their parent which in this case is 100% of the width. A span tag is then used inside the 100% width links to set the text where it is.
Related
I'm trying to make a dashboard frame (in Bootstrap 5, but I don't think it makes any difference) that works like in these two pictures:
This is basically my current situation:
<html>
<body>
<div class="pretoolbar">pretoolbar (non-essential information, to be hidden when scrolling)
</div>
<div class="sticky-toolbar"> sticky toolbar</div>
<div class="container-fluid">
<div class="sidebar col-3">
[tall sidebar content]
</div>
<main class="col-9">
[also tall content]
</main>
</div>
<body>
</html>
CSS:
.pretoolbar{
background-color: #555;
color:white;
height:32px;
}
.sticky-toolbar{
background-color: black;
color:white;
height:56px;
position:sticky;
top:0;
}
.sidebar{
background-color: white;
position: sticky;
top: 56px;
overflow: hidden auto;
max-height: calc(100vh - 56px);
height: 100%;
}
I'm trying several approaches but it doesn't seem working. What I'm trying is of course position: sticky on the main sticky toolbar and on the sidebar. But due to the different available vertical space (scrolled-top vs scrolled-middle), after declaring a height for the sidebar (calc(100vh - 56px), 56px is the height of the toolbar) it results in the bottom part of the sidebar and its scrollbar to fall out of the viewport bottom. I'm considering flexbox, position:fixed, position:absolute... cannot find a way to get it through.
I also discovered a strange behavior (in Chrome at least) when you place a position:sticky inside a position:fixed
My goal would be to avoid JavaScript, I basically need a sidebar that changes its height after the sticky-state of the toolbar and sticky searchbox. (Or, to say it in other words, the top-edge of the sidebar should behave like position:sticky while the bottom-edge should behave like position:fixed;bottom:0).
Can you think of a way of achieving this without using JavaScript?
Please let me know if I am understanding your situation. First I would suggest getting rid off of the *pre-toolbar bar. Otherwise, the desired behavior is impossible without js. And since you mentioned the information there is not essential, you can put it anywhere.
However, if you still want it to be on top, then sticky of position fixed the toolbar and the sidebar. Do not use calc() It is better to use height 100vh and put it behind the toolbar so it seems to be shorter. Then, place a pre-toolbar on top (z-index) of your toolbar and animated it to disappear after some seconds.
Here is a codepen https://codepen.io/oscontrerasn/pen/WNpxJwV
How to force browser NOT to calculate the size of the content based on some absolute positioned elements?
I am looking for something like https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing
For a simplistic use case please view http://jsfiddle.net/edzis/5nnYk/
html, body, .container {
/**
https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing
DOES NOT WORK
**/
-moz-stack-sizing: ignore;
-webkit-stack-sizing: ignore;
stack-sizing: ignore;
}
This may not be an exact match to what you are looking for, but maybe it can present some ideas.
If you can change the html code, you could make use of "overflow: hidden" by using a second absolute positioned layer and let the "container" div only be responsible for the dimensions where you want to have scrolling.
NB: There is a possible issue here if the initial window width is small and the container causes scrolling, the elements off screen may not be rendered and will require refreshing.
Here's an updated jsfiddle link: http://jsfiddle.net/5nnYk/24/
code e.g:
<div class="panel">
<div class='left'>LEFT</div>
<div class='right'>RIGHT</div>
</div>
<div class='container'>
</div>
Then set the panel class to:
.panel{
width:99%;
height:200px;
position:absolute;
z-index:1;
overflow:hidden;
-webkit-transform-style: preserve-3d;
}
BTW: I set width to 99% instead of 100% because it fixes another issue that sometimes rises and causes a horizontal scroll. Another way to solve this is use left: 0px; on the panel.
I'm working on a website for a girlfriend of mine.
But I'm stuck positioning a the logo.
Here is the website I'm talking about:
http://xntriek-test.s3-website-eu-west-1.amazonaws.com/
I tried using z-indexes but don't work. I also tried setting an background image for the body.
But then I'm to limited with sizing the image.
I'm using Twitter bootstrap to put this thing together.
At the moment this is the class I'm using for the logo:
.logo{
position: absolute;
top: 25px;
left: 25px;
height: 45%;
width: 30%;
z-index: 1;
}
At the moment I'm positioning the image in a span along side the main content.
But because I'm using position: absolute this wouldn't make a difference were I put it.
If any body has any ideas how I could solve this, maybe a different approach then I'm doing right now. Any help welcome!
You need to modify your CSS along the following:
<div class="span6 offset3" style="position: relative; z-index: 1">
z-index affects positioned elements, so just add position: relative to your span of interest.
I would create a special class "z-wrap" and modify the style sheet.
<div class="span6 offset3 z-wrap">
In CSS style sheet:
.z-wrap {position: relative; z-index: 1}
Reference: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index
Note You may have to adjust the value of z-index depending on any z-index value you may have set in the logo container.
First you are distorting the logo with your css, if you want your image to be responsive position it in an responsive element, position this absolut and let the image adjust it's size.
#logoContainer {
position:absolute;
top:25px;
left:25px;
width:30%;
z-index:-1;
}
img.logo{
width:100%;
height:auto;
}
your html should look something like this:
<div id="logoContainer">
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>
Put this right after the opening of your body tag and not in some other elements.
By putting it in other elements the logo inherits their z-index and you can only influence it's z-positioning inside the parent but not on the overall page.
One thing to remember when using the z-index attribute :
Only the elements placed using their "position" attribute (relative, absolute or fixed), can be affected by the "z-index".
So if you want to fix your issue, either put your logo as a background image, either use position in the CSS of the content.
If I have 2 div tags:
<div id="parentDiv">
<div id="childDiv"><!-- other html --></div>
<!-- parent div html -->
</div>
I want the content of <div id="childDiv"> to overlap the content <!-- parent div html -->.
Reason (in case this looks like bad code design to anyone):
I need a hack workaround in google sites, I cannot add custom code on the sidebar nav, only in the main html space, I want to float a div that takes no space and relatively position it over the side bar to get around the forced limitation.
I can do everything except stop the childDiv from taking up space in it's bastardized main-page container.
You can give it a position absolute, and navigate it with margins.
#childDiv {
position: absolute;
margin-top: -100px;
margin-left: -100px;
}
How about a simple
#childDiv {height:0; overflow:visible;}
But you probably want it to have a background colour, hm? Hm.
#parentDiv {
position: relative;
}
#childDiv {
position:absolute;
top:0;
left:0;
width:100%;
}
If you need to bump the content around, or overlap stuff that is 'outside' of the sidebar, you can use negative margins to increase the width of the childDiv or move it up (to cover padding or margins you can't override).
If you need to make the #childDiv cover the entire #parentDiv, you can use a bit of JavaScript to set a min-height on childDiv, then add a colored background or something to cover any content.
var parentHeight = jQuery('#parentDiv').height();
jQuery('#childDiv').css('min-height',parentHeight + 'px');
You have to take the childblock out of the flow. The best way to do this is position: absolute on the child div and position: relative on the parent div.
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.