How do I get the green div to overlap my DOCX or PDF IFrame in IE? Using z-indexes doesn't work.
<html>
<head>
<style>
html, body {
width: 100%;
height: 100%;
}
#container {
position: absolute;
top: 25px;
left: 50px;
right: 50px;
bottom: 25px;
overflow: hidden;
z-index: 1;
}
#overlap {
background-color: green;
position: absolute;
height: 100%;
width: 250px;
overflow: hidden;
right: 0;
z-index: 10;
}
</style>
</head>
<body>
<div id="container">
<iframe height="100%" width="100%" src="Test.docx"></iframe>
</div>
<div id="overlap">
</div>
</body>
</html>
Related
I need to put some text on the pic and it has to stay there forever in that exactly color. I did it, but when I hover on a pic - text disappears. What should I do?
Didn't find answer.
I want text being there all the time with and without hovering. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay{
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
}
</style>
</head>
<body>
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>
</body>
</html>
Add the z-index property to your text.
Information here
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>
my question is related to this this question
<div id="tv_container">
<video width="300" height="240" controls>
<source src="Spin1038.mov" type="video/mov">
Your browser does not support the video tag.
</video>
</div>
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
#tv_container video {
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
I am doing the same thing. The its not working and even if I remove the image, the video isn't working even then as well.
This is my page.
Change #tv_container:after { z-index: -10 }
Also changed the <video width='245'....>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -10; /* This should be lowest z-index value */
}
#tv_container video {
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
</style>
</head>
<body>
<div id="tv_container">
<video width="245" height="240" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4"></video>
</div>
</body>
</html>
I can't seem to get my footer div to go to the bottom. It is always at the bottom of my container div but my container div is always height:0. I tried setting overflow to hidden in the container div but the height was still 0 and it made all my other divs dissapear. What is wrong? Here is my css and html.
Thanks.
HTML:
<!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">
<head></head>
<body background="images/bg.png">
<div id="contentcontainer">
<div id="header">
<img src="images/banner.png" />
</div>
<div id="nav">
</div>
<div id="form">
<!--This is where the form goes-->
</div>
<div id="content">
<!--This is where the content goes-->
</div>
<div id="submission"></div>
<div id="footer">
<p id="footertext">Copyright © 2013 me.com. All rights reserved.</p>
</div>
</div>
</body>
</html>
CSS:
#charset"utf-8";
/* CSS Document */
#submission {
width:500px;
height:175px;
position:absolute;
left:320px;
top:225px;
}
#header {
width: 820px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
}
#nav {
width: 820px;
height: 50px;
position: absolute;
left: 0px;
top: 150px;
}
#form {
background-color: #FFFFFF;
width: 820px;
height: 175px;
position: absolute;
left: 0px;
top: 200px;
border-bottom: 1px;
border-bottom-color: #666666;
border-bottom-style: dashed;
}
#content {
border: hidden;
background-color: #FFFFFF;
width: 820px;
position: absolute;
left: 0%;
top: 376px;
min-height: 1200px;
height: auto;
}
#footer {
background-color: #666666;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
}
#footertext {
color: #FFF;
text-align: center;
position: absolute;
}
#contentcontainer {
height: 100%;
width: 820px;
position: relative;
top: -10px;
background-color: #FFF;
left: 20%;
}
The height of your container div is zero because all of the children are positioned as absolute. If you could achieve the same without absolute positioning, you'll notice that the container div actually takes some space.
Its not a good idea to make everything absolutely positioned.
I'm trying to replicate this mockup:
I know how to create a semi-circle in CSS but I don't want an entire semi-circle. I want just the top, center portion of a much larger circle.
I'm specifically looking for the CSS code to create the black circle in the above mockup. Thanks!
Here is my attempt:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>
<img id="logo" src="/images/logo.png">
</h1>
<div id="half_circle">
<div id="footer_container">
<div id="learn">
Learn more.
</div>
<div id="signin">
<div>
Sign in to start callin'it
</div>
</div>
</div>
</div>
</body>
</html>
#half_circle {
width: 100%;
height: 50%;
border-radius: 100% 100% 0 0;
background-color: #111111;
display: block;
position: absolute;
bottom: 0;
}
#footer_container {
display: block;
position: relative;
height: 100%;
width: 100%;
}
#learn {
text-align: center;
padding-top: 3em;
}
#footer_container a {
color:white;
}
#signin {
display: block;
width: 100%;
position: absolute;
bottom: 10%;
margin-right: auto;
margin-left: auto;
}
#signin div {
text-align: center;
}
Just make a big circle and hide it :)
Demo: http://jsfiddle.net/Ye35w/1/
body {
overflow: hidden;
}
.circle {
position: absolute;
top: 65%;
left: -25%;
display: block;
width: 150%;
height: 150%;
background-color: #ccc;
border-radius: 50%;
}
I've scoured StackOverflow for an answer, but nothing I've tried has worked.
I have a container div with three inner divs stacked vertically with varying heights. When my browser window is maximized, it looks fine. When I make the window smaller and scroll right horizontally, there is a section of white space. How can I get rid of it? Thank you all in advance!
body {
min-width: 100%;
}
div#outer {
display: block;
position: absolute;
min-width: 100%;
}
div#top {
left: 0;
top: 0;
height: 100px;
width: 100%;
position: relative;
display: block;
}
div#middle {
left: 0;
top: 0;
height: 600px;
width: 100%;
position: relative;
display: block;
}
div#bottom {
left: 0;
top: 0;
height: auto;
width: 100%;
position: relative;
display: block;
}
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="big">
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</div>
</body>
In the body, there are some default margins. You can remove everything like this:
body {
min-width: 100%;
margin: 0;
padding: 0;
}
If you only want the sides' margin removed:
body {
min-width: 100%;
margin-left: 0;
margin-right: 0;
}
Does that work?
html,body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
}