I have an iframe which is the target area to display a completely different website inside my website. In Mozilla and chrome I can see the desired output but in Internet explorer sidebar div is completely located in a different manner.
Here goes the html code
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><span style="color:blue; font-weight:bold;">Dashboards</span></li>
{% for Dashboard in dashboards %}
<li>{{ Dashboard.d_name }}</li>
{% endfor %}
</ul>
</div>
</div>
<button class="pushed content" onclick="toggleMenu()" style="margin-top:28%;height:4%;"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button>
<div style="margin-left:-1%; margin-top:2.5%; height: 625px;" >
<iframe width="100%" height="100%" name="iframe_a" frameborder="0"></iframe>
</div>
and css is
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
border: solid 1px;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transition: left 1s ease-out;
margin-left: -1.5%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 25%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
can anyone help me to solve this compatibility problem.
in IE---
in chrome---
I may be mistaken, but it looks to me the culprit is the chevron button glyphicon-chevron-left,
and not the iframe;
try giving your button a width, e.g.:
style="margin-top:28%;height:4%;width:20px"
otherwise IE will give it maximum width, which is not what you want.
Now to prevent IE scrollbar from overlapping your content:
html { -ms-overflow-style: scrollbar; }
Related
I've got the following code. When the user hovers over the div, it should drop and stay that way until the user has hovered off of the div. When on the div, even if you move your mouse a bit, the hover action keeps firing.
html
<div class="whitelabelfeatures">
<div class="box1 requirements responsibilities">
<div class="responsibilitiesbox">
<div class="responsibility">
<div class="section1">
Pricing
</div>
<div class="section1a">
Pricing test
</div>
</div>
</div>
</div>
</div>
css
.box1.requirements.responsibilities {
height: 300px;
overflow: hidden;
}
.responsibility .section1 {
background-color: #c2bbb1;
height: 300px;
color: white;
font-weight: 700;
position: relative;
z-index: 2;
transition: all .3s ease;
}
.responsibility .section1:hover {
transform: translateY(300px);
}
.responsibility .section1a {
position: absolute;
z-index: 1;
top: 0;
}
codepen
https://codepen.io/jasonhoward64/pen/YzKNxVN
Thanks!
You can use javascript here. Please see below code.
var targetDiv = document.getElementsByClassName("section1")[0];
targetDiv.addEventListener('mouseenter', function(){
targetDiv.classList.add('section1mouseover');
});
var testDiv = document.getElementsByClassName("section1a")[0];
testDiv.addEventListener('mouseenter', function(){
targetDiv.classList.remove('section1mouseover');
});
.box1.requirements.responsibilities {
height: 300px;
overflow: hidden;
}
.responsibility .section1 {
background-color: #c2bbb1;
height: 300px;
color: white;
font-weight: 700;
position: relative;
z-index: 2;
transition: all .3s ease;
}
.section1mouseover {
transform: translateY(300px);
}
.responsibility .section1a {
position: absolute;
z-index: 1;
top: 0;
}
<div class="whitelabelfeatures">
<div class="box1 requirements responsibilities">
<div class="responsibilitiesbox">
<div class="responsibility">
<div class="section1">
Pricing
</div>
<div class="section1a">
Pricing test
</div>
</div>
</div>
</div>
</div>
The problem is that your :hover needs to be actuated higher in the DOM. With your current code, when you hover over the .section1 element, once the CSS transform takes place and translates the .section1 element vertically, the cursor is both "off" and "over" the transforming element, which causes the :hover to trigger on and off in response.
So in your codepen, on line 17, change your hover to the parent element and it should work.
Instead of:
.responsibility .section1:hover, try .responsibility:hover .section1
I have blog posts each with a cover image. I want to use these images in my post listing page as an experiment to see if it will liven up the page a little bit.
The images are too bright. I either want the opacity lowered or an overlay must be added.
Changing the opacity will change the opacity of the text. Adding an overlay has positioned itself on top of the anchors rendering them useless.
I am using the Gatsby Casper Starter Kit in the event that you are interested.
PostListing.jsx
...
<PostFormatting className={className} key={title} cover={cover}>
<PostHeader>
<h2 className="post-title">
<Link to={path}>{title}</Link>
</h2>
...
PostFormatting.jsx
...
const style = cover ? { backgroundImage: `url(${cover})` } : {};
return <article className={className} style={style}>{children}</article>;
...
Generated HTML
<article class="post" style="background-image: url("https://picsum.photos/1280/500/?image=800");">
<header class="post-header">
<h2 class="post-title">
Test Post
</h2>
</header>
<section class="post-meta">
<span>
<span class="tag">Mindset</span>
<span class="tag">Productivity</span>
</span>
<time class="post-date" datetime="2017-06-27">27 June 2017</time>
</section>
<section class="post-excerpt"><p>...</p></section>
</article>
CSS
All the styles I have for the post element.
<element.style> {
background-image: url(https://picsum.photos/1280/500/?image=800);
}
.home-template .content .post,
.tag-template .content .post {
background-color: rgba(0, 0, 0, .1);
padding: 30px 50px 50px 50px;
}
.post {
position: relative;
width: 80%;
max-width: 710px;
margin: 4rem auto 0em auto;
padding-bottom: 4rem;
border-bottom: #1a232c 3px solid;
word-wrap: break-word;
}
I know about this method but I don't know how to get the image into the after pseudo element.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Note: Try Radium for pseudo classes
U will have to put the overlay as a sibling of the content, and make it absolute.And also u will have to increase the z-index of the the content, so that it can be interactive.
In your case, all the elements inside the article should be grouped and put inside the content class.
Try this
.parent{
height:300px;
padding:50px;
position:relative;
}
.overlay{
position:absolute;
top:0;right:0;left:0;bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
}
.content{
position:relative;
z-index:1;
font-size:25px;
color:white;
}
<div class="parent" style="background-image:url(http://via.placeholder.com/350x150)">
<div class="overlay"></div>
<div class="content">Test Test</div>
</div>
The css animation code isn't working. When #tools_button is checked, I want #tools_hidden to become visible and move from top:0% to top:6% smoothly.
Here is the code:
#tools_hidden {
position: fixed;
left: 10%;
top: 0;
display: none;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: top 0.5s;
}
#tools_button:checked~#tools_hidden {
position: fixed;
left: 10%;
top: 6%;
display: block;
}
<div id="tools">
<span>
<input type="checkbox" id="tools_button">
<label for="tools_button">
<img src="img/tools.png" id="tools_icon" alt="">
<span id="tools_label">
Tools
</span>
</label>
<span id="tools_hidden">
this is hidden
</span>
</span>
</div>
Scripts are strictly restricted for my project. So, please don't think of adding scripts.
You can use animate opacity instead of display to get the effect you want:
#tools_hidden {
position: fixed;
left: 10%;
top: 0;
opacity: 0;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: top 0.5s;
}
#tools_button:checked~#tools_hidden {
position: fixed;
left: 10%;
top: 6%;
opacity: 1;
}
<div id="tools">
<span>
<input type="checkbox" id="tools_button">
<label for="tools_button">
<img src="img/tools.png" id="tools_icon" alt="">
<span id="tools_label">
Tools
</span>
</label>
<span id="tools_hidden">
this is hidden
</span>
</span>
</div>
Maybe it's not possible to do with display property.
So, I've changed the first position of div to -6% and removed both display: none and display: block.
Here is the new css code:
#tools
{
height:6vh;
background-color:#747474;
font-size:5em;
}
#tools_icon
{
height:90%;
width:5vh;
}
#tools_hidden
{
height:6vh;
background-color:#747474;
font-size:1em;
position:fixed;
left:10%;
top:-6%;
-webkit-transition: top 2s; /* For Safari 3.1 to 6.0 */
transition: top 0.5s;
}
#tools_button:checked ~ #tools_hidden{
position:fixed;
left:10%;
top:7%;
}
The HTML code is still the old one.
I'm learning html and css, and I'm trying to make a header with navigation buttons, but I can't get the layout to work at all. The header image has a border around it that I can't get rid of, and no matter what I do, the list with the links won't layer on top of the image. Can anyone help?
I have the code on codepen (forgive the images, they're temporary): http://codepen.io/anon/pen/NPxYBa
Otherwise, the code I'm using is:
#header {
position: initial;
margin: 0;
padding: 0;
border: 0;
outline: 0;
z-index: 20;
}
#nav {
position: initial;
z-index: 30;
}
li {
top: 50%;
left: 50%;
margin-left: 250px;
display: inline;
}
<body style="background-image:url(http://wallpoper.com/images/00/28/58/17/orange-background_00285817.jpg)">
<div class="header">
<img src="http://p1.pichost.me/640/58/1822357.jpg" width="1920" height="100" />
<div class="nav">
<ul>
<li>home
</li>
<li>portfolio
</li>
<li>resume
</li>
<li>about
</li>
<li>contact
</li>
</ul>
</div>
</div>
there is more than one solution for the menu to be on the image, you can use background-image instead but if you like to leave it like this you can for example set the nav to position: absolute;. for centering the menu you can set it to left: 0;, right: 0;, and margin: 0 auto;
.nav
{
position: absolute;
top: 0;
left: 0;
right: 0;
}
example: http://codepen.io/anon/pen/zxrWmb
I try to close lightbox by clicking outside of the current image, but I don't how to do.
I just have a link "Back" in order to close this lightbox...
I use only CSS3, maybe Script is the solution, thanks for your help.
Here's a short CSS :
/*thumbnails*/
.album {
position: relative;
width:1200px;
height:auto;
float: left;
}
/*fullscreen*/
.overlay {
position: fixed;
left: 258px;
top: 0px;
padding: 0px;
overflow: hidden;
}
/*close fullscreen, back to thumbnails*/
.close {
position: absolute;
top: 50px;
left: 50%;
}
HTML
<ul class="album">
<li>
<img src="images/thumbs/example.jpg>
<div class="overlay" id="example">
<img src="images/full/example.jpg" />
BACK
</div>
</li>
</ul>
You could use a pseudo-element on the .close element and position that between the lightbox and the image using z-index.
.overlay:target .close:before {
position: fixed;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.overlay { z-index: 5; }
.lightbox image { z-index: 15; }