So I'm trying to make a top menu bar in a fixed position.
The problem is while everything looks alright when scrolling, all images, divs and all that goes behind the div when scrolling, the text, on the other hand, is still in front of the menu.
I've made sure that the text is loaded in before the div in code but yet it goes in front like this:
https://i.gyazo.com/4ac5dfd1d316c47a80a6991fc286e0b4.gif
The code is quite messy since I'm quite new to all this but I'll try to show the important parts of the code.
HTML:
<div class="logotext">
<h1>Rustic Café</h1>
</div>
<div class="topwood"></div>
CSS:
.logotext
{
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 41%;
width: 100vw;
height: auto;
z-index: 998;
font-size: 83px;
font-family: "Satisfy", cursive;
text-shadow: 10px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.topwood
{
width: 100%;
height: 4.2vw;
top: 0vw;
left: 0vw;
position: fixed;
background-color: rgb(236, 236, 236);
box-shadow: 0 0 3px;
}
The problem is due to 'z-index' property in CSS. your top bar menu z-index should be greater than the text.
for example:
.topBar {
position: fixed;
z-index: 999
}
.text {
position: relative;
z-index: 998;
}
Why do .logotext need a z-index of 998?
Anyway, All you need is to add a higher z-index value to your header.
Related
I'm puzzled! The green menu is stacked behind the white header with search field. This is needed to display the page correctly, but now the green menus links become unclickable.
The white header is position: fixed;. The green menu is not fixed but has z-index -1 because apparently this is the only way to stack it behind the white header.
How do I make the links clickable?
Edit:
I tried z-index: 99; aswell as z-index: -99; for both elements. Literally the only way to stack the green menu behind the white header is to use a negative z-index number for the green menu.
Edit 2:
I also tried using opacity: .99; for the white header but no results.
.header {
margin: 32px 0 0 0;
padding: 0;
width: 100%;
height: 75px;
background-color: rgba(255,255,255,0.75);
border-top: 2px solid rgba(55,175,75,1.00);
border-bottom: 5px solid rgba(55,175,75,1.00);
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
position: fixed;
z-index: 1;
}
#menu {
position: fixed;
margin-top: 107px;
min-height: 40px;
width: 100%;
background-color: rgba(55,175,75,1.00);
border: 1px solid rgba(55,175,75,1.00);
border-radius: 0;
z-index: -1;
}
Set z-index for .header as 2 and for #menu as 1
I'd like to have text appear on the top of a div that has a border that also has a white background so you don't see the border line going through the text. I've tried adding z-index to the text but I believe since position: relative it doesn't matter. I'm also open to other suggestions as to how to accomplish and would prefer not to use a fieldset and legend.
Fiddle
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
z-index: 1000;
}
<div id="why">
No line behind me, please!
</div>
<div id="large-div-text">
Large div text
</div>
You have the right idea about setting a z-index. However, note that in order for a z-index to apply, you need to specify a position property other than the default of static. That will have your #why element sit on top. From here, it's just a matter of giving it a fixed width (along with margin: 0 auto for alignment) so that the rest of the border gets shown.
This can be seen in the following:
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
position: relative;
z-index: 1000;
width: 250px;
margin: 0 auto;
}
<div id="why">
No line behind me, please!
</div>
<div id="large-div-text">
Large div text
</div>
Note that the width property denotes just how much of the border is shown - feel free to adapt to suit! If you want it to perfectly wrap around the text, I'd recommend using a <span> tag instead of a <div>.
Actually, you don't need to use absolute or z index something.
The div#why is block, you dont want to make it block, instead make it inline-block so it consume it's normal width, not 100%.
The problem now is how you can center the div#why, i used position:relative, and transformX.
Cheers!
#large-div-text {
padding: 20px;
border: 1px solid rgba(64,189,233,0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
z-index: 1000;
display: inline-block;
transform: translateX(-50%);
left: 50%;
position: relative;
}
<div id="why">
No line behind me, please!
</div>
<div id="large-div-text">
Large div text
</div>
You must use a position attribute for z-index to work. And you can use a span element to set the background of the text. The span is an inline element ulike div, and will change its width depending on the content.
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
z-index: 0;
}
#why {
text-align: center;
z-index: 1000;
position: relative;
}
.whitebg {
background-color: white;
padding: 0.5em;
}
<div id="why">
<span class=whitebg>No line behind me, please!</span>
</div>
<div id="large-div-text">
Large div text
</div>
You can simply add some margin
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
z-index: 1000;
margin: 10px;
}
<div id="why">
<span class=whitebg>No line behind me, please!</span>
</div>
<div id="large-div-text">
Large div text
</div>
Well I want to add kind of a transparent, blurred out background behind my text so the image that my text is on still can be visible. Kind of like this....
But my problem is that even though the transparent background appears as planned, it goes on "forever" to the right until it hits the edge of the page, instead of stopping where the text ends. Any thoughts how I can fix that?
CSS
.text {
position: absolute;
z-index: 100;
color: white;
width: 100%;
top: 300px;
left: 10px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.7);
}
You have width: 100%; in your styles. Remove it and make it width: auto;. And that's CSS not HTML!
.text {
position: absolute;
z-index: 100;
color: white;
width: auto; /* Epic Miss */
top: 300px;
left: 10px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.7);
display: inline;
}
Also giving display: inline would help.
I'm trying to make the sidebar for my theme match the main content, in that there's a solid background with a transparent border. I can make them work individually, but when I try to do both it doesn't work right. Here's the snipet of code that's been causing the problem:
#sidebar {
width: 300px;
background-color: #A3A3CC;
/*border-style: solid; border-width: 15px; border-color: rgba(255, 255, 255, 0.4);*/
position: fixed;
left: 60px;
top: 90px;
height: 490px;
margin-left: 30px;
}
I am aware that the border code is noted out, and that's because the border code and the background color code work fine individually, but when I have both at the same time, I get this.
Does anyone know how I can fix this? I just want to have a semi-transparent background under a solid one to make a nice border effect.
You can use a box-shadow instead of a border.
JSfiddle Demo
CSS
#sidebar {
width: 300px;
background-color: #A3A3CC;
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4);
position: fixed;
left: 60px;
top: 90px;
height: 490px;
margin-left: 30px;
}
Since the border is rendered on top of the background of the div, they are stacking and not giving you what you want. You could wrap another div around it, and use that as your border:
JSFiddle
HTML
<div id="outer"><div id="sidebar"> </div></div>
CSS
#sidebar {
background-color: #A3A3CC;
width: 300px;
height: 490px;
}
#outer{
padding:15px;
background: rgba(255, 255, 255, 0.4);
position: fixed;
left: 60px;
top: 90px;
}
I'm working on a creative project whereby I want to add 'triangles' to box elements to get a speech bubble effect and still apply an opacity to each element as shown below:
I can get the blocks to display correctly with a 1px boarder on the right and bottom of each element. This, however, does not include the arrows on the heading element. When I add the arrows, using .heading:before, the result is as shown below:
As you can see, the original border remains, breaking the arrow and its corresponding element.
My HTML is as follows:
<li class="heading">
<div class="text_contain_head">
<h1>Heading</h1><p>Subheading</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 1</h2><p>Description</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 2</h2><p>Description</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 3</h2><p>Description</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 4</h2><p>Description</p>
</div>
</li>
and here's the CSS for .options:
.options {
position: relative;
padding-bottom: 25%;
height: 0;
width: 25%;
background-color: rgba(0, 0, 0, 0.25);
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
and here's the CSS for .heading:
.heading {
position: relative;
padding-bottom: 25%;
width: 75%;
background-color: rgba(0, 0, 0, 0.6);
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 40px;
padding-right: 40px;
float:left;
}
.heading:before {
content: "\0020";
display: block;
border: solid 20px transparent;
border-right-color: rgba(0, 0, 0, 0.6);
position: absolute;
top: 50%;
right: -40px;
margin-top: -20px;
z-index: 1002;
transform:scale(1,1.5);
-ms-transform:scale(1,1.5);
-webkit-transform:scale(1,1.5);
}
P.S. I use :after to add a white triangle with a 1px offset underneath the :before to replicate the border around the triangles.
In the end, I want to be able to keep the elements' opacities (due to the background image) and still be able to 'remove' the original border where the arrows overlap.
I'm stumped, as such any and all advice would be most apreciated
here is a jsfiddle of what I have so far: http://jsfiddle.net/N2nZ6/1/
I have put up a fiddle of my own: http://jsfiddle.net/Pevara/8WBcQ/
It was not easy, but i think i got away with it, but with some limitations:
- I had to add two empty nodes inside your .heading for the arrows. I know it isn't pretty, but I tried without them and just couldn't get it to work.
- I had to set a fixed width. It might be possible to do with percentages, but as it requiers very exact positioning, I did not even try... (percentages and exact postioning are a no go in my experience)
How does it work:
- I turn the extra nodes into a square and rotate them 45deg to make them look like an arrow point
- I position them absolute over the edge of the .heading, to cover up the border.
- I set them to overflow hidden to prevent the :after and :before overflowing
- I set the background image on the :before, counter rotate 45deg, and position exactly to line up with the background image of the ul
- I add another :after with a the same semi-transparent background color as the .heading to make the backgrounds match exactly.
It is not exactly clean, and it will take some fiddling with the positioning, but it works (in chrome, other browsers might need some prefixes). I don't dare to look at the result in older IE's. Might not be useable in a real life website, but as a proof of concept...
In real life I would probably go for a sprite image with the borders and arrows already in place, and position the li's on top of them.
And because SO insists, here is a part of the css:
.arrow-down {
position: absolute;
display: block;
overflow: hidden;
width: 50px;
height: 50px;
-webkit-transform: rotate(45deg);
top: 200px;
left: 300px;
background-color: rgba(0, 0, 0, .5);
margin-left: -25px;
z-index: 5;
border: 1px solid #fff;
border-left: none;
border-top: none;
}
.arrow-down:after {
content:' ';
display: block;
width: 300px;
height: 300px;
-webkit-transform: rotate(-45deg);
background-repeat: no-repeat;
background-image: url(http://www.placekitten.com/900/600);
background-position: -114px -77px;
z-index: 1;
position: absolute;
top: -100px;
left: -150px;
}
.arrow-down:before {
content:'';
background-color: rgba(0, 0, 0, .5);
z-index: 2;
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
I think that achieving this effect is a bit complicated which can be done by making the triangle opaque and keeping the same background image(using appropriate position) for the triangles which would cover the border.