This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 8 months ago.
I'm making a portfolio for my graphic design activity.
I'm trying to make a home page where hover a link reveals an image and it works. I'm simply looking for a way to make the image fade in as it reveals itself.
I've added a snippet below.
If anyone can help, it would be greatly appreciated :) have a nice one
#container { width: 100%; margin-top: 0px; height: auto; float: left; font-size: 30px; padding-bottom: 4px; border: 1px solid green;}
#container a { float: left; color: #ff4d00; text-decoration: none; height: auto; margin-top: 0px; }
#container a:hover span { display: block; position: absolute; top: 20%; left: 10%; right: 10%; bottom: 20%; }
#container a span { display: none; z-index: 4; margin: 0; }
img { opacity: 1; transition: 1s; }
.center { display: block; margin-left: auto; margin-right: auto; width: auto; }
<div id="container">
<a href="Project 1.html">
<p>Project 1.</p><br>
<span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000g" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
<a href="Project 2.html">
<p>Project 2.</p>
<span><img src="https://images.unsplash.com/photo-1629197520635-16570fbd0bb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z3JlZW4lMjB0ZXh0dXJlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
<a href="Project 3.html">
<p>Project 3.</p>
<span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
Do you mean transition fade on the image when you hover links? If that's what you mean you can't do it using display: none; to display: block; This is not allowed. However you can solve the problem in a different way, the visibility parameter allows you to do this. I leave you an example below.
#container {
width: 100%;
margin-top: 0px;
height: auto;
float: left;
font-size: 30px;
padding-bottom: 4px;
border: 1px solid green;
}
#container a {
float: left;
color: #ff4d00;
text-decoration: none;
height: auto;
margin-top: 0px;
}
#container a span {
position: absolute;
top: 40%;
left: 10%;
right: 10%;
bottom: 0%;
z-index: 4;
margin: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.2s, opacity 0.2s;
}
#container a:hover span {
visibility: visible;
opacity: 1;
transition: visibility 0.2s, opacity 0.2s;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
<div id="container">
<a href="Project 1.html">
<p>Project 1.</p><br>
<span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000g" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
<a href="Project 2.html">
<p>Project 2.</p>
<span><img src="https://images.unsplash.com/photo-1629197520635-16570fbd0bb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z3JlZW4lMjB0ZXh0dXJlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
<a href="Project 3.html">
<p>Project 3.</p>
<span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
</div>
Related
I'm trying to animate the width of the span inside the an of this link.
The same demo: https://www.khaneyeax.com/en
.lang {
background-color: rgba(255,255,255,0.1);
left: -130px;
top: 400px;
}
.lang a {
padding: 10px;
color: black;
max-width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
transition: max-width 1s ease-in-out;
}
.lang a:hover {
width: 300px;
max-width: 300px;
}
<div id="left">
<img src="https://via.placeholder.com/150">
<div class="position-fixed lang">
Language Persian FA
<a class="english">Language English EN</a>
<a class="search"><i class="fas fa-search"></i> Advanced Search </a>
</div>
</div>
I've made a sidebar in html but there is a problem when I've added some images and attempted to change the margins. This also applies the margin to the sidebar. I've tried changing the position from fixed to relative, absolute, etc. but this does not help. The sidebar should maintain its original 100% height, but the images' margin-top of 400px also applies to the sidebar, which is 400px down from where it should be. Thanks in advance
.sidebar{
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background-color: #313B4A;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2px;
transition: 0.7s ease;
}
.sidebar header{
font-size: 22px;
color: #4F6D7A;
text-align: center;
font-weight: 800px;
line-height: 75px;
background: #DBE9EE;
user-select: none;
}
.sidebar ul a{
display: block;
height: 100%;
width: 100%;
line-height: 65px;
color: #dceedc;
font-size: 20px;
padding-left: 10px;
transition: 0.5s;
}
label #btn, label #close{
position: absolute;
}
#tickbox:checked ~ .sidebar{
left:0;
}
#tickbox:checked ~ label #btn{
left:250px;
opacity: 0;
pointer-events: none;
}
#tickbox:checked ~ label #close{
left:195px;
}
html {
font-family: 'Karla', sans-serif;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.gallery {
margin-top: 200px;
padding: 20px;
display: flex;
flex-direction: row;
}
.gallery figure {
margin: auto;
width: 250px;
text-align: center;
}
.gallery img{
height: 200px;
width: 275px;
}
Oops, forgot to add the HTML!
<body>
<input type="checkbox" id="tickbox">
<label for="tickbox">
<i class="fas fa-bars"id ="btn"></i>
<i class="fas fa-times"id ="close"></i>
</label>
<div class="sidebar">
<header>KeyQuarters</header>
<ul>
<li>Home</li>
<li>Group Buys</li>
<li>Keycaps</li>
<li>Switches</li>
<li>Deskmats</li>
<li>Kits</li>
<li>Accessories</li>
</ul>
</div>
<div class="gallery">
<figure>
<img src="test1.png" alt="keeb1">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
</div>
</body>
I have a page with one navigation bar that stays always on the bottom of page. I have another div
called <div style="display: block;" id="detail"> that hides the navigation bar(i don't want it to hide the navigation bar)! Could anyone tell me
how I can move the <div style="display: block;" id="detail"> div exactly on the top of navigation div so
both div be visible ? (I tried to changebottom:0px; on detail div to bottom:70px; but it didn't make both
divs visible)
Here is the jsfiddle url for navigation bar alone:https://jsfiddle.net/4mwdkr3p/
Here is the jsfiddle with both div(navigation bar became invisable):https://jsfiddle.net/aq13uwua/2/
ul#navigation {
height: 70px;
#height: max-height: 100%;
min-height: 70px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-width: 1px 0;
text-align: center;
font-size: 12px;
font-family: 'Cham-WebFont', Arial, sans-serif;
background-color: #FFF;
position: fixed;
/* new */
bottom: 0;
/* new */
width: 100%;
/* new */
}
ul#navigation li {
display: inline;
margin-right: .75em;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li.last {
margin-right: 0;
}
#MenuContainer {
text-align: center;
margin: 50px auto;
}
#MenuContainer a {
margin: 0px 10px;
display: inline-block;
text-decoration: none;
color: black;
}
#detail {
display: none;
position: fixed;
z-index: 50;
top: 50px;
bottom: 0px;
width: 100%;
color: #FFFFFF;
background: #1b1b1b;
}
#detailContainer {
display: block;
position: relative;
height: 400px;
padding: 30px 10px 10px 10px;
background: url('./icon3.png') no-repeat top center;
text-align: center;
}
#detailContainer img {
display: block;
width: 64px;
height: 64px;
border: 0px;
margin: 40px auto 10px auto;
}
.centerKeyContainer {
display: block;
position: fixed;
text-align: center;
white-space: nowrap;
height: 77px;
width: 100%;
top: 250px;
left: 0px;
right: 0px;
margin: 0px auto;
}
.first {
display: inline-block;
background: url('http://s13.postimg.org/b10yulrlv/playresized.png') no-repeat center center;
background-size: 77px 77px;
width: 77px;
height: 77px;
margin: 0px;
border-right: 5px solid transparent;
}
.second {
display: inline-block;
background: url('http://s10.postimg.org/t5xpfzyhx/mango_Resized.jpg') no-repeat center center;
background-size: 77px 77px;
width: 77px;
height: 77px;
margin: 0px;
border-right: 5px solid transparent;
}
#FavKey {
display: block;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 72px;
margin: 0px;
text-align: center;
background: #2a2a2a;
}
.addedFav {
display: block;
background: url('http://s28.postimg.org/tkcsrugvh/added.png') no-repeat 0 0;
background-size: 320px 72px;
width: 320px;
height: 72px;
padding: 0px;
bottom: 0;
/* new 70px*/
margin: 0px auto;
}
<div style="display: block;" id="detail">
<div id="detailContainer">
test
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png"><b> Mango</b>
<br>
<span class="centerKeyContainer">
<span class="first" onclick=""></span>
<span class="second" onclick=""></span>
<br>
mango
<br>
</span>
<span id="FavKey"><span class="addedFav"></span></span>
</div>
</div>
<div id="MenuContainer">
<ul id="navigation">
<li class="x">
<a title="1" href="./test.php">
<img id="myButton1" src="http://s24.postimg.org/6nv5v6uu9/worldresized.png" alt="" border="0" height="42" width="42">
<div class="caption">1</div>
</a>
</li>
<li class="x">
<a title="2" href="./test.php">
<img id="myButton2" src="./2.png" alt="" border="0" height="42" width="42">
<div class="caption" style="color:red">2</div>
</a>
</li>
<li class="x">
<a title="3" href="./test.php">
<img id="myButton3" src="./3.png" alt="" border="0" height="42" width="42">
<div class="caption">3</div>
</a>
</li>
<li class="x">
<a title="4" href="./test.php">
<img id="myButton4" src="./4.png" alt="" border="0" height="42" width="42">
<div class="caption">4</div>
</a>
</li>
<li class="x">
<a title="5" href="./test.php">
<img id="myButton5" src="./5.png" alt="" border="0" height="42" width="42">
<div class="caption">5</div>
</a>
</li>
</ul>
</div>
Edit(detail):
I try to explain what i want to achieve.I am creating a webapp for ios so in all pages i want a navigation bar be visible for user at the bottom of page .The detail div holds few buttons to play video and audio and at the end it has an image button to add the current video to favorite .once user click the favorite button its image swap with different image via javascript so user know that his selection added to favorite.All this feature works except that favorite image button(red heart shape)hides the navigation bar below it! I am trying to place the favorite( red heart shaped image button )above navigation bar so both be visible.
You have an <span id="FavKey"> with position: fixed; and bottom: 0px; so it is positioned relative to the browser window. Set position: absolute; to position it relative to the parent (#detailContainer in this case) and you will see the navigation when you set bottom:70px; on #detail
ul#navigation {
height: 70px;
#height: max-height: 100%;
min-height: 70px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-width: 1px 0;
text-align: center;
font-size: 12px;
font-family: 'Cham-WebFont', Arial, sans-serif;
background-color: #FFF;
position: fixed;
/* new */
bottom: 0;
/* new */
width: 100%;
/* new */
}
ul#navigation li {
display: inline;
margin-right: .75em;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li.last {
margin-right: 0;
}
#MenuContainer {
text-align: center;
margin: 50px auto;
}
#MenuContainer a {
margin: 0px 10px;
display: inline-block;
text-decoration: none;
color: black;
}
#detail {
display: none;
position: fixed;
z-index: 50;
top: 50px;
bottom: 70px;
width: 100%;
color: #FFFFFF;
background: #1b1b1b;
}
#detailContainer {
display: block;
position: relative;
height: 400px;
padding: 30px 10px 10px 10px;
background: url('./icon3.png') no-repeat top center;
text-align: center;
}
#detailContainer img {
display: block;
width: 64px;
height: 64px;
border: 0px;
margin: 40px auto 10px auto;
}
.centerKeyContainer {
display: block;
position: fixed;
text-align: center;
white-space: nowrap;
height: 77px;
width: 100%;
top: 250px;
left: 0px;
right: 0px;
margin: 0px auto;
}
.first {
display: inline-block;
background: url('./icon1.png') no-repeat center center;
background-size: 77px 77px;
width: 77px;
height: 77px;
margin: 0px;
border-right: 5px solid transparent;
}
.second {
display: inline-block;
background: url('./icon2.png') no-repeat center center;
background-size: 77px 77px;
width: 77px;
height: 77px;
margin: 0px;
border-right: 5px solid transparent;
}
#FavKey {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 72px;
margin: 0px;
text-align: center;
background: #2a2a2a;
}
.addedFav {
display: block;
background: url('./added.png') no-repeat 0 0;
background-size: 320px 72px;
width: 320px;
height: 72px;
padding: 0px;
bottom: 0;
/* new 70px*/
margin: 0px auto;
}
<div style="display: block;" id="detail">
<div id="detailContainer">
test
<img src="./imageone.png"><b> Mango</b>
<br>
<span class="centerKeyContainer">
<span class="first" onclick=""></span>
<span class="second" onclick=""></span>
<br>
mango
<br>
</span>
<span id="FavKey"><span class="addedFav"></span></span>
</div>
</div>
<div id="MenuContainer">
<ul id="navigation">
<li class="x">
<a title="1" href="./test.php">
<img id="myButton1" src="./1.png" alt="" border="0" height="42" width="42">
<div class="caption">1</div>
</a>
</li>
<li class="x">
<a title="2" href="./test.php">
<img id="myButton2" src="./2.png" alt="" border="0" height="42" width="42">
<div class="caption" style="color:red">2</div>
</a>
</li>
<li class="x">
<a title="3" href="./test.php">
<img id="myButton3" src="./3.png" alt="" border="0" height="42" width="42">
<div class="caption">3</div>
</a>
</li>
<li class="x">
<a title="4" href="./test.php">
<img id="myButton4" src="./4.png" alt="" border="0" height="42" width="42">
<div class="caption">4</div>
</a>
</li>
<li class="x">
<a title="5" href="./test.php">
<img id="myButton5" src="./5.png" alt="" border="0" height="42" width="42">
<div class="caption">5</div>
</a>
</li>
</ul>
</div>
It seems like no matter what I do I just can't get some text with a black background to centre vertically. The problem is that sometimes the text is on one line and sometimes it is on two or even three. I'm trying to get it to automatically adjust but I just can't.
I have tried numerous approaches such as those listed on here.
Here is my code I am trying to centre:
.infogrid {
display: inline-block;
position: relative;
bottom: 45px;
right: 0;
margin: 0px 1% -100% 1%;
width: 98%;
background-color: #F6F6F6;
}
.infogrid ul {
margin: 0;
padding: 0;
text-align: center;
}
.infogrid li {
display: inline-block;
position: relative;
background-color: white;
width: 320px;
margin: 1vw;
height: 320px;
transition: transform 0.4s;
box-shadow: 0.2vh 0vh 0.8vh #888888;
}
.infogrid li:hover {
transform: scale(1.05, 1.05);
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
}
#tilewrapper:hover .tilewrappertext {
visibility: visible;
}
<div class="infogrid">
<ul>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile1.png" width="96%">
<h3 class="tilewrappertext">Half price facials</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile2.png" width="96%">
<h3 class="tilewrappertext">1/4 off massages</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile3.png" width="96%">
<h3 class="tilewrappertext">20/3 off hot rocks</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile4.png" width="96%">
<h3 class="tilewrappertext">20/3 off nails</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile5.png" width="96%">
<h3 class="tilewrappertext">Free use of sauna with treatment</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile6.png" width="96%">
<h3 class="tilewrappertext">Free use of jacuzzi with treatment</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile7.png" width="96%">
<h3 class="tilewrappertext">1/20 off eyes</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile8.png" width="96%">
<h3 class="tilewrappertext">1/20 off hair</h3>
</div>
</li>
</ul>
</div>
The text appears when the image is hovered over.
Since your li is already position relative, you can add the following css rules to the h3 to center it vertically within the li.:
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
Example here: http://codepen.io/nicerhugs/details/dMGMEv/
The top will move the top of the h3 halfway down the li, and the transform will correct for the height of the li itself. Getting rid of the margin will take away that weird mystery space that makes it appear to be lower than it really is.
Just go with the Jess's answer. Here is another method to do this using pseudo element aka ghost element in css.
You have to give absolute position to image. add a :after element to div#tilewrapper and make it display inline-block, also make the h3 tag inline-block and apply vertical-align: middle, it will position vertically middle. Little complicate to understand but anyway Here is the code . :)
.infogrid {
display: inline-block;
position: relative;
bottom: 45px;
right: 0;
margin: 0px 1% -100% 1%;
width: 98%;
background-color: #F6F6F6;
}
.infogrid ul {
margin: 0;
padding: 0;
text-align: center;
}
.infogrid li {
display: inline-block;
position: relative;
background-color: white;
width: 320px;
margin: 1vw;
height: 320px;
transition: transform 0.4s;
box-shadow: 0.2vh 0vh 0.8vh #888888;
}
.infogrid li:hover {
transform: scale(1.05, 1.05);
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
}
#tilewrapper:hover .tilewrappertext {
visibility: visible;
}
.infogrid{
margin-top: 50px;
}
img {
max-height: 320px;
position: absolute;
}
div#tilewrapper{
height: 100%;
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
vertical-align: middle;
display: inline-block;
vertical-align: middle;
width: calc(100% - 4px);
}
div#tilewrapper:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -5px;
}
<div class="infogrid">
<ul>
<li>
<div id="tilewrapper">
<img id="automargins" src="http://1.bp.blogspot.com/-fqGa-MyjVHY/UZPYekbmfHI/AAAAAAAABrg/CC4q0AQsY9o/s320/air-baloon.jpg" width="96%">
<h3 class="tilewrappertext">Half price facials</h3>
</div>
</li>
</ul>
</div>
I have a page with one navigation bar that stays always on the bottom of page. I have another div
called <div style="display: block;" id="detail"> that hides the navigation bar(i don't want it to hide the navigation bar)! Could anyone tell me
how I can move the <div style="display: block;" id="detail"> div exactly on the top of navigation div so
both div be visible ? (I tried to changebottom:0px; on detail div to bottom:70px; but it didn't make both
divs visible)
Here is the jsfiddle url for navigation bar alone:https://jsfiddle.net/4mwdkr3p/
Here is the jsfiddle with both div(navigation bar became invisable):https://jsfiddle.net/aq13uwua/2/
ul#navigation {
height: 70px;
#height: max-height: 100%;
min-height: 70px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-width: 1px 0;
text-align: center;
font-size: 12px;
font-family: 'Cham-WebFont', Arial, sans-serif;
background-color: #FFF;
position: fixed;
/* new */
bottom: 0;
/* new */
width: 100%;
/* new */
}
ul#navigation li {
display: inline;
margin-right: .75em;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li.last {
margin-right: 0;
}
#MenuContainer {
text-align: center;
margin: 50px auto;
}
#MenuContainer a {
margin: 0px 10px;
display: inline-block;
text-decoration: none;
color: black;
}
#detail {
display: none;
position: fixed;
z-index: 50;
top: 50px;
bottom: 0px;
width: 100%;
color: #FFFFFF;
background: #1b1b1b;
}
#detailContainer {
display: block;
position: relative;
height: 400px;
padding: 30px 10px 10px 10px;
background: url('./icon3.png') no-repeat top center;
text-align: center;
}
#detailContainer img {
display: block;
width: 64px;
height: 64px;
border: 0px;
margin: 40px auto 10px auto;
}
.centerKeyContainer {
display: block;
position: fixed;
text-align: center;
white-space: nowrap;
height: 77px;
width: 100%;
top: 250px;
left: 0px;
right: 0px;
margin: 0px auto;
}
.first {
display: inline-block;
background: url('http://s13.postimg.org/b10yulrlv/playresized.png') no-repeat center center;
background-size: 77px 77px;
width: 77px;
height: 77px;
margin: 0px;
border-right: 5px solid transparent;
}
.second {
display: inline-block;
background: url('http://s10.postimg.org/t5xpfzyhx/mango_Resized.jpg') no-repeat center center;
background-size: 77px 77px;
width: 77px;
height: 77px;
margin: 0px;
border-right: 5px solid transparent;
}
#FavKey {
display: block;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 72px;
margin: 0px;
text-align: center;
background: #2a2a2a;
}
.addedFav {
display: block;
background: url('http://s28.postimg.org/tkcsrugvh/added.png') no-repeat 0 0;
background-size: 320px 72px;
width: 320px;
height: 72px;
padding: 0px;
bottom: 0;
/* new 70px*/
margin: 0px auto;
}
<div style="display: block;" id="detail">
<div id="detailContainer">
test
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png"><b> Mango</b>
<br>
<span class="centerKeyContainer">
<span class="first" onclick=""></span>
<span class="second" onclick=""></span>
<br>
mango
<br>
</span>
<span id="FavKey"><span class="addedFav"></span></span>
</div>
</div>
<div id="MenuContainer">
<ul id="navigation">
<li class="x">
<a title="1" href="./test.php">
<img id="myButton1" src="http://s24.postimg.org/6nv5v6uu9/worldresized.png" alt="" border="0" height="42" width="42">
<div class="caption">1</div>
</a>
</li>
<li class="x">
<a title="2" href="./test.php">
<img id="myButton2" src="./2.png" alt="" border="0" height="42" width="42">
<div class="caption" style="color:red">2</div>
</a>
</li>
<li class="x">
<a title="3" href="./test.php">
<img id="myButton3" src="./3.png" alt="" border="0" height="42" width="42">
<div class="caption">3</div>
</a>
</li>
<li class="x">
<a title="4" href="./test.php">
<img id="myButton4" src="./4.png" alt="" border="0" height="42" width="42">
<div class="caption">4</div>
</a>
</li>
<li class="x">
<a title="5" href="./test.php">
<img id="myButton5" src="./5.png" alt="" border="0" height="42" width="42">
<div class="caption">5</div>
</a>
</li>
</ul>
</div>
Edit(detail):
I try to explain what i want to achieve.I am creating a webapp for ios so in all pages i want a navigation bar be visible for user at the bottom of page .The detail div holds few buttons to play video and audio and at the end it has an image button to add the current video to favorite .once user click the favorite button its image swap with different image via javascript so user know that his selection added to favorite.All this feature works except that favorite image button(red heart shape)hides the navigation bar below it! I am trying to place the favorite( red heart shaped image button )above navigation bar so both be visible.
You have an <span id="FavKey"> with position: fixed; and bottom: 0px; so it is positioned relative to the browser window. Set position: absolute; to position it relative to the parent (#detailContainer in this case) and you will see the navigation when you set bottom:70px; on #detail
ul#navigation {
height: 70px;
#height: max-height: 100%;
min-height: 70px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-width: 1px 0;
text-align: center;
font-size: 12px;
font-family: 'Cham-WebFont', Arial, sans-serif;
background-color: #FFF;
position: fixed;
/* new */
bottom: 0;
/* new */
width: 100%;
/* new */
}
ul#navigation li {
display: inline;
margin-right: .75em;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li.last {
margin-right: 0;
}
#MenuContainer {
text-align: center;
margin: 50px auto;
}
#MenuContainer a {
margin: 0px 10px;
display: inline-block;
text-decoration: none;
color: black;
}
#detail {
display: none;
position: fixed;
z-index: 50;
top: 50px;
bottom: 70px;
width: 100%;
color: #FFFFFF;
background: #1b1b1b;
}
#detailContainer {
display: block;
position: relative;
height: 400px;
padding: 30px 10px 10px 10px;
background: url('./icon3.png') no-repeat top center;
text-align: center;
}
#detailContainer img {
display: block;
width: 64px;
height: 64px;
border: 0px;
margin: 40px auto 10px auto;
}
.centerKeyContainer {
display: block;
position: fixed;
text-align: center;
white-space: nowrap;
height: 77px;
width: 100%;
top: 250px;
left: 0px;
right: 0px;
margin: 0px auto;
}
.first {
display: inline-block;
background: url('./icon1.png') no-repeat center center;
background-size: 77px 77px;
width: 77px;
height: 77px;
margin: 0px;
border-right: 5px solid transparent;
}
.second {
display: inline-block;
background: url('./icon2.png') no-repeat center center;
background-size: 77px 77px;
width: 77px;
height: 77px;
margin: 0px;
border-right: 5px solid transparent;
}
#FavKey {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 72px;
margin: 0px;
text-align: center;
background: #2a2a2a;
}
.addedFav {
display: block;
background: url('./added.png') no-repeat 0 0;
background-size: 320px 72px;
width: 320px;
height: 72px;
padding: 0px;
bottom: 0;
/* new 70px*/
margin: 0px auto;
}
<div style="display: block;" id="detail">
<div id="detailContainer">
test
<img src="./imageone.png"><b> Mango</b>
<br>
<span class="centerKeyContainer">
<span class="first" onclick=""></span>
<span class="second" onclick=""></span>
<br>
mango
<br>
</span>
<span id="FavKey"><span class="addedFav"></span></span>
</div>
</div>
<div id="MenuContainer">
<ul id="navigation">
<li class="x">
<a title="1" href="./test.php">
<img id="myButton1" src="./1.png" alt="" border="0" height="42" width="42">
<div class="caption">1</div>
</a>
</li>
<li class="x">
<a title="2" href="./test.php">
<img id="myButton2" src="./2.png" alt="" border="0" height="42" width="42">
<div class="caption" style="color:red">2</div>
</a>
</li>
<li class="x">
<a title="3" href="./test.php">
<img id="myButton3" src="./3.png" alt="" border="0" height="42" width="42">
<div class="caption">3</div>
</a>
</li>
<li class="x">
<a title="4" href="./test.php">
<img id="myButton4" src="./4.png" alt="" border="0" height="42" width="42">
<div class="caption">4</div>
</a>
</li>
<li class="x">
<a title="5" href="./test.php">
<img id="myButton5" src="./5.png" alt="" border="0" height="42" width="42">
<div class="caption">5</div>
</a>
</li>
</ul>
</div>