I'm trying to animate an image, i.e. to move it from left to right and back but before implementing css animation keyframes i noticed that i cannot get element in html to obey css style - whatever style changes i make in css, the picture on the webpage remains the same size, in the same place, etc.
html:
<div id="animate"><img class="thumbnail" src="flower.jpg"> </div>
css:
#animate
{
width:200x;
height:100px;
}
You need to select the img:
img {
width: 200x;
height: 100px;
}
Related
Can we add multiple background-images one after another from top-bottom using CSS only(not bootstrap, jquery etc)?Output.jpg is expected design of page with multiple images and scrolling property of page
Ok for more image in background you need to set the background to the division:
CSS:
#image1 {
background: url(image1.jpg)
height: 100%;
}
#image2 {
background: url(image2.jpg)
height: 100%;
}
HTML:`
<div id="image1"></div>
<div id="image2"></div>
Probably this will work, but if you want a scrolling property you need jQuery or you add a button at the end of every division and set the href to the next division, example:
<div id="image1">
<a class="next-page" href="#image2">next-page</a>
</div>
<div id="image2"></div>
Tell me if this works
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
I'm working on a website for a girlfriend of mine.
But I'm stuck positioning a the logo.
Here is the website I'm talking about:
http://xntriek-test.s3-website-eu-west-1.amazonaws.com/
I tried using z-indexes but don't work. I also tried setting an background image for the body.
But then I'm to limited with sizing the image.
I'm using Twitter bootstrap to put this thing together.
At the moment this is the class I'm using for the logo:
.logo{
position: absolute;
top: 25px;
left: 25px;
height: 45%;
width: 30%;
z-index: 1;
}
At the moment I'm positioning the image in a span along side the main content.
But because I'm using position: absolute this wouldn't make a difference were I put it.
If any body has any ideas how I could solve this, maybe a different approach then I'm doing right now. Any help welcome!
You need to modify your CSS along the following:
<div class="span6 offset3" style="position: relative; z-index: 1">
z-index affects positioned elements, so just add position: relative to your span of interest.
I would create a special class "z-wrap" and modify the style sheet.
<div class="span6 offset3 z-wrap">
In CSS style sheet:
.z-wrap {position: relative; z-index: 1}
Reference: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index
Note You may have to adjust the value of z-index depending on any z-index value you may have set in the logo container.
First you are distorting the logo with your css, if you want your image to be responsive position it in an responsive element, position this absolut and let the image adjust it's size.
#logoContainer {
position:absolute;
top:25px;
left:25px;
width:30%;
z-index:-1;
}
img.logo{
width:100%;
height:auto;
}
your html should look something like this:
<div id="logoContainer">
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>
Put this right after the opening of your body tag and not in some other elements.
By putting it in other elements the logo inherits their z-index and you can only influence it's z-positioning inside the parent but not on the overall page.
One thing to remember when using the z-index attribute :
Only the elements placed using their "position" attribute (relative, absolute or fixed), can be affected by the "z-index".
So if you want to fix your issue, either put your logo as a background image, either use position in the CSS of the content.
I have been fiddling around with this for some time now, but I still don't understand how it should be done.
I would like the image to be maximized (100%/100%) in the background of the itemtemplate div, but right now it just makes it fit inside the div which is 250px/250px.
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<img style="-ms-grid-row-span: 2;" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle">
</h6>
</div>
</div>
Any ideas ? thx.
You can position the image absolutely and set the height and width to 100% in your CSS files.
.itemtemplate > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Just make sure you remember to position the parent div and the other children of .itemtemplate relatively:
.itemtemplate, .itemtemplate > div {
position: relative;
}
The parent needs to be positioned relatively to ensure the img is positioned within that element. The other children of the parent need to positioned relatively to ensure that they are drawn above img (as positioned elements are drawn after static elements). If you have trouble seeing the other child elements then you can set their z-index.
Working example: http://jsfiddle.net/sjsNJ/
Need to use CSS background-image.
div.itemtemplate
{
background:url(PATH_TO_IMAGE);
background-size:100% 100%;
background-repeat:no-repeat;
}
See site below for more info.
http://www.w3schools.com/cssref/pr_background-image.asp
I am not familiar with the attributes you are using. But, in order to use an image for the background. There are couple of ways.
If it is <body> or <table> you can also define them by using doing something like this
<body background="link/to/image.jpg">
But the global way, which every element supports would be to define them using CSS
<div style="background-image: url("link/to/image")">...</div>
Now, coming to the image part
Whenever you are using a background image,
It is never going to re-size to fit the container. Unless you use CSS3.
/* CSS3 Snippet to resize a background */
div
{
background-image:url("link/to/image");
-moz-background-size:80px 60px;
background-size:80px 60px;
background-repeat:no-repeat;
}
If the container is big, it will start repeating itself to fill the area. Which can be controlled to repeat or not repeat. Like
div {
background-image: url("link/to/image");
background-repeat: no-repeat; /* similary repeat-x and repeat-y */
}
However, what you are trying to use in using a <img /> to act as a background, which is semantically wrong and I do not recommend it.
Using a method I've done before but having issues. Not sure if it's a sprite or what.. Basically you have two versions of an image saved into one file with them stacked on top of each other and use CSS to adjust the margins when hovering. Here's an example of it working successfully: http://minimalpluscreative.com
Trying to do the same thing here, but running into issues with overflow:hidden; not working. Instead, the the full (double) image is shown. Here's what it looks like: http://cl.ly/023p1I1D1W0W3a1T1q1R It should be just the top half of the image with overflow:hidden; preventing the other half from showing.
Help? Some kind of syntax error I'm sure...
HTML:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
</div>
CSS:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite:hover {
margin-top:-61px;
}
I've never seen this done before except with background images, but I don't see why not… it just seems like you need a lot of extra css, and extra html to get it to work as opposed to a background image.
As was said earlier, it's hard to see the problem without seeing your actual code in context, but based on what I see, there could be a few potential things wrong:
You need to wrap the image in a containing element, and assign the width, height and overflow to that. Hidden overflow will hide what's outside of the boundaries that div contains. The image element is the image, it doesn't contain the image, so setting it to overflow:hidden isn't going to hide andything, and assigning it a width will just resize it, not "crop" it (which is the effect you're going for). So you'd need something like:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<a class="sprite" href="#">
<img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
</a>
</div>
with this css:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite img {
margin-top: 0;
}
.sprite:hover img {
margin-top: -61px;
}
I suggest you use 'a' as the containing element, as not all browsers will recognize the hover pseudo-class on tags other than anchor tags.
I know you think using an image instead of a background image is simpler, but using background images, you can accomplish all this with only one element and less css.
In the example site you refer to, the overflow:hidden property is set on the outer 'div#a'
'div#work' in your code should have it's overflow set to hidden.
Thus when you change the margin on your image it will move within the frame of your outer div.
Additionally I had to add a tag name to the hover declaration.
<html>
<head>
<style>
#work{
position:relative;
overflow:hidden;
width:140px;
height:61px;
}
div.sprite {
margin-top:0;
}
div.sprite:hover {
margin-top:-61px;
}
/* instead of an image */
.sprite div{
height:61px;
}
.red {background:red}
.blue {background:blue}
</style>
</head>
<body>
<div id="work">
<div class="sprite">
<div class="red">a</div>
<div class="blue">b</div>
</div>
</div>
</body>