While scrolling down through a image animation it flickers between each image. When scrolling back up and starting over, the flickering goes away. Works perfectly fine in Chrome and Firefox. Heres the code structure:
HTML
<div class="container" id="arena">
<div id="animate"
data-anchor-target="#arena"
data-smooth-scrolling="off"
>
<img class="lazy" src="img/animations/ctu_hq_animation_mb_4.0001.png" alt="" data-0-top="display:none;" data--100-top="display:block;" data--125-top="display:none;">
<img class="lazy" src="img/animations/ctu_hq_animation_mb_4.0003.png" alt="" data-0-top="display:none;" data--125-top="display:block;" data--150-top="display:none;">
<img class="lazy" src="img/animations/ctu_hq_animation_mb_4.0004.png" alt="" data-0-top="display:none;" data--150-top="display:block;" data--175-top="display:none;">
</div>
CSS:
img {
height: 500px;
width: 800px;
position: fixed;
}
#arena {
position: relative;
width: 1000px;
height: 900px;
background-size: 900px 800px;
}
#animate {
width: 850px;
height: 650px;
position: fixed;
background-size: 900px 800px;
background-repeat: no-repeat;
left: 10%;
}
Fixed, img {position: fixed) was the problem. Remove and solves the problem
Related
I'm trying to use bootstrap grid to format my webpage layout. There are two elements on my page, an image and a subtitle for the image. I would like that both elements occupy the whole screen of a smartphone, just under the navbar. Could anyone help me? I'm also tryint to make it looks nice on pc and other plataforms.
I have done some progress using media screen, but its still clunky.
Thats my .index html:
<div class="row">
<div class="combocontainer col-lg-12">
<div class="combocontainer">
<div class="top-container">
<img class="avatar" src="Images/minimalist.jpg" alt="avatar" />
</div>
<div class="signature">
<h1>My Name</h1>
</div>
</div>
</div>
</div>
Thats my css:
.avatar {
display: block;
margin-top: 220px;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.combocontainer{
height: 100vh;
}
#media screen and (min-width: 1000px) {
.combocontainer {
display: block;
margin-top: 6rem;
margin-left: auto;
margin-right: auto;
height: 20%;
width: 20%;
}
}
/* No implementation yet */
.signature {
text-align: center;
height: 20%;
width: 20%;
font-family: "romatehood-p73ed-webfont";
}
I have a slider on a homepage I am currently working on. I am trying to achieve a full viewport height that takes up the whole width for the screen.
The only way I can currently achieve this is by either stretching the image, or the image isn't centred.
The image needs to be aligned roughly centred horizontally and vertically, so customers can see the centre of the image on any width of browser, and without stretching the image out of proportion.
I have tried the background-size: cover; on the element with no success as its not a background img. the containers have 100vh currently, but the width is the issue.
The issue is located here http://joeybox.info/ . I realise with the menu and the logo above the image the 100 viewport height will rest under the "fold", however I am placing the logo and menu over the image eventually, once I have figured out the css.
I have tried many solutions found within the stack overflow forum and none work in my scenario.
My current css, after deleting the in-correct code, is:-
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
.ewic-wid-imgs {height: 100vh;
max-width: unset;
width: unset;}
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
html=
<div class="slider-box">
<div id="ewic-con-385">
<div style="display: none;" id="preloader-385" class="sliderpreloader">
</div>
<div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
<div style="width: 100%; overflow: hidden; position: relative; height: 633px;" class="bx-viewport">
<ul style="width: 315%; position: relative; left: 0px;" class="bxslider-385">
<li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span></div>
</li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span>
</div></li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg"><div class="ewic-caption">
<span>Qw Direct Leather Keyrings</span>
</div></li></ul></div>
<div class="bx-controls bx-has-controls-direction bx-has-controls-auto">
<div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a>
<a class="bx-next disabled" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div>
<div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div><br>
</div>
</div>
To achieve this you could add to your image inside .bx-wraper:
.bx-wrapper img {
display: inherit;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width: inherit;
}
now you need to set the parent li to relative:
.bx-wrapper ul li {
position:relative;
width:100%;
height:100%;
list-style: none !important;
margin: 0 !important;
}
and change your parent ul:
.bx-wrapper ul{
width:100%;
}
I have solved the above by changing my image slider. My new slider plugin (Envoke Supersized) uses a background image and was easier to use background-size:cover; css. Although after this full viewport height on mobile widths didn't look good with my images so I used 40vh on mobile widths.
I would recommend anyone trying to do the same to ensure your image is a background image, or replace the slider with a static background image for small browser widths.
I have a loop to loaded logo image in floated div block, I been tried few tips from stackoverflow but have no luck to make the logo align center and middle within the div, all logo height are not fixed and might have different height for each:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="left" src="images/logo/logo1.jpg">
</div>
Please help, thanks.
Use positioning. The following worked for me...
With zoom to the center of the image (image fills the div):
div{
float:left;
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
float:left;
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
You really should move your CSS out of the style attribute and into a file like style.css if you have not done so. But if you really have to you can place the code below into inline styles like you have now.
Remove the align="left" attribute from your image tag and set the image's display to block. This will allow margin: 0 auto; to center your image for you inside the containing DIV.
Looks like you'll have to replicate a <table> with CSS to get the vertical centering you desire. Table cells allow vertical centering. To do this I've added and additional DIV with a class of .container. The .container DIV has it's display set to table and the .image-container DIV, which is acting like a table cell, has it's display set to table-cell.
CSS
.container {
float: left;
width: 80px;
height: 80px;
padding: 8px;
border: 1px solid #ccc;
display: table;
}
.image-container {
display: table-cell;
vertical-align: middle;
}
.image-container img {
display: block;
margin: 0 auto;
}
HTML
<div class="container">
<div class="image-container">
<img src="images/logo/logo1.jpg">
</div>
</div>
JSFiddle: http://jsfiddle.net/MJ5j4/
just create a class "centerImgWrapper", and wrap all your "center" Images anywhere in the Code with divs.
Thats pure CSS
.centerImgWrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;}
.centerImgWrapper img {
left: 0;
right:0;
top: 0;
bottom:0;
max-height: 100%;
max-width: 100%;
margin:auto;
position:absolute;
}
Just Check out the Fiddle.
MyFiddle
Dave
If you are trying to get it in the middle inside the div, have you tried:
<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
<img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">
</div>
I used "margin-left:50%; margin-top:50%;" INSIDE the IMG tag and got rid of the "align" and "float" attribute. I probably wouldn't want to use "align" in this case.
Either way, I hope it helps.
Images are more or less displayed as inline-blocks. So you can just set text-align: center; on the styles of the container div.
Getting something to be vertically aligned in the middle is complicated with css. If you're going to be dynamically placing the logo with JavaScript anyway, you can save yourself trouble and just center it vertically by specifying the margins with JavaScript.
Check out this demo: http://jsfiddle.net/jyvFN/1/
HTML
<div id="container">
<img id="logo" src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
float: left;
background-color: blue;
width: 200px;
height: 150px;
text-align: center;
border: 1px solid red;
}
JavaScript
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";
Why didn't you set align of the image center?
Then your code should be:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">
And I think it's also problem of the ratio of the image width vs the div block + it's padding and border.
Try to set it balance.
I'd like to combine a progressive CSS3 background
html {
background: url(background.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
with an image map,
<map id="imgmap" name="imgmap"><area shape="poly" alt="1" title="1" coords="1" href="1" target="_blank" /><area shape="poly" alt="2" title="2" coords="2" href="2" target="_blank" /> </map>
Please note that I've replaced actual data with numbers 1 and 2.
but I really don't know how to achieve such a thing.
Any help would be greatly appreciated,
thanks.
Something like this should work:
<div class="scaling-bg">
<a id="area1" href="#">Test link 1</a>
<a id="area2" href="#">Test link 2</a>
<a id="area3" href="#">Test link 3</a>
<a id="area4" href="#">Test link 4</a>
</div>
And for the CSS:
html, body {
height: 100%;
}
.scaling-bg {
position: relative
height: 100%;
background: url(--img url--) no-repeat;
background-size: cover;
}
.scaling-bg a {
position: absolute;
width: 10%;
height: 10%;
border: 1px solid red;
text-indent: -9999px;
overflow: hidden;
}
#area1 { top: 10%; left: 10%; }
#area2 { top: 20%; left: 20%; }
#area3 { top: 30%; left: 30%; }
#area4 { top: 40%; left: 40%; }
You can see I'm using percentage values for all the widths and heights. This the key to getting the clickable areas to scale with the background.
You may encounter small errors though, this would work perfectly for something like background-size: 100% 100%; For background-size: cover, you may want to experiment with some JQuery plugins which can replicate this behavior.
I have the following code on home page:
<ul id="slides1">
<li>
<!-- About-->
<div class="logo"></div>
<div class="sub1"> </div>
<img src="images/nadpisi/about.png" class="nadpis1">
<img id="i1" src="images/MiddleBg/first.jpg"/>
</li>
</ul>
Here I have logo in class=logo and div class sub1 has background image in css file:
.sub1{
background-image: url(../images/sub1/about.png);
width: 600px;
height: 100px;
position: absolute;
z-index: 7;
top: 270px;
margin-left: 490px;
background-repeat: no-repeat;
}
.logo {
background-image: url(../images/LOGO.png);
width: 229px;
height: 129px;
background-repeat: no-repeat;
position: absolute;
z-index: 10;
top: 80px;
margin-left: 490px;
}
When I open the page with Chrome, both these logo and sub1 background images are not displayed but image after them does display, but when I go to browser`s address bar and press Enter they display. What is the problem, can anyone help?
Your images are probably not being found. Most likly a problem with your paths. Check if the image loads in a developer console.