I have updated this post, as i seem to be facing a new issue with this image problem, basically, i need to center an image on all devices.
Here is the HTML of the images, all images must stay as they are as its a custom menu.
body { font-family: 'Roboto', sans-serif; background-color:#2d2d2d; color: #f5f5f5; margin: 0 auto; padding:0; font-size:12pt; padding-top:20px; padding-bottom:20px; }
}
#box2 {
display:block;
margin:auto;
height:500px; /*change ## to the pixel setting of your image*/
width:500px;/*change ## to the pixel setting of your image*/
}
#media screen and (max-width: 768px) {
body { padding:0; background-image: none !important; }
}
<?php
/*
Template Name: Page Menu
*/
?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<style>
body {background-color:black}
</style>
<div id="body">
<div id="box2" "style="position: absolute">
<a href=""><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/111.png" width="500" align="middle" style="position: absolute; top: 100px; left: 500px; "/>
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid white; top: 240px; left: 530px; "/>
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid blue; top: 170px; left: 785px;"/>
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid green; top: 140px; left: 650px;"/>
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid red; top: 280px; left: 890px;"/>
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid purple; top: 435px; left: 565px;"/>
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width=65" style="position: absolute; border: 0px solid grey; top: 435px; left: 820px;"/>
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid yellow; top: 325px; left: 690px;"/>
</div>
</div>
I just need the main image to be centered on all devices, basically just in the middle of 100% screen width, finding it hard to do so have no idea why
OK, I had to change some stuff around. Images are bigger than they were you may have to resize as well, but stay in place now.
<!doctype html>
<html>
<style>
body {
background-color: black;
}
img {
position: absolute;
}
</style>
<body>
<div class="navigation">
<div "style="position: relative">
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp- content/uploads/2015/10/home1.png" style: "width= 65; border: 0px solid white; top: 22%; left: 42%;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid blue; top: 170px; left: 715px;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid green; top: 230px; left: 460px;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid red; top: 260px; left: 825px;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid purple; top: 405px; left: 490px;"/></a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" style= "width= 65; border: 0px solid grey; top: 405px; left: 760px;" />
</a>
<a href="http://tridentas.co.uk/bowwownow">
<img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid yellow; top: 305px; left: 625px;" />
</a>
</div>
</div>
</body>
</html>
Related
I have a div with an image of the world map in it, and it has map icons with text overlays placed on it. However, the border of the div is way bigger than the image, and there is no margin or padding setting that makes it like that. There is also nothing that I can see that is stretching the div border, but it still stays big. Any ideas as to why this might happen?
Any help would be appreciated
Here is the code snippet that is responsible for the Continents image:
.container {
position: absolute;
text-align: center;
color: black;
}
.centered {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay {
position: relative;
bottom: -3;
background: rgb(201, 67, 67);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity: 0;
color: white;
font-size: 15px;
padding: 10px;
text-align: center;
}
.iconImage {
display: block;
width: 100%;
height: auto;
}
<!-- Continents Picture -->
<div class="container" style="align-content: center; border: 3px solid black; padding: 0px; margin: 0%;">
<div class="centered; padding: 0%; margin: 0%;" style="border: 3px solid rgb(17, 0, 255)">
<img src="continents.png" style="width: 70%; border: 3px solid rgb(255, 0, 0)">
<!-- North America marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 30em; left: 28em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;">
<span class="overlay" style="position: relative;">North America</span>
</div>
<!-- Africa marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 22em; left: 58em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;">
<span class="overlay" style="position: relative;">Africa</span>
</div>
<!-- Europe marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 43em; left: 57em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;;">
<span class="overlay" style="position: relative;">Europe</span>
</div>
<!-- Asia marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 47em; left: 75em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;">
<span class="overlay" style="position: relative;">Asia</span>
</div>
<!-- Australia marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 33em; left: 85em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;">
<span class="overlay" style="position: relative;">Australia</span>
</div>
</div>
</div>
add width: min-content; and (for firefox) width: -moz-min-content; to your .container Element.
im new to web design, getting a understanding for it now though and enjoying it, ive searched my question for awhile now and getting no where with it, hope someone can help me out!
So my problem is, my left margin is set at 25% and the right margin is set at 25%
my width of the div is set to 750px
so when i go to resize the screen, the right margin shrinks but the left margin stays at 25%!!!!
this means when viewing it on my mobile or a smaller screen, the website looks like its more to the right hand side...
my website is http://lawrencetrigg.tk if anybody could suggest what my issue is, would help me loads!
Thanks guys!
a:-webkit-any-link{
text-decoration:none !important;
}
body {
background-color: black;
}
#top {
position: absolute;
top: 0px;
background-image: url("images/background-top-one.jpg");
background-repeat: repeat-x;
left: 25%;
right: 25%;
width: 750px;
height: 100%;
text-align:center;
margin-left: auto;
margin-right: auto;
}
#bottom1 {
position: fixed;
background-image: url("images/background-bottom-one.jpg");
bottom: 0px;
left: 25%;
right: 25%;
width: 750px;
height: 150px;
color: black;
text-align:center;
margin-left: auto;
margin-right: auto;
}
div.transbox {
font-size: 16px;
margin: 30px;
background-color: #AAAAAA;
border: 1px solid black;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
div.col-top-one {
float: left;
width: 100%;
font-size: 20px;
padding: 1px;
height: 250px;
border-color: white;
color: white;
top: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
box-shadow: 0px 0px 8px 4px #666;
/*opacity: 0.8;*/
}
</style>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lawrence Trigg</title>
<link rel="images/favicon.ico" href="images/favicon.ico">
<style type="text/css">
a:-webkit-any-link{
text-decoration:none !important;
}
body {
background-color: black;
}
#top {
position: absolute;
top: 0px;
background-image: url("images/background-top-one.jpg");
background-repeat: repeat-x;
left: 25%;
right: 25%;
width: 750px;
height: 100%;
text-align:center;
margin-left: auto;
margin-right: auto;
}
#bottom1 {
position: fixed;
background-image: url("images/background-bottom-one.jpg");
bottom: 0px;
left: 25%;
right: 25%;
width: 750px;
height: 150px;
color: black;
text-align:center;
margin-left: auto;
margin-right: auto;
}
div.transbox {
font-size: 16px;
margin: 30px;
background-color: #AAAAAA;
border: 1px solid black;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
div.col-top-one {
float: left;
width: 100%;
font-size: 20px;
padding: 1px;
height: 250px;
border-color: white;
color: white;
top: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
box-shadow: 0px 0px 8px 4px #666;
/*opacity: 0.8;*/
}
<div id="top">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Education</li>
<li>Skills</li>
<li>Work</li>
<li>Gym</li>
<li>Download CV</li>
<a href="https://www.facebook.com/Lawrencetrigg" class="tooltip">
<img src="images/icons/social-facebook32.png" onmouseover="this.src='images/icons/social-facebook322.png'" onmouseout="this.src='images/icons/social-facebook32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-facebook32.png" style="float:right;" />
<strong>Facebook</strong><br />
</span>
</a>
<a href="https://www.steam.com" class="tooltip">
<img src="images/icons/social-steam32.png" onmouseover="this.src='images/icons/social-steam322.png'" onmouseout="this.src='images/icons/social-steam32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-steam32.png" style="float:right;" />
<strong>Steam</strong><br />
</span>
</a>
<a href="https://www.youtube.com" class="tooltip">
<img src="images/icons/social-youtube32.png" onmouseover="this.src='images/icons/social-youtube322.png'" onmouseout="this.src='images/icons/social-youtube32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-youtube32.png" style="float:right;" />
<strong>Youtube</strong><br />
</span>
</a>
<a href="https://www.dropbox.com" class="tooltip">
<img src="images/icons/social-dropbox32.png" onmouseover="this.src='images/icons/social-dropbox322.png'" onmouseout="this.src='images/icons/social-dropbox32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-dropbox32.png" style="float:right;" />
<strong>Dropbox</strong><br />
</span>
</a>
<a href="https://www.skype.com" class="tooltip">
<img src="images/icons/social-skype32.png" onmouseover="this.src='images/icons/social-skype322.png'" onmouseout="this.src='images/icons/social-skype32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-skype32.png" style="float:right;" />
<strong>Skype</strong><br />
</span>
</a>
<a href="https://www.google.com" class="tooltip">
<img src="images/icons/social-googleplus32.png" onmouseover="this.src='images/icons/social-googleplus322.png'" onmouseout="this.src='images/icons/social-googleplus32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-googleplus32.png" style="float:right;" />
<strong>Google Plus</strong><br />
</span>
</a>
</ul>
<div class="col-top-one">
<div class="transbox">
<p>Lawrence William Trigg</p>
<p>I am a bright, young and ambitious individual who is self-motivated and organised. I can work well under pressure and am able to meet targets and deadlines, I am eager to learn new skills and feel the ones currently gained give a vast and varied history to draw from and implement in new situations. Working well within a team is something I enjoy, however I am also capable of working under my own initiative. </p>
</div>
<div class="transbox">
<p>Under Construction</p>
</div>
</div>
</div>
<div id="bottom1">
<a href="#" class="tooltip">
<img src="images/icons/icon-mobile1.png" onmouseover="this.src='images/icons/icon-mobile2.png'" onmouseout="this.src='images/icons/icon-mobile1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-mobile1.png" style="float:right;" />
<strong>Mobile Number</strong><br />
0481718550
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-email1.png" onmouseover="this.src='images/icons/icon-email2.png'" onmouseout="this.src='images/icons/icon-email1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-email1.png" style="float:right;" />
<strong>Email Address</strong><br />
lawrencetrigg#me.com
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-picture1.png" onmouseover="this.src='images/icons/icon-picture2.png'" onmouseout="this.src='images/icons/icon-picture1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-picture1.png" style="float:right;" />
<strong>Name</strong><br />
Lawrence William Trigg
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-home1.png" onmouseover="this.src='images/icons/icon-home2.png'" onmouseout="this.src='images/icons/icon-home1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-home1.png" style="float:right;" />
<strong>Test</strong><br />
Home
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-favorite1.png" onmouseover="this.src='images/icons/icon-favorite2.png'" onmouseout="this.src='images/icons/icon-favorite1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-favorite1.png" style="float:right;" />
<strong>Test</strong><br />
Favorite
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-website1.png" onmouseover="this.src='images/icons/icon-website2.png'" onmouseout="this.src='images/icons/icon-website1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-website1.png" style="float:right;" />
<strong>Test</strong><br />
Website
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-dob1.png" onmouseover="this.src='images/icons/icon-dob2.png'" onmouseout="this.src='images/icons/icon-dob1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-dob1.png" style="float:right;" />
<strong>Date Of Birth</strong><br />
8th May 1989 / 26 Years old
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-location1.png" onmouseover="this.src='images/icons/icon-location2.png'"
<!-- begin snippet: js hide: false -->
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-location1.png" style="float:right;" />
<strong>Test</strong><br />
Location
</span>
</a>
</div>
Change left and right position on this element by that :
#top {
position: absolute;
top: 0px;
background-image: url("images/background-top-one.jpg");
background-repeat: repeat-x;
left: 0;
right: 0;
width: 750px;
height: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
And this position of this element by that :
#bottom1 {
position: fixed;
background-image: url("images/background-bottom-one.jpg");
bottom: 0px;
left: 0;
right: 0;
width: 750px;
height: 150px;
color: black;
text-align: center;
margin-left: auto;
margin-right: auto;
}
And now it should works :)
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>
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>
Please see the html below
it works fine in IE, but in Firefox it overlaps..please try and give me solution.
When the position of the div inside the td was given static, it's working properly.But i need absolute there since i need to use the left and top attributes.Any help is appreciated.Thanks
<table style="height:auto; position:fixed;">
<tr>
<td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent">
<div style="LEFT: 20px; WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;" >Traffic Light</div>
<div style="LEFT: 0px; WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;" ><img src="../common/Images/rollingstock.png" width="100%" height="100%" /></div>
<div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;" ><ul><li>Traffic Light Information</li><li>Signalling Information</li><li>Euro Light</li></ul></div>
</td>
<td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent">
<div style="LEFT: 10px;WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;">LED Dialight Iformation</div>
<div style="LEFT: 0px;WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;"><img src="../common/Images/EN-12368_Euro.png" width="100%" height="100%" /></div>
<div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;"><ul><li>Traffic Light Information</li><li>Signalling Information</li><li>Caltran Signals Light</li></ul></div>
</td>
<td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent">
<div style="LEFT: 10px;WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;">Signalling Information</div>
<div style="LEFT: 0px;WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;"><img src="../common/Images/caltransignals.png" width="100%" height="100%" /></div>
<div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;"><ul><li>Traffic Light Information</li><li>Signalling Information Light Test Data..</li><li>LED Light</li></ul></div></td>
</tr>
</table>
Well of course it overlaps. In every browser. You're absolute-positioning elements with exactly the same left/top values, how could it not? (Plus you're using position: fixed, which won't work in IE6, but will establish a different containing parent in other browsers.)
As Richard says, you could give each td element position: relative so that the absolutes inside are positioned relative to the cell. But if, as it looks like, all you want is three divs side-by-side, forget both absolute positioning and tables, and just say:
<style>
.contentBoxcontent {
float: left;
width: 201px; height: 205px;
padding: 6px; margin: 2px;
cursor: move;
}
.contentBoxcontent a { margin-left: 10px; height: 29px; }
.contentBoxcontent img { display: block; width: 161px; height: 110px; }
</style>
<div class="contentBoxcontent">
Traffic light
<img src="../common/Images/rollingstock.png" alt="" />
<ul>
<li>Traffic light information</li>
<li>Signalling information</li>
<li>Euro light</li>
</ul>
</div>
<div class="contentBoxcontent">
LED dialight information
<img src="../common/Images/EN-12368_Euro.png" alt="" />
<ul>
<li>Traffic light information</li>
<li>Signalling information</li>
<li>Caltran signals light</li>
</ul>
</div>
<div class="contentBoxcontent">
Signalling information
<img src="../common/Images/caltransignals.png" alt="" />
<ul>
<li>Traffic light information</li>
<li>Signalling information</li>
<li>Light test data</li>
<li>LED light</li>
</ul>
</div>