I tried with this but it's not working.. I want the image to change its size proportionately but margin-top and margin-bottom to be fixed in pixels.
#imagenslide img {
margin-top: 100px;
margin-bottom: 100px!important;
width: auto;
height: auto;
position: relative;
}
Any help please? Thanks!
use
#imagenslide img {
margin-top: 100px;
margin-bottom: 100px!important;
width: 100%;
height: auto;
position: relative;
}
or you can also use min-width css property also..
Also try to use width in % for responsive..
I think you're close, but I think it's more simple than you think. Try:
<img id="imagenslide"src="http://placehold.it/350x150">
#imagenslide {
margin: 100px 0;
display: block;
position: relative;
}
JSFiddle
Related
I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.
HTML:
<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>
CSS:(Firfox)
.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}
#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;
}
This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.
Please suggest a solution to this issue
One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.
<style>
#return_button {
position: relative;
width: 100px;
}
#return_button img {
max-width: 100%;
height: auto;
}
#return_button span {
position: absolute;
top: 50%;
margin-top: -5px;
left: 10px;
right: 10px;
text-align: center;
}
</style>
<div id="return_button">
<img src="images/previous.png" alt="Button graphic">
<span>Button label</span>
</div>
I'm trying to show a popup when someone clicks on a youtube thumbnail. This works fine in Chrome but the click event isn't firing in Firefox.
I've managed to cut the problem down to what I've got below (Fiddle here)
<div class="Youtube">
<img class="Thumb" src="http://img.youtube.com/vi/RsYlGFBEpM4/mqdefault.jpg" alt="Marrakech"/>
<img class="PlayButton" src="http://ec2-54-229-110-227.eu-west-1.compute.amazonaws.com/Content/images/VideoPlay.png" alt="Play button"/>
</div>
The attach is happening fine but the handler doesn't get called in Firefox
$(".Youtube").click(function () {
alert('clicked');
return false;
});
I suspect it's something to do with the positioning/layout of the div or images
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
}
div.Youtube img.Thumb {
position:relative;
z-index:-1;
}
.Youtube img.PlayButton {
height: auto;
width: 160px;
position:relative;
left:20px;
top:-160px;
z-index:-1;
opacity: .7;
}
Can someone point out my mistake? (I've just noticed the border of the div catches clicks are appropriate, just not any content)
Try : This updated jsFiddle - removed superfluous use of z-index property.
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
}
div.Youtube img.Thumb {
position:relative;
}
.Youtube img.PlayButton {
height: auto;
width: 160px;
position:relative;
left:20px;
top:-160px;
opacity: .7;
}
With a positive z-index set on .Youtube class works fine on FF too.
Code:
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
z-index: 1;
}
I'm searching for the reason on the net...
Demo: http://jsfiddle.net/IrvinDominin/6Zkua/
EDIT
I think the reason why is that we are defining all the elements in the same stacking context relative, but firefox in this context assume undefined if the z-index is not set so the element will be always at lower index.
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Explicitly adding z-index to Div makes it work on firefox
z-index:0
http://jsfiddle.net/LsqAq/3/
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 need help...
take a view here...
http://jsbin.com/ititac/10/edit
as you can see the horizontal images already centered..
but the problem are the two vertical image are not centered...
also please take note they're just not a two images.
It could be a hundreds of sample images...
Thanks hope you can help me with this...
try this css: Hope it fixes your problem:
#product_thumbs .product_thumb {
float: left;
padding: 5px;
border: 1px dashed #B52020;
margin: 0 10px 10px 0;
width: 90px;
height: 90px;
overflow: hidden;
}
#product_thumbs .product_thumb img {
width: 90px;
position: relative;
top: 25%;
left: 30%;
height: 80%;
width: 90%;
margin: -15% 0 0 -25%;
}
and here is the demo
http://jsbin.com/ititac/18/edit
hope below link will be useful:
http://www.vanseodesign.com/css/vertical-centering/
I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.
In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).
It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?
I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.
Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle
I swear I tried that already, but I guess not. Thanks to this question