Due to SEO reasons I put my images into the body section rather than as background pictures like so:
<div id="fullpage">
<div class="slide" ><img class="l-cover" data-src="imagelink1"></div>
<div class="slide" ><img class="l-cover" data-src="imagelink2"></div>
<div class="slide" ><img class="l-cover" data-src="imagelink3"></div>
</div>
I tried to style the images like here:
https://jsfiddle.net/gnq52ygu/
I want the pictures to center, when the screen gets smaller. Right now the pictures stay fix at the left side.
As soon as I style the img tag there's some conflict with fullscreen.js.
Can anyone help me please?
Perfectly center? Both horizontally and vertically? This can be done like so:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Related
I have a website that displays fine in chrome but not in Firefox.
This is chrome:
This is Firefox:
Three of the four main images are missing - oddly the 4th one displays fine, despite having identical code. the inspector shows the images are downloading successfully:
I have also cleared the caches, updated Firefox, etc., to no avail.
In response to the queries:
All images are served from digital ocean, not locally.
This is the css and html for the learn image and the smile image, of which the smile image appears in FF while the learn button doesn't:
CSS
.four_box {
position: absolute;
}
.four_btn {
cursor: pointer;
transition: all .7s;
}
.four_label_anchor {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.smile_size {
height: 262px;
width: 326px;
}
.learn_size {
height: 263px;
width: 183px;
}
HTML
<div id="learn" class="learn_size four_box" style="top: 437px; left: 771px;">
<img id="learn_btn" class="learn_size four_btn" style="
background: url(/static/img/swirl_home/chalk-btn.png);"
onclick="animHome(this.id);">
<div class="learn_size four_label_anchor">
<div id="learn_label" class="four_label">Learn</div>
<button id="learn_return" class="btn_href return_btn">
return
</button>
</div>
</div>
</div>
<div id="smile" class="smile_size four_box" style="top: 438px; left: 954px;">
<img id="smile_btn" class="smile_size center four_btn" style="
background: url(/static/img/swirl_home/bird-btn.png);"
onclick="animHome(this.id); homeSnapshots();">
<div class="smile_size four_label_anchor">
<div id="smile_label" class="four_label">Smile</div>
<button id="smile_return" class="btn_href return_btn">
return
</button>
</div>
</div>
I will reread the Firefox link
If you are displaying local images, can be the problem.
Use / instead of \ in the images URL will solve the problem
Otherwise, Mozilla has a general help page for such problem : https://support.mozilla.org/en-US/kb/fix-problems-images-not-show
I've made a JSFiddle explaining what I would like to do with slick slide:
<div class="slider">
<div>
<div class="absolute">
Blabla
</div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
</div>
</div>
CSS
.absolute {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
background-color: #900;
}
In short: The red box in the first slide is invisible because it's inside the slide that has overflow hidden. I need the box to be a part of the first slide only and move with the slide.
Can anyone fix the JSFiddle example so this works, that would be much appreciated.
I found a hack for this you have to set a margin-top or padding-top on each slide element.
.slick-slide{
padding-top:25px
//margin-top:25px also working
}
Working fine. Make sure red box should be position absolute & and each slider have position relative. so that your red box is belong to that slide only
.slider > div{
position: relative;
}
.absolute {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
background-color: #900;
}
When on a retina screen; clipping a fixed element causes Chrome/Opera to stop repainting the (with overflow enabled) scrollable content. I think this is due to a bug in Blink, but I'd like to know if anyone knows a solution to this issue.
I've reproduced the problem on jsfiddle, but the actual problem can only be viewed on a retina screen with a Blink browser (Chrome of Opera). As soon as I move my window to my 2nd (non-retina) screen, the problem fades away and everything behaves as expected. I've included a few images to illustrate the problem for those without a retina screen.
The HTML/CSS
html, body {
width: 100%;
height: 100%;
}
.text-block {
width: 50%;
background: rgba(0,0,0,.3);
p {
padding: 20px;
}
}
.clip {
clip: rect(10px,300px,300px,10px);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.3);
}
.scroll {
overflow-y:scroll;
}
<div class="clip scroll">
<div class="wrapper">
<div class="text-block">
<p>This is what's clipped</p>
</div>
<img src="http://placehold.it/300x200" />
<div class="text-block">
<p>This is what's clipped</p>
</div>
<img src="http://placehold.it/300x200" />
<div class="text-block">
<p>This is what's clipped</p>
</div>
<img src="http://placehold.it/300x200" />
</div>
</div>
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.