I'm developing a mobile app, and I'm having an issue with relative divs going above the top and bottom header that are fixed with a z-index. I did some research and tried to put a z-index in the relative div, but it did not fix anything.
Here's the Relative Div:
<div class="pure-u-1-3">
<div class="TopMobBlock">
<div class="TopMobName">Open Slot</div>
<center>
<div class="TopMobImage">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Open&w=100&h=100" height="100%" width="100%" />
</div>
</center>
<center><input type="submit" class="TopMobBlank" value="Claim Bonus" /></center>
<center><input type="submit" class="TopMobBlank" value="Send Energy" /></center>
<div class="TopMobOpenBlock">
<div class="TopMobOpenText">Open Slot</div>
</div>
</div>
</div>
Here's an edited version to just show the issue:
JsFiddle
Since your relative elements are using z-indexes, your fixed position elements will need to have a greater index to appear on top.
In your example JSFiddle, if I add z-index: 3; or greater to .StatsBar and .TabsBar it seems to fix it.
From your example I can see that StatsBar and TabsBar are fixed but without a z-index.
If you always want them to appear above everything else try adding a z-index value to them. For example 20.
Then add .ActivePage { z-index: 10; position:relative; }.
This will keep your header and footer always at the top of your ActivePage div.
Add position: relative; and z-index: -1; to .pure-u-1-3:
.pure-u-1-3 {
width: 32%;
width: 31.9690%;
position: relative;
z-index: -1;
}
https://jsfiddle.net/3Ljtywov/1/
Related
In the codes below, I have two <div> tags. I want to align one <div> to the left and the other to the right, with the same height and width. Please help me to do this.
<div id="imgShow">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg" style="position:relative;width:900px; height:330px;overflow: scroll; top: 3px; left: -1px;left:auto">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="position:relative;width:100px; height:330px;overflow: scroll; top: 3px; right: -1px;right:auto"></div>
Set the floats for each div with CSS: example
.left { width:50%; float:left; height:200px; background:red;}
.right { width:50%; float: right; height:200px; background: blue;}
Try below code:
Demo
<div id="imgShow" style="width:50%; height:330px;overflow: scroll;float:left;">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="width:50%; height:330px;overflow: scroll;">Canvas not supported</div>
You should use floats:
<style>
#imgShow, #divComplete{
float:left;
width:50%;
}
</style>
If you want both at different widths, simply separate the css selectors and add the desired width.
PS: Avoid using inline CSS unless you need to, transfer these to a separate CSS file and include it in the head section
You can use twitter bootstrap css for styling your divs. Simply addclass="col-xs-6" to each div. Remember class="col-xs-12" is the full width that the div can take based on the width of the parent container. Using -xs- instead of -md- shrinks the div upon resize instead of knocking them down. If you want margins simply add change them to col-xs-5s then add a col-xs-2 div in between. It's also good practice to use parent divs with container-fluid and row classes
In my webpage I have set up an image link/anchor using the following code:
<div class="bg_1">
<div class="Absolute-Center">
<span style="font-size: 50px; color: aqua">in short.</span><br />
LIVE LIFE AT YOUR OWN PACE.<br /><br /><br /><br /><br /><br /><br />
<img src="images/scrolldown.png" width="50" height="50" border="0" />
</div>
</div>
<div style="height: 100vh; background-color: black;" >
<a name="home1"></a>
</div>
However when I run my page this image does not appear to be clickable, nor does it take you anywhere when you click. Any ideas? If it makes any difference the image I am using is mostly transparent.
Edit:
I have narrowed the problem down to being caused by z-index. The CSS code for "bg__1" is as follows:
.bg_1 {
height: 100vh;
position: relative;
z-index: -1;
background-position: center center;
background-size: cover;
background-image: url(http://31.media.tumblr.com/2c3a72acc53b1a78ef3b6c4986604cd2/tumblr_ni0jt8sKlY1sr6759o1_500.gif);
}
Removing the z-index line fixes the problem however I need the z-index for my layout.
It might had happen because of the body element covering your link. Just decrease z-index property of the body element.
Without seeing the layout of the page it is difficult to find the fix.
However, you have few possibilities:
Change your page layout
Remove z-index: -1 from css styles
Find the element which is overlapping your image and add pointer-events: none to it's style. Then, click events will pass through to image.
Change z-index of element which is overlapping the image, and give it lower z-index value
I have found my error. Image links become un-responsive if they are contained in a div or block that has a negative z-index. So instead of making it negative to render below default. Keep its container at default and raise the z-index of those you want it to render behind.
I'm working on a project, when you hover it you should click it. It works perfect in all browsers. But for some reason it doenst work in IE
Live Demo:
http://jewelbeast.com/imghover/rounded.html
HTML:
<div class="vertical-smallborder">
<section>
<img src="http://placehold.it/400x600" />
<div class="text">
<span>
<h1>This is a title</h1>
<p>This is an example of a description.</p>
<p>The entire image is a link!</p>
<a class="entire" href=""></a>
</span>
</div>
</section>
</div>
CSS:
div.vertical-noborder section span a.entire{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
I hope someone knows the problem.
Your code is definitely more complicated than it needs to be-- unless there's some reason that you need to absolutely position elements, you shouldn't.
I believe there are two undesirable behaviors in your code in IE:
Margin-left: -250px in the div is pushing the element off-screen
The z-index of the elements is putting the img above the a tag. (link)
Rather than trying to fix these bugs in IE, rewrite what you have to wrap the img in the a tag.
I am trying to position a loading image in the buttom right of the page, but everything works fine except margin-bottom.
<div id="preload">
<div align="right" style="margin-bottom:40px; margin-right:50px;">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br>
<a style="color:#00ff24;"><b>Please wait while the page is loading...
<br>If the website doesn't load within one minute please refresh your page!</b>
</a>
</div>
</div>
Can anybody tell me what or how to make it work?
Thanks
It's the nature of margins vs padding. Since margins sit outside of the element, they won't render unless there's another element following. You could use bottom-padding of 1px on the parent; that should trigger the render.
You should assign position absolute and use bottom and right proprietes.
http://jsfiddle.net/7yrUy/
<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>
try absolute position and use bottom/right instead of respective margins:
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" style="position: absolute; bottom:40px; right:50px;"/>
Here - http://jsfiddle.net/maximua/SKcvr/
If you want it in the bottom right of the page just use this css:
.yourClass {
position: absolute;
right: 0;
bottom: 0;
}
If you want to change the amount of pixels change 0 to what you want
I had a case where I needed to add display: inline-block.
I can't explain why this worked, but it did! :-) Hope it helps someone.
Even when set display:block to parents and child divs, the margin bottom may not work. The best thing to solve this, after testing with paddings and big margin top values, is using position:relative; for the parent container, and position:absolute; for the child div. The div and other elements have already the display-block for default, so we don‘t need to declare it, as follows:
.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}
.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}
In the HTML just consider:
<header class="parent">
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>
In the CSS I consider only the most relevant properties. You can add colors, backgrounds, font-families and so on, which will not affect the layout. I just coded the key properties to create the “effect margin-bottom”.
Example more fancy.
I have a header graphic that is positioned in centre of the page, being in the centre it moves according to the windows size, however I would like to put some buttons below it that are anchored to the left of the header so that when the header moves the buttons are always shewn starting below the lower left corner of the header graphic.
Is this possible ?
this is what I have in the html:
<div id="header">
<p class="centeredImage"><img src="supt_files/main_back.jpg" width="804" height="116" border="0" alt=""></p>
<div id="centretext">
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> How Do I... </button>
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Servers </button>
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Significant services </button>
</div>
</div> <!-- Header -->
in the css :
#header
{
width: 100%;
height: 157px;
position: relative;
top: 0px;
background-color: SlateGrey;
}
#centretext
{
text-align: center;
}
I would do this with CSS. You can either create a class that's centered with a defined width (anything within the div tags would align) or put it into your background definition so everything aligns.
With DIV tags:
Alter the HTML in the following way:
<div class="anchored">
images, etc (whatever you put here)
</div>
and then add the following to your CSS document:
.anchored{
display:block;
margin-left:auto;
margin-right:auto;
width:<whatever your banner/desired width is>;
}
This means that anything within the div tags will be aligned.
Whole Document:
The HTML can stay as it is, and add the following to your CSS document under body:
body{
width:<whatever your banner/desired width is>;
margin:auto auto;
}
This will make everything on the page--text, pictures, etc.--fit within the specified width, much like this page.
I hope that helps!