I tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>
Related
I'm using Nuxt.js and Bulma. I'm making navigation using Bulma tabs(https://bulma.io/documentation/components/tabs/).
I wanna insert Bulma dropdown(https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable). But it doesn't work in middle of Tabs.
I know who wanna use Bulma dropdown needs to use javascript, so I use it. But it doesn't work.
How can i fix it?
To get a dropdown working inside Bulma's tabs, you need to adjust the overflow CSS in the tabs div. I'm not sure why I had to set overflow-x and overflow-y to get this working properly, but I did.
When the dropdown is active:
overflow-x : visible;
overflow-y : visible;
When the dropdown is not active, reset to their defaults:
overflow-y : hidden;
overflow-x : auto;
Yes you can with a little amount of fiddling
There are mainly 2 problems :-
Problem 1
As bulma tabs container is flexbox, and the list of tabs are child of this flexbox, the dropdown will not be visible as it overflows out of flexbox container.
If you add overflow-y:visible to tabs container div, scrolling will happen which is not the behaviour we need
Solution
To fix this, the contents to be shown on tab selection should also come inside the tabs container as second child, so that dropdown button/link in list of
tabs has the space to show the dropdown when clicked/hovered.
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#content-child {
flex-grow: 1;
width: 100%
}
#list-child {
flex-grow: 0; //should be set to 0 as it will take up vertical space (it is set to 1 in bulma)
width: 100%;
}
Problem 2
When dropdown is used within bulma tabs, the anchor tags in dropdown gets styled by those specified for anchor tags in tabs.This is one of the main issue.
The dropdown shown thus will be styled very differently.
Solution
Bulma dropdown also allows us to insert div inside.
We can make use of this to overcome problem 1.
Just add this css for divs inside dropdown so as to make it behave like links.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
Complete solution can be seen below and you can change as required for your use case.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
#content-child {
flex-grow: 1;
width: 100%
}
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#list-child {
flex-grow: 0;
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bulma#0.8.1/css/bulma.min.css" rel="stylesheet" />
<div class="tabs is-boxed" id="tab-container">
<ul id="list-child">
<li><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
<li class="dropdown is-active">
<div class="dropdown-trigger">
<a class="has-text-right custom-padding" aria-haspopup="true" aria-controls="dropdown-menu">
Drop Down
</a>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">Dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<div class=" dropdown-item is-active">Active dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<hr class="dropdown-divider" />
<div class=" dropdown-item">With a divider</div>
</div>
</div>
</li>
</ul>
<div id="content-child">
content
</div>
</div>
Im creating a radial play button for my player And I use css flex for centering the play icon. Its working fine in chrome but not in safari browser.
In my css I have something like this:
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: 20px;
margin-top: 20px;
background-color: #circle-background;
border-radius: 50%;
border: 3px solid #192D48;
font-size: 50px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
i {
-webkit-align-self: center;
align-self: center;
color: black !important;
top: 0px;
left: 1px;
}
}
I already added display: -webkit-flex; to support flex in safari but unluckily it doesnt work and when I checked it in the debugger styles of safari there is no display: -webkit-flex; on it but space -webkit-justify-around appear.
but when I hardcoded it in style like this:
<div class='scr-button radial-progress'>
<div class="circle-gray"></div>
<div class="circle">
<div class="circle-white"></div>
<div class="mask full" ng-style="{'transform': currTime}">
<div class="fill" ng-style="{'transform': currTime}"></div>
</div>
<div class="mask half">
<div class="fill" ng-style="{'transform': currTime}"></div>
<div class="fill fix" ng-style="{'transform': currTime * 2}" ></div>
</div>
</div>
<div class="inset" ng-click="play()" style="display: -webkit-flex;">
<i ng-class="icon()"></i>
</div>
</div>
Its working fine, can someone explain me why it doesnt work when I put it on a class? Is it browser issue? Or Im doing it wrong?
Specs:
Less,
Safari Version: Version 8.0.8,
Angularjs
I am having trouble centering my navigation bar, I have tried display:inline-block and then align center like most posts suggest but it doesn't seem to be working.
HTML:
<!--Navigation-->
<div class="band navigation">
<nav class="container primary">
<div class="sixteen columns">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
CSS:
nav.primary{
display: table;
margin: 0 auto;
}
nav.primary ul, nav.primary ul li {
margin: 0px;
}
nav.primary select {
display: none;
width: 100%;
height: 28px;
margin: 21px 0;
}
nav.primary ul li {
display: inline;
float: left;
position: relative;
}
nav.primary ul li a {
display: inline-block;
line-height: 49px;
padding: 0 14px;
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
background: ##999999;
}
nav.primary ul li a:hover {
background: #2ecc71;
cursor: pointer;
}
Ok finally got it:
nav.primary ul li {
display: inline;
float: left; <---
position: relative;
Remove the float: left;
Since the navigation is the full width of the containing div, there is no need to mess with floats, the list items will line up with just display: inline;
I tried something else that works... It seems to work better than trying to build in something custom thus far in my experience with Skeleton... Although it produces a bit less pretty markup for the HTML, the rigidity of the final result works for me. Here is my code so that you can see what I did to achieve the desired effect:
<div class="row">
<div class="two columns offset-by-three">
Portfolio
</div>
<div class="two columns">
About
</div>
<div class="two columns">
Contact
</div>
</div>
What you can see here is that the skeleton framework allows for the columns to operate naturally and restack at lower resolutions without any extra code. The only tricky part really is setting up the offset on the left most item.
Have you tried nav.primary ul {text-align: center;}
As well as keeping the left/right margins to auto, this worked for me when I was using the skeleton framework.
My sticky footer with my fontawesome icons is displaying perfectly in all browsers, but in Safari, the links aren't working.
Here is my code:
<style>
h4 {
font-size: 1em;
color: #A0A0A0;
bottom: 15px;
position: relative;
letter-spacing: 10px;
}
.footer{
position: fixed;
left:0px;
width: 100%;
bottom: 0px;
height: 20px;
background: #404040;
padding-bottom: 25px;
opacity:0.95;
}
</style>
......
<div class="footer">
<h4>
<a href="https://twitter.com/">
<i class="icon-twitter icon-2x"></i> </a>
<a href="https://www.facebook.com/">
<i class="icon-facebook icon-2x"></i></a>
<a href="http://wordpress.com/">
<i class="icon-rss icon-2x"></i></a>
</h4>
</div>
Can anyone tell me why this doesn't work in safari? And how to fix it?
I just into this problem. I believe this is caused by safari giving the target no dimensions (i.e. 0px x 0px). If you force inline-block on the <i> element it should to work correctly.
Had the same problem.
I added to the icon's class
display:inline-block;
and it worked fine!
I want to create a header similar to facebook where position:fixed. and when you zoom-out the whole page centers itself and when I zoom-in the header also streches..
When I use position:fixed and zoom-in some contents disappear due to lack of space on the window..
<div id="header_line" ></div>
<div id="header">
<div id="heading_name" >Home </div>
<div id="heading_name" style="left:28%;">Advertisement Board</div>
<div id="heading_name" style="left:46%;">Advertise</div>
<div id="heading_name" style="left:60%;">Sign In</div>
<div id="heading_name" style="left:76%;">About Us</div>
</div>
<style>
#header_line{
position:fixed;
top:0%;
left:0%;
width:1370px;
height:7px;
z-index:20;
background-color:#F60;
}
#header{
position:fixed;
left: 0px;
z-index:20;
top: 7px;
width:1370px;
height: 30px;
background-color:#003;
border-bottom:thick;
border-bottom-color:#000;
box-shadow:2px 5px 5px 1px #033;
}
</style>