the code below demonstrates what i am trying to do. why is my "blackOut" div appearing in front of my "theGoods" div? shouldn't the z-index properly handle this?
<html>
<head>
<style>
table.theGoods{
display:block;
z-index:20;
background-color:yellow;
font-family:arial;
font-size:18px;
width:300px;
height:300px;
margin-right:auto;
margin-left:auto;
margin-top:180px;
text-align:center;
}
div.blackOut{
position:absolute;
background-color:red;
width:100%;
height:100%;
padding:0px;
top:0px;
left:0px;
z-index:2;
}
div.behindIt{
z-index:1;
background-color:red;
}
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
</head>
<body>
<table class="theGoods" id="theGoods">
<tr>
<th>
la la
</th>
</tr>
</table>
<div class="blackOut" id="blackOut" onClick="myHider(event)"></div>
</body>
<script>
function myHider(e){
document.getElementById("blackOut").style.display="none";
}
</script>
</html>
z-index:20; has no effect without either position:absolute or position:relative. (You want the latter.)
z-index only affects elements with a position property other than 'static'. If you add position:relative; to table.theGoods, you should be fine. In general, all elements involved in the stacking need to have position:relative or position:absolute.
You cant use z-index without using:
position:absolute;
or:
position:relative;
which is lacking from table.theGoods
You need to add "position: absolute;" to the style for table.theGoods.
Related
I find that the footer is displayed properly on Chrome but it looks like it doesn't get overflow:hidden; on Firefox. The wrapper div is still going a little more below the footer.
<div class="wrapper6"> // at gallery.html
<div class="wrapper8"> // at galeri2013.html
Here are CSS properties of these two wrapper divs:
.wrapper6 {
margin:0 !important;
padding:0 !important;
left:0;
top:0;
position:absolute;
background:url(../images/texture.png) repeat;
width:100%;
height:180% !important;
font-family: orator std;
overflow:hidden;
}
.wrapper8 {
margin:0 !important;
padding:0 !important;
left:0;
top:0;
position:absolute;
background:url(../images/texture.png) repeat;
width:100%;
height:280% !important;
font-family: orator std;
overflow:hidden;
}
And properties for both footers;
galeri2013.html;
.footy4 {
position:relative;
display:inline !important;
float:left;
z-index:1;
left:0;
margin-bottom:-4.3%;
transform:skewX(8deg);
-webkit-transform:skewX(8deg);
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
background-color:#e81b1b;
width:100%;
height:120px;
margin-top:96%;
overflow:hidden;
}
gallery.html;
.footy7 {
position:relative;
display:inline !important;
float:left;
z-index:1;
left:0;
margin-bottom:-4.3%;
transform:skewX(8deg);
-webkit-transform:skewX(8deg);
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
background-color:#e81b1b;
width:100%;
height:120px;
margin-top:150%;
overflow:hidden;
}
I think I'm not using best ways to handle it, if you see anything wrong/not the best way of coding please tell me so that I can learn and also improve myself.
To clarify again, I want to have my footer stuck to bottom on Firefox, as it is on Chrome!
Okay! After some hours I saw what's wrong... I've put the footer div into wrapper div and everything went normal!
So this is what I did to achieve it basically;
<div class="wrapper">
//some other content
<div class=footer>
//footer content
</div>
</div>
and I've put backoverflow:hidden; to wrapper which I had removed to test what is wrong. You can see what other css properties I've used up here at the question.
Hope these can be useful to someone and thanks for everyone who helped.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 8 years ago.
I am trying to align text at the bottom of a Div and the Middle of a Div. The CSS attribute
vertical-align:text-bottom; seems to do nothing?
I have 3 divs and would like to center the div xrLabel1 and the other div xrLabel5 to put the text at the bottom.
I have included some sample code.
Thanks
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="format.css"/>
<title></title>
</head>
<body>
<div class="TopMargin">
<div class="xrLabel2">xrLabel2</div>
<div class="xrLabel1">xrLabel1</div>
<div class="xrLabel5">xrLabel5</div>
</div>
</body>
</html>
The CSS file format.css
.TopMargin
{
position:absolute;
left:0px;
top:0px;
height:92px;
width:650px;
background-color:#808080;
color:#000000;
}
.xrLabel2
{
position:absolute;
left:225px;
top:17px;
height:67px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-middle;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}
.xrLabel1
{
position:absolute;
left:367px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:right;
vertical-align:text-bottom;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}
.xrLabel5
{
position:absolute;
left:75px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-top;
font-family:Times New Roman;font-size:9.75pt;
}
You need to use display:table on the parent element, and display:table-cell; vertical-align:bottom; for the children. Example here: http://jsfiddle.net/hAScR/
Block elements does not support vertical-align as such. You need to set the display attribute to table-cell. Then you can use vertical-align.
http://jsfiddle.net/kuUHV/
You could use text-align:center on the parent element. And a margin-top on the child element.
<div id="outer"> #text-align:center
<div class="inner">Radom text </div> # margin-top:__
</div>
Fiddle Demo :)
Note: // Don´t use this for responsive Design - when you resize the window the element will stay on the same spot if the element gets to small.
I have the following HTML
<embed class='pdf_container' src='welcome.pdf' style ='width:100%;height:500px;' ></embed>
<div id="show_message" class='message_wrapper' >
<div id="message_content"> The requested operation ... </div>
</div>
and in CSS
.message_wrapper{
position:fixed;
z-index:1000;
height:100px;
width:100%;
background:red;
top:0;
left:0;
}
.pdf_container{
position:absolute;
top:0;
left:0;
z-index:100;
}
Actually i want to show the #show_message over the .pdf_container and it works well in Firefox but not in IE , it ignoring the z-index.
Please help me to figure out the problem.
Thank you.
See Screenshots:
IN IE
IN IE 8,9
and in FF
IN FIREFOX
You will need to set WMODE to Transparent inside the embed tag.
<embed class='pdf_container' src='welcome.pdf' style ='width:100%;height:500px;' wmode="transparent" ></embed>
Try this you surly get solution as i did and its working fine in my local system :-) cheerss
Little diffrent form your code but i am sure you will get it.
http://jsfiddle.net/fRsUv/
html { height:100% }
#container {
position:relative;
width:100%;
}
#pdf {
width:100%;
z-index:1;
}
#layer_over_pdf {
width:200px;
z-index:2;
}
#pdf, #layer_over_pdf {
position:absolute;
top:0;
left:0;
}
<div id="container">
<div id="pdf"><embed id="pdfEmbed" src="JavaScript_DHTML_Mat_V4.pdf" style="width:500px; height:600px" type="application/pdf"></embed></div>
<div id="layer_over_pdf">some content</div>
</div>
I want to make a table which isn't editable under certain conditions, so I want to overlay it with a div.
Why is this not working?
CSS
<style type="text/css">
#div_tabel_basisgegevens {
background-color: red;
float:left;
position:relative;
left:0px;
top:0px;
z-index:120;
width:750;
height:100px;
}
#tabel_basisgegevens {
height:100px;
color:white;
position:relative;
left:0px;
top:0px;
z-index:2;
}
</style>
HTML
<div id="div_tabel_basisgegevens">
<table id="tabel_basisgegevens">
<tr>
<td>
<input type="Checkbox" id="geen_periodes" />
</td>
</tr>
</table>
</div>
Wrap the div and table with another div. Give the parent div position:relative;. Give the overlay div opacity:0;position:absolute;width:100%;height:100%;
<style type="text/css">
#div_tabel_basisgegevens{
background-color: red;
float:left;
position:absolute;
left:0px;
top:0px;
z-index:120;
width:100%;
height:100%;
opacity:0;
}
#tabel_basisgegevens{
height:100px;
color:white;
left:0px;
top:0px;
z-index:2;
background:red;
}
#wrapper {position:relative;}
</style>
<div id="wrapper">
<div id="div_tabel_basisgegevens"></div>
<table id="tabel_basisgegevens">
<tr><td><input type="Checkbox" id="geen_periodes"></td></tr>
</table>
</div>
http://jsfiddle.net/RZQwb/2/
And as Nerd-Herd mentioned, if all you want to do is make an input field non-editable, the correct method is to add the disabled attribute ( disabled="disabled" for XHTML)
I have a picture that needs to be split into 4, and each part must have a link.
Do people still use image hotspots?
I am assuming you are talking about client side image maps.
They are still being used and are part of HTML 4.01 and XHTML 1.1, and also in the current HTML 5 draft.
They are simple to use and are supported by all browsers and as such are a good way to have "hot spots" on a single image. I can't think of a single better alternative (ease of use, browser support, accessibility, being part of the HTML spec) that will give you this functionality.
Whether having such "hot spots" on a single image is advisable (discoverability by the user being the main issue), is a different question.
Using images as links is lame in my opinion; it can hurt accessibility, and depending on the image used, can result in Mystery Meat Navigation, which is lame.
Instead, I'd make that image a background image.
HTML
<div id="image-hotspot">
Small Planets
Big Planets
The Sun
</div>
CSS
#image-hotspot {
background:url(http://onlyfunnyjokes.com/bestoftheweb/wp-uploads/earth_planets_size_comparison.jpg);
height:650px;
width:385px;
}
#image-hotspot a {
display:block;
text-indent:-10000px; /* you could also change the opacity instead*/
/* as a matter of fact I suggest using the opacity technique */
/* the text-indent has caused me troubles in the iPad browser */
height:216px;
}
You might need to use more advanced CSS positioning to make sure those anchor elements <a> are where you need them to be.
Addendum
Here's another example which should seem more relevant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title >Test</title>
<style type="text/css">
#image-hotspot {
background:url(http://upload.wikimedia.org/wikipedia/commons/c/c4/Planets2008.jpg);
height:720px;
width:1280px;
position:relative;
top:0px;
left:0px;
}
#image-hotspot a#the-sun {
display:block;
text-indent:-10000px;
height:720px;
width:200px;
position:absolute;
left:0px;
top:0px;
}
#image-hotspot a#mercury {
display:block;
text-indent:-10000px;
height:25px;
width:25px;
position:absolute;
left:225px;
top:275px;
}
#image-hotspot a#venus {
display:block;
text-indent:-10000px;
height:75px;
width:40px;
position:absolute;
left:265px;
top:250px;
}
#image-hotspot a#earth {
display:block;
text-indent:-10000px;
height:75px;
width:45px;
position:absolute;
left:325px;
top:250px;
}
#image-hotspot a#mars {
display:block;
text-indent:-10000px;
height:75px;
width:45px;
position:absolute;
left:383px;
top:250px;
}
#image-hotspot a#jupiter {
display:block;
text-indent:-10000px;
height:125px;
width:135px;
position:absolute;
left:450px;
top:225px;
}
#image-hotspot a#saturn {
display:block;
text-indent:-10000px;
height:125px;
width:195px;
position:absolute;
left:610px;
top:225px;
}
#image-hotspot a#uranus {
display:block;
text-indent:-10000px;
height:75px;
width:60px;
position:absolute;
left:805px;
top:250px;
}
#image-hotspot a#neptune {
display:block;
text-indent:-10000px;
height:75px;
width:60px;
position:absolute;
left:887px;
top:250px;
}
</style>
</head>
<body>
<div id="image-hotspot">
<a id="the-sun" href="#the-sun">the sun</a>
<a id="mercury" href="#mercury">mercury</a>
<a id="venus" href="#venus">venus</a>
<a id="earth" href="#earth">earth</a>
<a id="mars" href="#mars">mars</a>
<a id="jupiter" href="#jupiter">jupiter</a>
<a id="saturn" href="#saturn">saturn</a>
<a id="uranus" href="#uranus">uranus</a>
<a id="neptune" href="#neptune">neptune</a>
<!-- <a id="pluto" href="#pluto">pluto</a> -->
</div>
</body>
</html>
You can use image maps, the main reason people don't like them is because people often map a small part of an image and you don't know it's a link. If you can, just wrap the each image in it's respect <a href='link'>img</a>