Is there a way for me to have a split colour background, so I have left half of the page black, right half white.
Usually I will have the <header> and <footer> which will be full width at top and bottom of the page and inside, a wrapper, to centre the content of those elements so the content isn't full width of the entire body.
Now when it comes to the actual content where posts and side navigation etc could be, I want one side to be white and one side to be light grey.
I know I can create two columns inside a centred wrapper floated left with different background colours, but that would still leave the background colour showing on either side of the wrapper.
I hope someone understands what I'm talking about, I have no idea how to explain it or what to search.
I will make a quick picture in paint and attach to this post soon,
many thanks!
Edit: Example picture
You may try this
header, footer{
background-color: #ff3399;
position: relative;
text-align: center;
padding: 5px;
}
.container{
position: relative;
overflow: hidden;
}
.bg{
position: absolute;
top: 0;
bottom:0;
height: 3000px;
}
.bgwhite{
background-color: white;
width: 50%;
left: 0;
}
.bggray{
background-color: lightgray;
width: 50%;
right: 0;
}
.wrapper{
position: relative;
width: 80%;
margin: auto;
}
p{
margin: 0;
padding: 10px;
}
<header>This is header</header>
<div class="container">
<div class="bg bgwhite"></div>
<div class="bg bggray"></div>
<div class="wrapper">
<p>This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content.</p>
</div>
<footer>This is footer</footer>
This is what you can do:
HTML
<div id="content"></div>
<div id="background"></div>
CSS
#background {
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: pink;
z-index: 1;
}
#content {
position: relative;
z-index: 2;
}
Related
I wanted to have a full width background with my bottom div without changing the page layout structure. The following code allowed me to have a full background color (dark purple) just as I wanted it here. But when I checked the page on my phone, I saw that the bottom went up to 9999px. If I put overflow: hidden, then I dont get the full width background. Please help, thank you!!
.nextpage {
color: #FFF;
background: #2D0072;
width: 100%;
height: 120px;
text-align: center;
padding: 33px 5px;
display: block;
position: relative;
}
.nextpage:before, .nextpage:after {
content: "";
position: absolute;
background-color: #2D0072;
top: 0;
bottom: 0;
width: 9999px;
}
.nextpage:before {
right: 100%;
}
.nextpage:after {
left: 100%;
}
Of course, the best way to tackle this would be to arrange your layout HTML...
<body>
<header>
<div class="page-width">
// header stuff here
</div>
</header>
<content>
<div class="page-width">
// main content stuff here
</div>
</content>
<footer>
<div class="page-width">
// footer stuff here
</div>
</footer>
</body>
Then the CSS...
body {
display: flex;
}
content {
flex: 1;
}
.page-width {
margin: 0 auto; // centers your block element if smaller that it's parent
max-width: 1200px; // you decide
}
But you can't alter your layout?? You will have to do some hackery...
CSS
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
stuff-in-footer {
margin: 0 auto; // for centering
max-width: 1200px; // you decide
}
The hackery needed is to put a bottom margin on the rest of your page so you can see it when fully scrolled. Also, 'fixed' will position the footer on the bottom of the page, as the CSS is written above, no matter the scroll position of your page. Some JS might be needed to apply the right bottom margin on your content based on the display height of your footer, and more to reveal the footer when the page is fully scrolled.
Check your media queries. Loading the page in a desktop browser and scaling the width of the window down vs loading the page on mobile on BrowserStack generates very different results.
Let me first try to illustrate the problem
I have a webpage which contains a header and a sidenav. The sidenav is fixed in css, since I don't its content to move when scrolling.
When the page isn't scrolled down it works as intended, somewhat like this
However when I scroll i don't want whitespace on top of the sidenav. Currently when I scroll down the page, it looks somewhat like this
The intended behavior should be something like this
How do I go about this in css? Do I mess with the z-index of the elements? so the sidenav is behind the header when the page isn't scrolled? Or do I dynamically add to the sidenav's size when scrolling?
And how would either of these options be done in css?
As I understand, you have to set z-index of the header higher than the sidenav
Stack Snippet
.header {
height: 100px;
background: #000000;
position: relative;
z-index:999;
}
body {
margin: 0;
}
.sidebar {
position: fixed;
left: 0;
top: 0px;
width: 100px;
background: red;
height: 100%;
padding-top:100px;
}
.content {
height: 1000px;
background: yellow;
}
<div class="header"></div>
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
This question has been asked an awful lot of times here, but I am yet to find a conclusive answer to this.
I'm working to implement right and left 100% height, fixed sidebars in my design. The Left sidebar works great, but the right one floats over the (min-width'd) content when the browser is resized.
When I set the position of the bars to absolute, it behaves well with horizontal window resizing, but then the sidebars aren't fixed on vertical scroll.
Check out my jsfiddle: http://jsfiddle.net/wjhzyt0u/17/
(If you resize the window, you can see the right blue bar float over the middle grey content).
HTML
<div class="wrapper">
<section id="sidebar-nav">
</section>
<section id="content">
<p>some rad stylin' content</p>
</section>
<section id="sidebar-notif">
</section>
</div>
CSS
html, body {
position: relative;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
height: 100%;
width: 100%;
min-width: 450px; /* dont want to squish the content too much */
}
#sidebar-nav, #sidebar-notif {
position: fixed;
height: 100%;
width: 150px;
background: lightblue;
}
#sidebar-nav {
top: 0;
left: 0;
}
#sidebar-notif {
top: 0;
right: 0;
}
#content {
margin: 0 150px;
height: 300px;
background: lightgrey;
border: 2px solid yellow;
}
Any help would be very welcome!!
My 'solution' for anyone else looking at a similar situation.
I ended up going with absolutely positioned sidebars (which scale to the size of the middle content), and added the Waypoint sticky plugin to scroll the sidebar content.
Updated JsFiddle: http://jsfiddle.net/wjhzyt0u/20/
Sticky divs stick to the top of the page on scroll - thus creating the illusion of 100% height sidebars.
Drawbacks are extra js weight + page load times.. but I'll take it for now.
Changes:
.wrapper {
position: absolute;
width: 100%;
min-width: 500px;
// removed 100% min-height, which lets the sidebars stretch to 100% height of the content.
}
#sidebar-nav, #sidebar-notif {
position: absolute; // changed to absolute from fixed.
height: 100%;
width: 150px;
background: lightblue;
}
// added sticky divs to sidebars, which stick to the top of the page on scroll (with help from Waypoints sticky plugin.
.sticky {
border: 1px solid red;
}
I'm trying to create a fixed navigation menu which scrolls down the side of the page.
The page has been structured so that everything stretches the full width of the page and then each div makes the fixed width of its content of 860px. Now I've come to add a fixed navigation and I'm struggling to make the fixed navigation align to the right of this content.
I can't have a page wrapper which sets a fixed page width and then contains everything because The backgrounds stretch the full width of the page.
I've tried to add a fixed div to contain the navigation but this div just ends up intercepting all the clicks as it's above the rest of the content.
There are several sections on the page, so I don't think I can nest the navigation inside the first section.
<div id="navigation">
<ul>
</ul>
</div>
<div class="section">
<div class="section-content">
<div class="section-content-panel">
<p>Blah blah blah</p>
</div>
</div>
</div>
<div class="section">
<div class="section-content">
<div class="section-content-panel">
<p>Blah blah blah</p>
</div>
</div>
</div>
And the CSS:
#navigation {
height: 100%;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
z-index: 999;
}
#navigation ul {
background: blue;
height: 200px;
margin: -50px 0 0;
position: absolute;
top: 50%;
right: 0;
width: 80px;
}
.section {
margin: 0 auto;
position: relative;
padding: 0 0 100px 0;
width: 100%;
}
.section-content {
background-color: #1d1d1d;
background-color: rgba(29, 29, 29, 0.96);
color: #ffffff;
padding: 24px 0;
position: relative;
}
.section-content-panel {
margin: 0 auto;
padding-right: 100px;
position: relative;
width: 860px;
}
JSFiddle.
Could someone help me get this working properly?
EDIT
A sketch to show the effect I'm after.
It's a rough sketch, but blue is the viewport, grey are the sections and red is width of all the content. The sections contain all of the content to the red width, but their backgrounds need to expand full screen. The green is the navigation and I want that to sit fixed in the viewport, with the sections scrolling behind it.
I hope that helps clear it up?
Okay, the sketch is clarifying.
I believe you don't need div#navigation. I deleted the div and gave the menu the id, and changed the CSS to this:
#navigation {
background: blue;
position: fixed;
height: 200px;
width: 100px;
top: 50%;
right: 50%;
margin-top: -100px;
margin-right: -480px;
z-index: 999;
}
Check the updated fiddle.
Note1: changing the height or width also requires changing the margins. So when the height or width is dynamic, it won't be aligned right.
Note 2: when the window resizes, the menu won't keep its place. It will flow over the content, you can't fix that, because the list is on a fixed position calculate on the viewport sizes, and not the contents.
I am currently building a website at http://grapevineiow.org/m_inspireblog.html. This website has a header and footer. The page I have linked to above features a blog in an iframe. Clearly the blog is far too long to fit into the page as one continuous piece of content, so scrollbars are required.
However, this is where there is a problem. I want to keep the scrollbars on the blog (so users can scroll through it), but I want the page to fill the window exactly, so the header and footer take up the minimum space needed. The header is fine, but the footer is being a problem.
I have tried:
Setting the height of the body and html to 100% in CSS.
Setting the height of the content to 100% in CSS, but that made the content fill the window.
Styling the footer as height:auto 0 in CSS.
...but none of these have worked.
I would like to be able to solve this problem using just CSS if possible, but I'm open to using HTML if needed. I would like to avoid Javascript.
Thank you in advance.
If you know the heights of the header and footer, you can achieve this by setting both top and bottom on the middle area like this:
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#header{
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #f09;
}
#content{
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
background: #f90;
}
#content iframe{
width: 100%;
height: 100%;
}
#footer{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #90f;
}
</style>
<div id="header"></div>
<div id="content">
<iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe>
</div>
<div id="footer"></div>