On this page: http://www.chronicallyhappy.nl/
I added a "footer-wrap" div to the "footer" div (in the footer.php of the Wordpress theme). Then in CSS I added a background image to the "footer-wrap" div. The problem: it keeps showing below the background color for the "footer" div. I tried adding "position:relative" and "z-index" values for both divs, but no luck.
This is the result I want to achieve: http://nl.tinypic.com/r/2hhdcwn/8
What am I doing wrong?
My CSS:
.footer-wrap {
padding-top: 19px;
background: url("../style/img/golfjes.png") repeat-x top left;
clear: both;
position: relative;
z-index: 5;
}
.footer {
width: 100%;
padding: 65px 0 31px;
border-bottom: 4px solid #C71A4E;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
position: relative;
z-index: 1;
}
Thank you so much!
Stefaan
you should put the ribbon in the footer, not wrapping it around, and position it top minus a few pixels. As you have the footer within the wrap, and it has a background color, it overlaps with its bg.
so what you need is:
<footer div with background color>
<ribbon div positioned a bit top minus>
</ribbon div>
<footer content>
</footer content>
</footer div>
Related
I created a doc page using Flare and forced breadcrumbs to stay fixed below the top nav. The page works as it is, but I want the div to stretch across the page.
Please see current design below:
Click to see example screenshot
I can stretch the div to 100% if I remove the min-width in the child div, but it stretches only to the right, while keeping the breadcrumbs where I want. Example below:
Click to see example screenshot
Or I can make it stretch 100% by adding left:0; on the parent div, but then the breadcrumbs move out of place. I can use margin-right or right to position the div to desirable areas, but div does not sync with the rest of the content when resizing browser.
Try this:
*{
padding:10px;
}
.parent {
margin:auto;
width:300px;
background-color:red;
}
.breadcrums {
background-color:blue;
}
.full-width {
background-color: green;
position:relative;
width:100vw;
left:50%;
transform:translateX(-50%);
}
<div class="parent">
<div class="breadcrums">breadcrums</div>
<div class="full-width">full-width element</div>
</div>
The important part here being position, width, left and transform on .full-width.
Applied the css " left " property if that div has "absolute" position.
Thank you for your replies. Here are the html and css:
Html:
<div class="crumbs_wrapper">
<div class="MCBreadcrumbsBox" >
<span class="MCBreadcrumbsPrefix">You are here:</span>
B1
<span class="MCBreadcrumbsDivider"> B2 </span>
B3...
</div>
</div>
CSS:
div.crumbs_wrapper
{
position: fixed;
float: none;
width: 100%;
z-index: 1;
}
div.MCBreadcrumbsBox{
padding-bottom: 5px !important;
padding-top: 18px !important;
padding-left: 10px !important;
float: left;
position: relative;
margin-top: -12px;
background-color: #FFF;
z-index: 999;
width: 100%;
max-width: 104.5em;
box-shadow: 1.5px 1.5px 15px #888888;
}
Th tool I use is Flare, which does not have the fixed breadcrumbs feature. Breadcrumbs are automatically generated; I only changed the CSS values and added an extra div with the .crumbs_wrapper class. Other classes are automatically generated by the software.
If I remove the max-width the div only stretches to the right, and if I add left: 0; to the parent div, the breadcrumbs move to the left. I can bring the breadcrumbs to the position where I want using margin, but it does not stay fixed when the browser is resized. Also, the paddings and margin-top are used to keep the breadcrumbs below the top nav and aligned with the rest of the content.
So I have an image which isn't set as the background, but takes up the entire width and almost all of the height. I want this image to remain in it's position and as the user scrolls, the content below scrolls over the top of the image.
I tried using:
position: fixed;
z-index: -1; /* Or another value */
but neither or together worked.
What I have without the position or z-index applied: https://jsfiddle.net/hhcvmrfx/
I want the div container to appear under the image and only overlap the image when the user scrolls.
To overlap the container below only when the user scrolls down, you'll need to set a padding-top value, to your parent .container, equal to or less than the height of the fixed image in question.
Then apply your background colour to the nested div element instead.
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
overflow-x: hidden;
}
/* Images */
#head-banner-img {
border-bottom: 5px solid #222222;
position: fixed;
}
/* Container Content */
.container {
width: 100%;
height: 500px;
background-color: transparent;
padding-top: 947px;
font-size: 30px;
text-align: center;
position: relative;
}
.container > div {
background: #2c2c2c;
height: 100%;
padding: 50px;
box-sizing: border-box;
color: white;
}
<img src="http://www.thestoryboardz.com/images/background.jpg" alt="Munch Banner" id="head-banner-img">
<div class="container">
<div>Hello</div>
</div>
Set the div's image as a background image instead and give it:
background-attachment: fixed
On this page http://goo.gl/m2s1dA
I want to bring the whole header layer "header-container" as below on top of everything and anything inside of "container-site" should appear behind the header when scrolling.
Below is my code.
Full width div
.header-container {
position: fixed;
width: 100%;
z-index: 10000;
}
Fixed width div to center align header and some styling
.header-wrapper {
margin-bottom: -1px;
border-radius: 0;
border-bottom: 1px solid #cc6666;
height: 263px;
position: relative;
display: block;
width: 1140px;
margin: 0px auto;
}
Then body of the page
.container-site {
margin: 0px auto;
width: 1140px;
padding-top: 280px;
}
Currently only the headings (h1, h2, h3) are appearing behind the header. I am using Bootstrap.
From what I understand you want the header to be above all content and fixed to the top of page. In your code, the header-container is inside a fixed parent:
<div class="glass">
<div class="header-container">
...
</div>
</div>
what you have to do is simply add z-index to the parent of the header like this:
.glass { z-index: 1; }
This should fix your problem however, your header is transparent and that creates visual problems when text is under the header elements...
Header is on top but can't figure out it because it is transparent. give .header-container {background:#fff} and see how it looks like.
I have an implementation of a sticky footer. I actually have the "sticky" stuff working. But now I want to add a interior "content-box" div which will span the entire screen.
Please refer to this page.
What is needed to have the white area be the same height as the cyan area?
It's not possible in this setup,
but what you can do is apply a 1px height background image with background-repeat:repeat-y; on the body or parent container, to simulate the white background of the .content-box div(including the left and right borders).
add
background:url(simulatewhitecontainer.png) repeat-y center top;
to div.main
and remove
border-right: 1px solid #B0B0B0;
border-left: 1px solid #B0B0B0;
from div.content-box
Update: Check this fiddle: http://jsfiddle.net/gqSau/ for an example
using the following css for the content
.content {
padding: 0px;
position: absolute;
bottom: 50px;
top: 70px;
right: 0px;
left: 0px;
}
<div id="header"> Header content </div>
<div id="content"> Content </div>
#header {
background-image: url("/Content/Images/bg.png");
background-repeat: repeat-x;
float: left;
height: 45px;
margin: 0;
width: 960px;
z-index: 10;
}
#content {
background-image: url("/Content/Images/separator_shadow_both.png");
background-repeat: repeat-y;
float: left;
margin: -4px 0 0;
padding: 0 10px;
width: 940px;
z-index: 9;
}
Header div have background that have 45 px height - 41 pixel solid color and bottom 4px is transparent shadow. I want that shadow to show above the content. I put content div margin top -4px to crawls under header div, but he appears above instead below of div1. z-indexes are set different... Is it z-index problem or header background can't be positioned above content?
Thank you
The z-index property is only relevant for positioned elements. Solution: Set position: relative on #header. You don’t even need the z-index since positioned elements always render on top on non-positioned ones.