I have a problem with the cursor in IE10 any ideas? It doesn't appear at all in IE10.
http://jsfiddle.net/alexnode/y4y4A/8/
<div id="bgmbutton1">
<img id="button1" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img id="obutton1" src="http://translationgames.org/images/button1.png" alt="Translation games">
<div id="otrigger1" class="button" data-case="translation"></div>
</div>
css
#bgmbutton1{position: fixed;
left: 2%;
top: 5%;
}
#button1 {width: 25%;}
#obutton1 {width: 25%;position: absolute;top:0;left:0;}
#otrigger1 {background:rgba(0,0,0,0); height:100%; width:100%; position: absolute; left: 0; top: 0; cursor: pointer; z-index:5000;}
Your approach seems to be overcomplicating things just a bit. Might I suggest a slightly more straight-forward approach instead. I've tested this to ensure it works fine in IE.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
transition: opacity .5s;
}
.button:hover .default {
opacity: 0;
}
</style>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
As you can see, this does rely on the transition and opacity properties. If you require support for older browsers, you could go back to a JavaScript approach using jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.js"></script>
<script>
$(function () {
$(document).on("mouseover mouseout", ".button", function () {
$(this).find(".default").stop().fadeToggle(300);
});
});
</script>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
I hope this helps you.
Related
I am trying to recreate a cool look I saw on a graphic design mockup but I am unsure how to do it. There is a background video, with a transparent green overlay over it, then there is an image of a man that stays fixed to the right with text overflowing over it. For the most part I was able to recreate it but it still does not look right and the image does not stay fixed to the right side. Any suggestions or a different method would be appreciated.
Here is the mockup of the webpage I am trying to recreate in CSS:
Here is what I have managed to recreate using bootstrap:
*::before, *, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
position: relative;
overflow: hidden;
background-color: black;
height: 70vh;
margin-bottom: 0;
}
.jumbotron video {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
height: 100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.5;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(126, 154, 111, 0.5);
}
.jumbotron .container-fluid {
z-index: 3;
position: relative;
padding-right: 0 !important;
}
.image-holder {
width: 30%;
height: 100%;
}
.image-holder img {
width: 30%;
position: absolute;
top: -100px;
right: 0;
}
#heyGoodMeeting {
width: 80%;
z-index: 4;
}
.showcase__description {
color: white;
font-size: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Testing</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="overlay"></div>
<video autoplay muted loop>
<source src="https://geniecast.com/wp-content/uploads/2020/10/Zuen-Office-Background-Video.mp4" data-src="" type="video/mp4">
</video>
<div class="container-fluid text-white d-flex justify-content-end">
<div style="width: 80%">
<img id="heyGoodMeeting" src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png" alt="hey good meeting">
<div class="showcase__description">The personalized comedy event that will transform your next client gathering, holiday party, or company meeting from a typical zoom call into a customized, memorable, and hilarious experience.</div>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<div class="image-holder">
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png" alt="">
</div>
</div>
<!-- /.container -->
</div>
</body>
</html>
Here is a link to a jsFiddle
First of all, in your jsfiddle demo, it seems like you didn't include Bootstrap 4 but you tagged Bootstrap 4 in your question.
To style that person picture in the background, you can just do the same way you did on the video and the overlay: set its position to absolute, top, bottom and right to 0 so that it sticks on the right. I think the tricky part is to set its height to 100% so that it won't overflow its parent relative container.
Anyway, I've cleaned up the layout a little bit and assigned several custom CSS classes so that I can style those classes instead of directly on the elements:
<div class="jumbotron jumbotron-fluid banner">
<div class="overlay"></div>
<video />
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png"
class="img-background" />
<div class="banner-content container-fluid">
<div class="showcase">
<img id="heyGoodMeeting"
src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png"
class="img-fluid" />
<p class="description" />
<a class="btn btn-light btn-lg" />
</div>
</div>
</div>
And the following is the CSS to stick that person picture in the background:
.banner .img-background {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
right: 0;
height: 100%;
}
demo: https://jsfiddle.net/davidliang2008/xd2s630q/80/
I want images auto size when users resize browser window, when users resize their browser i don't want images lose any details. I only want resolution width:800px height:400px
I did my best and searched everywhere but their solution didn't work for me, i also put width 100% and max-width 100% still my webpage didn't work.
If anyone would like to gives me some advices i would very appreciate your help thank you.
Please take a look at my code.
/*slideshow*/
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 400px;
max-width: 100%;
max-height: 100%;
margin-top: 40px;
border: 1px solid;
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
Set your .slide as background-size: cover.
See docs: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Also you can position it background-position: center center;
To keep your slide as the same size of the image you can set your padding bottom to have same ratio proportion of the image, something like:
.slide {
...
padding-bottom: 72%;
}
/*slideshow*/
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
max-width: 100%;
max-height: 100%;
margin-top: 40px;
border: 1px solid;
padding-bottom: 72%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
Here is the correct code after hard work:
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slidebg{
width: 100%;
height: 100%;
float:left;
margin-top: 40px;
border: 1px solid;
position: relative;
}
.slidebg:before {
content: "";
display: block;
padding-top: 50%;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
<div id="slideshow">
<div class="slidebg">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
</div>
<div class="slidebg">
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
</div>
<div class="slidebg">
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
I made a responsive website with bootstrap 3. It's a portfolio website with an image gallery. The website does work responsive but when I view it as from a mobile or other device it doesn't scale perfectly. When I reload the page it looks right at first but when it is finished loading it changes. Does anyone have an idea where I went wrong?
body {
padding: 0;
border: 0;
vertical-align: baseline
}
.main {
margin-top: 170px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
}
.navbar {
min-height: 130px;
margin-bottom: 20px;
}
.navbar-toggle {
margin-top: 25px;
}
#media (min-width: 768px) {
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
}
.box {
padding: 5px;
margin: 0;
}
.img {
display: block;
position: relative;
margin: 0px;
z-index: 1;
}
.imgoverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.img:hover .imgoverlay {
opacity: 0.75;
}
.text {
position: absolute;
bottom: 0;
padding-bottom: 6px;
margin: auto auto auto 10px;
}
/*///////////POP UP////////*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 150px auto;
position: relative;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<section class="main">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 box">
<a href="#" class="img">
<img src="" alt="" class="img-responsive">
<div class="imgoverlay">
<div class="text"></div>
</div>
</a>
</div>
<!--///////////// POP UP /////////////////////-->
<div id="popup1" class="overlay">
<div class="col-md-12 popup">
<div class="col-md-6 col-md-offset-1 iframe">
<iframe src="" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-md-4 content">
<h2></h2>
<p class="info"></p>
</div>
<a class="col-md-1 close" href="#">×</a>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
use media queries
#media (min-width: 576px) { ... }
inside the braces define styles
media queries are used to define the rule that is used to define different style for different media types/devices.
if the width of the device's screen is minimum 567px then it will be rendered to defined style.
I'm having issues with my menu icon. For my desktop css I have is set to display none. Under 1000px I have it set as display block. So far the icon is showing for all devices. Any assistance is appreciated.
/* blah blah blah */
.icon-dropdown {
display: none;
}
#media screen and (max-width: 1000px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vintage McDonald's</title>
<meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/jpg" href="mcdonaldsoldlogo.png">
</head>
<body>
<div class="wrapper">
<header>
<img src="vintagelogo.jpg" width="90px" height="90px">
<h1>Vintage McDonald's!</h1>
<div class="icon-dropdown">
<div></div>
<div></div>
<div></div>
</div>
</header>
<span class="menu-trigger">Menu</span>
<nav>
<ul>
<li>ABOUT MCDONALD'S</li>
<li>OUR CLASSICS</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="slideShow">
<img class="placeHolder" src="1.jpg">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="slideOverlay"><p>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</p>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
try to use this media query:
#media (max-width: 800px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
After that, try to shrink your browser to see the effect.
Try setting width and height for the icon.
I know this is a common question but I'm sure I'm just missing something obvious here. I'm trying to get the fontawesome icon to vertically align in the middle of the parent div, but it just keeps sitting at the top.
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
I'll refer you to here, which explains 1) your common question and 2) how to actually vertically align.
Summary: vertical align doesn't work the way you think it does, and you have to use other methods (easily found online) to vertically align.
You can also look into using flex-box or hacks already posted on SO.
Because the div is hidden using display:none the property needs to be changed to display:table and then the child div should have the property display:table-cell.
function spinner() {
$("#spinner").css("display", "table");
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
border: 10px solid red;
color: yellow;
display: table-cell;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
There is two common techniques that I know of.
Use the table method below.
Sometimes making your element to display as table creates a headache in responsive website and in that case you can use the transform:translate technique.
#spinner div {
position: relative;
}
#spinner .fa-spinner{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
display: table;
width: 100%;
}
#spinner .fa-spinner{
display: table-cell;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>