this is the website I'm working on: http://labbrini.netsons.org and on its left side I have a div (#puntate) that should be on top of the javascript of the big lips logo (#logo) that shows up over everything. Of course I need the links of #puntate being clickable even when logo shows over it. z-index doesn't works for this. Can somebody help me with this positioning?
While inspecting your code in my browser, I saw that you were using px for z-index.
Dont give any units for z-index
In your CSS, replace,
z-index: 900px;
with
z-index: 900;
As, stated in the docs
The z-index property specifies the z-order of an element and its
descendants.
And, order doesnt have a unit. Thus no need for any units. Any element with a higher z-index will be on top of other elements.
Thank you all. The value to the z-index was my stupid mistake. But I needed to tinker a little bit more in order to get what I wanted. I created another div #left2
<div id="left"></div>
<div id="left2"><div id="puntate"><ahref="http://labbrini.netsons.org/Labbrinip1">
Labbrini p.1 - Lorem ipsum dolor sit amet</a><br/>
</div></div>
so that my div in question (#puntate) belongs to the new one and I set the background-color to transparent in order to see below the old one with the color transition:
#left2 {
background-color : transparent;
position:fixed;
display: table;
z-index:1000;
width:50%;
height:100%;
position:fixed;
bottom:0;
left:0;
}
and of course the z-index of #puntate is set to an higher value than #logo
I'm sorry for not having posted previously the code.
Related
This is my first question.
My code is here on codepen.
I've been tinkering with Bootstrap, CSS, and jQuery in this code in an attempt to place a full-width background image behind the last featurette(From Bootstrap demo) item on my page. I'm guessing the problem stems from the bootstrap container class, but I am hoping for a work around.
I've enclosed the featurette with a div tag, applied an ID of "background1" to it, then used CSS in my attempt to set position to absolute and left:0.
This gets me the position I want (except I'd also like the background image to be responsive as in Bootstrap img-responsive), but the childen? tags inherit the opacity and positioning.
I've tried z-index:-1 unsuccessfully. What also seems to be happening is that the low opacity has allowed the footer to creep up into my last featurette item as if opacity also messes with the z-index.
So my questions are:
How can I stretch a BG image across the back of the featurette or any other set of grouped items within DIV tags?
How can I make this BG image responsive with Bootstrap or apply the img-responsive class through CSS?
Happy New Year! Thanks for reading!
Don't wrap your content. Use <div id="background1"></div> right before the content, and this:
#background1 {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.3;
left: 0;
background-size: cover;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg/800px-Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg");
}
I have an on boarding tour in at my.bonify.de. It offers a similar experience to introjs.
We implemented this in a very ugly way using a cutout div with a very large box-shadow. We would like to improve upon this and use an overlay like introjs since it seems to have much better performance than our dirty hack.
Having read this, I do not understand how introjs works since the element to be highlighted should definitely be in a lower stacking context.
I have tried replicating the behaviour with our own onboarding but I can not get the element in the page to rise above the overlay.
I would like to know how introjs achieves this, I thought that this block of code was the secret but when I put a debugger the class is not added.
Easy, you just put a relative element with higher z-index on top of a fixed element. Sample classes:
.fixed-elem {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
background: rgba(0,0,0,0.75);
}
.relative-elem {
position:relative;
z-index:10;
}
Here is a working fiddle:
https://jsfiddle.net/7ergcfvq/1/
Look at demo step 1 of intro.js, the <h1>Intro.js</h1> element has .introjs-relativePosition and .introjs-showElement, so it got position:relative and z-index:9999999!important.
And the <div class="intros-overlay">'s z-index 999999, smaller than <h1> & <div class="introjs-helperLayer">
The issue is at: http://www.tenyeartwilight.com/
There is a jQuery slideToggle function on the second paragraph of the main section of the page (which is just a sandbox for me to learn). It works, but the enclosed text shifts from a left-align to a center-align and I can't figure out how and why, and I know this has got to be simple. The background corners change also, and I am not sure what's getting inherited/"de-herited".
I don't mind cruelty as long as I understand the solution. Thanks.
p.s. - the text is an excerpt copied from Inside the Microsoft Build Engine: MSBuild and Team Foundation Build by Sayed Ibrahim Hashimi and William Bartholomew.
EDIT: My web programming level should be pretty obvious from my question. I understand the broad strokes, but am still breaking down the details.
It is not only centered when it collapse. It is centered all the time. The reason why it looks like its centered is because the second paragraph got covered by left menu.
when it collapse, jQuery set the width of the second paragraph to a right amount which is just wide enough to show the left side of the ul.
Add this css to your code to see what i mean.
#nav{
opacity: 0.5;
}
EDIT: Responsive css and restructure for better readability
Move footer out of section. It's easier to manage and make scene to ours who read your code.So inside <body>you have
<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>
on the same level
Then in css you will have
#nav
{
width: 18%;
padding: 1%;
float: left
}
#section
{
width: 78%;
padding: 1%;
float: right;
}
This sounds like a stupid question but I cannot figure an easy way of doing it. Let us say that I have a fixed-width Div with the string ABCDEFGHIJ as its content. If I reduce the width it will stop showing HIJ or whatever from the right side. I want the visibility of the content from the left side getting impacted. So, let's say that the div has a width of 100px, then
$(div).css('width':'50px');
should not impact the display of EFGHIJ, for example.
Yes, I could have an inner div and shift its position to the left, for example, by the amount of width reduced. Is there a shorter way of doing this?
Thanks
To Hide the beginning letters but not the last letters, you need to change the direction of the letters using css direction: rtl.
and also to hide the letters, you should mention overflow: hidden and some width to the container.
Working Fiddle
One solution is to use a wrapper and CSS positioning:
jsFiddle example
<div id="outer">
<div id="inner">ABCDEFGHIJ</div>
</div>
#outer {
position:relative;
overflow:hidden;
border:1px solid #999;
width:50px;
height:20px;
}
#inner {
position:absolute;
right:0;
}
I am applying style qualities to a div containing external javascript, and they seem to be ignored by the browser. The first div works correctly.
http://jsfiddle.net/TxWN3/2/
<div style="text-align:center;">Working center text</div>
<div id="btc-quote" style="text-align:center;"></div>
<script type="text/javascript" src="//cdn-gh.firebase.com/btcquote/embed.js"></script>
The content of the div class="btc-quote" might have some css code not wanting it to center. (I have not read all that code from BTC) To workaround this, you can make the div itself centering, not the content.
A simple trick to do this is add the following css to the div:
width:212px;
margin:auto;
This is a nice workaround found here
If you want to center it, first give it a width and then margin:0 auto:
<div id="btc-quote" style="width:212px;margin:0 auto"></div>
To center your included div, add this CSS:
.btc-box {
margin:0 auto;
}
jsFiddle example
The text-align:center; CSS property is not used in the way you are assuming.
If you check this fiddle, you will see that the default width of a div is the width of the container, and so when you center the text it appears the div is centered. However this is not the case.
To center a Div you can use the Position CSS property :
Add the following CSS attributes :
position:absolute;
left:50%;
margin-left:-106px; /* Half of the width of the div */
And see the following fiddle for the Second Div being center aligned
http://jsfiddle.net/Nunners/TxWN3/7/