I have some html and while things are loading I have a <div> that display while it loads, when it is loading currently the loading appears above everything, but I want the header to be above the loading screen. Here is the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="loading">
<div id="loading-container">
<h1 id="loading_text">Loading...</h1>
</div>
</div>
<header>
<a id="logo" href="user_profile.html">
<h1 id="name">Name</h1>
<h2 id="hello">Hello</h2>
</a>
<nav>
<ul>
<li>Profile</li>
<li>Info</li>
<li>Specials</li>
<li>Social</li>
</ul>
</nav>
</header>
</body>
</html>
And here is the css
header {
float:left;
margin:0 0 30px 0;
padding:5px 0 0 0;
width:100%;
z-index: 102;
}
#logo {
text-align:center;
margin:0;
}
h1 {
font-family:'Nunito', 'sans-serif';
margin: 15px 0;
font-size:1.75em;
font-weight:normal;
line-height:0.8em;
}
h2 {
margin:-5px 0 0;
font-size:0.75em;
font-weight:normal;
}
ul {
padding: 0 0;
}
#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
background: rgba(255, 255, 255, 0.5);
z-index: 99;
}
#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0);
z-index: 99;
}
#loading_image {
display: block;
margin: auto;
z-index: 100;
}
#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle
}
As you can see I set the z-index of the header higher than everything else but it is still below the loading screen here is a JSBin with a running example, in the example I show the loading screen for 3 seconds.
How can I get the header above the loading screen?
Thanks
z-index woks by position. Add position:relative to the header.
Point, Note:
Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).
JSbin
Use this on the header tag:
position: relative;
this one will also work but could change the rest of the html, I don't know what else you have on it.
position: absolute;
just add in the header{}
position:absolute;
top:0;
If I've got the question right this should do what you need.
Related
I put an image in a div and somehow it's not part of the body thus made my footer unable to be at the bottom of the page. I read in here that i must make img position absolute, but it didn't change anything.
I just want my footer to be at the bottom of the page.
I tried to change the position of the image to be inside div and outside div, inside another div and so on, but still my footer wont go to the bottom.
.flex-container {
display: flex;
align-items: center;
}
.text-box {
padding-left: 55px;
font-size: 25px;
font-family: georgia;
padding-right: 50px;
}
.flex-container img {
position: absolute;
max-width: 100%;
height: auto;
}
.hedding-position {
padding-left: 10px;
}
.bakgrundsbilde {
background-image: url("https://wallpaperaccess.com/full/856733.jpg";); /*bilde fra google */
height: 675px;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
html {
scroll-behavior: smooth;
}
footer {
line-height: 100px;
position: relative;
background: rgba(28, 32, 36, 1);
bottom: 0px;
width: 100%;
margin-left: 0;
margin-right: 0;
height: 100px;
text-align: center;
}
<!DOCTYPE html>
<html lang="no">
<head>
<title>Min website</title>
<link rel="stylesheet" href="css/meny.css">
<link rel="stylesheet" href="css/odin.css">
<link rel="shortcut icon" type="image/png" href="bilder/favicon.ico">
<style>
body {}
/*scrollbar utsene lånt ifra w3school. link: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: white;
}
::-webkit-scrollbar-thumb {
background-color: lightgray;
}
::-webkit-scrollbar-thumb:hover {
background-color: gray;
}
</style>
</head>
<body>
<!--bakgrundsbildet -->
<div class="bakgrundsbilde"></div>
<nav>
Hjem
Profil
Faginteresse
Hobby
Verk
Kontakt
<a style="float:right;" href="#bunn">Til bunnen</a>
</nav>
<br>
<!--skygen til bilde er tat ifra w3schools https://www.w3schools.com/css/css3_shadows_box.asp-->
<div class="flex-container">
<img style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);" src="bilder/chair.jpg" alt="Odin" align="right">
<div class="text-box">
<div class="hedding-position">
<h1 style="font-size: 50px; text-align: center; font-family: garamond;">Hei</h1>
</div>
<p>Jeg hetter Odin, jeg er student på informasjonsteknologi og mediaproduksjon. </p>
<p>Detter er min personlige website som inkludærer min profil, faginteresse, hobbyer, medier og kontakt. </p>
<p>Jeg bor på Sandnes her i Hadsel.</p>
<p>Jeg flyttet tilbake etter å ha bodd på Høle i noen år.</p>
</div>
</div>
<br>
<footer>
This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.
</footer>
<!-- <footer id="bunn">
<p> copyright 2023</p>
</footer> -->
</body>
</html>
Add bottom: 0; like this:
.flex-container img {
position: absolute;
bottom: 0; /* Added */
max-width: 100%;
height: auto;
}
EDIT
Of course, that didn't work. Looking at the accepted answer, I see that I wasn't even targeting the footer. When I was answering your question, I looked at the code and .flex-container img was the only one with position: absolute;. Consequently, I suggested that you add bottom: 0; to the .flex-container img.
You set position: relative; to the <footer> which will not push the footer to the bottom no matter what you do. So, set position: absolute; and bottom: 0; to the footer(!). Also, set position: relative; to the parent element.
try this code. regardless of the content, the footer must remain at the bottom
body {
padding:0;
margin: 0;
position: relative;
min-heigth: 100vh;
}
footer {
position: absolute;
background: rgba(28, 32, 36, 1);
bottom: 0px;
width: 100%;
margin-left: 0;
margin-right: 0;
text-align: center;
}
I'm finishing a webpage using wordpress as a CMS. and my client asked me to put an image/button at the very top of the page.aligned to the main navigation menu.
That's OK, I did it but what happened is this:
when I use different screen resolution, the buttons do not stay aligned with the very top of the page
I've tried to use "Position: fixed", but with that, the buttons move with the page and I want them to stay at the top of the page and don't scroll along with the page.
How can I do that? Can someone help me? Thanks!!!
.buttons {
position: absolute;
left: 85%;
z-index:905;
margin-top:0
}
.buttonLang {
position: relative;
z-index: 910;
}
.buttonZone {
position: relative;
z-index: 915;
top: -107px;
left: 100px;
}
.selectLang {
display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,1);
}
#buttonLang:hover img {
opacity: 1;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: /*#2893CC;
*/#FFFFFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
padding: 12px 16px;
z-index: 1;
font-family: Calibri;
}
.dropdown:hover .dropdown-content {
display: block;
line-height: 200%;
}
</head>
<body>
<body bgcolor="#E1E1E1">
<div class="buttons">
<div class="buttonLang">
<div class="dropdown">
<img src="http://www.jourdan.org.br/wp-content/uploads/button-lang.png" alt="" title=""/>
<div class="dropdown-content">
<img src="http://localhost/wp-content/uploads/2016/10/flag-bra.png" width="30"alt="" title=""/> Português</br>
<img src="http://localhost/wp-content/uploads/2016/10/flag-esp.png" width="30"alt="" title=""/> Español</br>
<img src="http://localhost/wp-content/uploads/2016/10/flag-usa.png" width="30"alt="" title=""/> English
</div>
</div>
</div>
<div class="buttonZone">
<img src="http://www.jourdan.org.br/wp-content/uploads/button-sgvzone.png" alt="" title=""/>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
Add this to your CSS:
.post > .post-content > .wpb_row > .wpb_column {
position: static;
}
.buttons {
position: absolute;
right: 10%;
top: 0;
z-index: 905;
margin-top: 0px;
}
However I don't understand why you don't move the buttons HTML into the header. When you resize the browser, the buttons overlap the navigation and this can't be corrected with just a few lines of CSS.
Try position: absolute; instead. Also top: 0px; should keep it stuck there.
body{position :relative;} .button{position:absolute; top:0px; left:10px;}
Align them to the right instead of left :)
.buttons {
position: absolute;
right: 10%; /* for example, adjust how you need */
z-index:905;
margin-top:0
}
I want to make like this box shadow its from a psd file :
i have made a screenshot :
http://s3.postimg.org/k59bfo5s3/boxshadow.png
i don't know how i can make that by code of css
but my other idea I thought also to extract the shadow from PSD file like that
and moove it to my html page but i don't know where i can place the code for image of shadow
http://jsfiddle.net/4pbq2tx8/11/
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
<div class="title">title</div>
</div>
</body>
</html>
css :
#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png) ;
/* my probleme is here */
box-shadow: url(http://s14.postimg.org/7tmkd1hfl/shadow.png);
}
body {
background-color: #c7c7c7;
}
.title {
position:absolute;
width:902px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border:solid 0.5px #686868;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}
1/
Try with that:
#carousel:after {
position: absolute;
z-index: 9999;
bottom: -100px;
content: " ";
width: 100%;
height: 100px;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
JSFIDDLE LINK
2/
If you want the shadow to be exact length of 1100px you need to change few things:
.wrap {
position: relative;
width: 1100px;
}
.wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
And wrap your #carousel in .wrap
<div class="wrap">
<div id="carousel">
...
</div>
</div>
JSFIDDLE WITH WRAPPER
Your shadow looks like a 3D object, so take advantage of that, and use a 3D pseudo element with a box shadow:
#carousel {
-webkit-perspective: 500;
-webkit-perspective-origin: 50% 50%;
}
#carousel:after {
content: "";
position: absolute;
left: 20px;
right: 20px;
bottom: -45px;
height: 50px;
background-color: #888;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(80deg);
box-shadow: 0 0 20px 15px #888;
}
jsFiddle
Tested on chrome. Should work on Safari too. For other browsers, you will need add their vendor prefixes, -moz-, -ms-.
Old browsers will not support 3D transformations, and that's ok. No shadow will appear.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Also, you don't need, and should not use images. You can replicate the same effect with linear gradients.
I was doing previous and next experiments like facebook, as we do a hover on image it will show previous and next icons. I modified the icons a little bit using simple CSS. but only thing i am missing here is the correct position of the navigation div's.
I want them in the middle of image no matter if the image is 600*600 or 1024*800.
i tried these, but didnt make any progress -
var maskHeight = ($('mainOne').height() - 50);
$('#hoverP').css({top:maskHeight}).show();
$('#hoverN').css({top:maskHeight}).show();
here is sample test case, which includes everything related to problem, Please Help.-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="./jQuery.min.js"></script>
<style>
.imgHover {
display: inline;
position: relative;
}
.imgHover .hoverP {
display: none;
position: absolute;
left: 3px;
top:-200px;
z-index: 2;
}
.imgHover .hoverN {
display: none;
position: absolute;
right: 0px;
top:-200px;
z-index: 2;
}
.prev_big,.next_big {
background-color:rgba(66,28,82,0.4);;
border:2px solid rgba(255,255,255,0.7);
color:#FFF;
font-size:78px;
font-weight:700;
width:30px;
height:200px;
line-height:200px;
-webkit-transition:.4s all;
-moz-transition:.4s all;
-o-transition:.4s all;
transition:.4s all;
text-shadow:0 1px 0 #FFF;
z-index:3;
text-decoration:none;
-moz-transition-duration:.4s;
-webkit-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.prev_big {
border-bottom-right-radius:15px;
border-top-right-radius:15px;
margin-left:-3px;
padding:0 20px 0 0;
}
.next_big {
border-bottom-left-radius:15px;
border-top-left-radius:15px;
right:0;
padding:0 5px 0 15px;
}
.prev_big:hover,.next_big:hover {
color:#FFF;
background:#732C7B;
padding-top:140px;
padding-bottom:140px;
}
</style>
</head>
<script>
$(function() {
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.95).end().children(".hoverP").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hoverP").hide();
}
);
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.95).end().children(".hoverN").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hoverN").hide();
}
);
});
</script>
<body>
<div class="imgHover">
<div class="hoverP"><a class="prev_big" href="page1.html" title="View Previous Page"><</a></div>
<img id="mainOne" src="./oneB.jpg" alt="">
<div class="hoverN"><a class="next_big" href="page3.html" title="View --Next-- Page">></a></div>
</div>
</body>
</html>
Why you need jQuery, bunch of styles with filled markup? I've made this from complete scratch and you see if it's useful
Demo
On the other hand you can use transitions for smoothness - Demo
<div class="wrapper">
<img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="bar">PreviousNext</div>
</div>
CSS
div.wrapper {
position: relative;
display: inline-block;
}
.bar {
opacity: 0;
background: rgba(25,25,25,.5);
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
}
div:hover .bar {
opacity: 1;
}
.wrapper a {
position: absolute;
}
.wrapper a:nth-of-type(1) {
left: 0;
}
.wrapper a:nth-of-type(2) {
right: 0;
}
I've a problem with a website I'm building.
I've a menu containing 2 links (called "Default" and "Test") into list items but in Firefox I can't click them.
In IE they works: I think is a z-index problem of items on the page but I can't solve it.
<!DOCTYPE html>
<html>
<head>
<style>
.sezup li.current{
color:#067d2c;
position:relative;
z-index:20;
}
.sezup a, a:hover{
color:#067d2c;
position:relative;
z-index:20;
}
.header{
position:relative;
top:0px;
}
.sezup {
margin: 0 auto;
padding: 0 0 0 75px;
width:800px;
position:relative;
z-index:20;
}
#lineaup {
background: url("../Images/sfondobarraup.png") repeat scroll 0 0 transparent;
height: 16px;
margin: 55px 0 0;
position: relative;
z-index: 0;
top: -25px;
left: 0px;
}
#lineaup li {
bottom: 6px;
float: left;
margin: 0 10px;
padding: 2px 15px;
position: relative;
}
.loghi {
margin: 0 auto;
padding: 20px 0 0;
position: relative;
top: -45px;
width: 1000px;
height: 97px;
border:1px black solid;
}
#logo {
position: relative;
top: -20px;
float:left;
}
#calciatore {
position: relative;
float:right;
top:-50px;
}
#erba {
background: url("../Images/erba.png") repeat scroll 0 0 transparent;
height: 65px;
position: relative;
top: -110px;
z-index: 0;
border:1px black solid;
}
</style>
</head>
<body>
<div class="header">
<div id="lineaup">
<div class="sezup">
<ul>
<li class="current">Default</li>
<li>Test</li>
</ul>
</div>
</div>
<div class="loghi">
<img src="" title="logo" id="logo" /><img src="" title="logo" id="calciatore" />
</div>
<div id="erba">
</div>
</div>
</body>
</html>
Because of the stacking context, once you set a z-index on a parent element, you can't "break out" of it by setting a higher z-index on a child element.
Usually it's a lot easier to deal with by removing all the superfluous z-index values and only adding them where you need it.
See demo here
Get rid of all z-index except for:
#lineaup {
z-index: 1;
}
and
#erba {
z-index: -1;
}
You should only change the z-index of the parent elements. There's no reason to assign the children elements with higher and higher indices.
Also, since it's usually just one element behind another, this -1 and 1 solution not only works but looks nice, and is easy to understand, I think.
For the record, negative z-indices are allowed.
Increase the z-index for #lineap
#lineaup {
z-index: 1;
...
}
http://jsfiddle.net/willemvb/wxWBm/