I am looking at making an animation using auto-animate and 2 slides.
The animation is made of 5 images.
Using <image> stack me the images on an horizontal line .. using divs stack them vertically.
I would like the second slide to arrange the images on a diagonal.
The best for me would be to position the images freely but I don't know how to do that :( ?
To position an item in CSS, try this:
<style>
#image1 {
position: absolute;
top: 100px;
left: 100px;
}
</style>
<img src='my-image.jpg' id='image1'/>
See https://www.w3schools.com/cssref/pr_class_position.asp for more details.
:)
Related
I'm new in using bootstrap 3. I need your help on how to make images responsive while using position absolute, top and left? My images are on top of one image and whenever I re-size the browser the images will not be in their place anymore(desktop size).
from http://www.w3schools.com/cssref/pr_class_position.asp
so something like this: (in one of the relevant .css files)
img.topleftStuck {
position: absolute;
left: 100px;
top: 150px;
}
then something like this:
<img src='path/to/crappy_image.gif' class=topleftStuck>
this can also be achieved with div in similar fashion.. :)
I have two containers which are positioned absolutely one below the other like so:
<header>
<div class="vcenter">
...
</div>
</header>
<div id="wrapper">
...
</div>
CSS:
header {
position: absolute;
top: 0;
height: 70%;
}
.vcenter {
position: relative;
margin-top: -50px;
top: 50%;
}
#wrapper {
position: absolute;
width: 100%;
top: 70%;
}
I'm centering .vcenter vertically with relative positioning. This works fine in all major browsers. Only on IOS Safari on the Ipad it's bugging. Check out the site I'm working on. .vcenter is the container of the logo.
I'm inspecting it through Xcodes IOS-Simulator and also checked on an real Ipad. Is this possibly an IOS Safari Bug? Does somebody have a workaround? I want to keep my header dynamically resizing vertically (height: 70%)...
Thanks in advance for your thoughts.
Desktop Screenshot (how it should be):
IOS-Simulator Ipad Screenshot (how it should't be):
I can't really explain it, but using position: absolute seems to fix your problem:
.vcenter {
position: absolute;
margin-top: -50px;
top: 50%;
width: 100%; /* needed to add to fix horizontal positioning */
}
I think it has something to do with using absolute positioning and percentages on the header. If you inspect the height of the html & body, they aren't actually as tall as your content - so maybe computing a 50% positioning for the vcenter is getting messed up. Not sure...
Have you tried using the transform solution? It generally covers your bases for things like iOS rendering issues (of which there are several more than just this scenario).
Write your class like this (it'll break for IE9 and below, but that's what browser shimming is for and you can use your existing code for the shim using Modernizr)
.vcenter {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That should render .vcenter at the vertical center for all modern browsers as well as iOS Safari.
Okay so I have these divs called "latestWorkTitle" which are positioned absolute and are placed on top of the corresponding image to show its title.
However, I can't get this properly to work. The titles don't show at the corresponding image and when I resize my browser window everything shifts and so on.
I tried creating this jsbin http://jsbin.com/uhoxef/1 with a part of my code to illustrate how it should look like and what is going wrong. Even all the titles go on top of each other in the code while they should be on top of the corresponding images... I'm just basically totally lost at this.
I think the HTML was confusing itself. I also made the thumbnail class the relative layer. HTML renders as we read, from left to right. So putting the title before the image causes the image to show on top and cover the text.
HTML:
<div class="thumbnail">
<a href="portfoliodetail.php?id=10">
<img src="http://www.hlnarchitects.com/img/plain_red.png" />
<div class="latestWorkTitle">title1</div>
</a>
</div>
CSS:
.thumbnail {
position: relative;
overflow: hidden;
float: left;}
.portfolioOverview img {
width: auto;
height: auto;}
.latestWorkTitle {
text-align: right;
font-size: 11px;
text-transform: uppercase;
background: yellow;
position: absolute;
padding: 6px;
top: 0;
left: 0;}
For this to work, each thumbnail class needs to be the relative start for each individual layer. So the thumbnail class is set to relative.
Any object set to absolute (.latestWorkTitle) within this layer will start from the top and left position of the relative object.
You'll need to adjust some details to taste but I hope this helps.
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
I am trying to use sprite images
I have a very basic link
<td align="center">
<img alt="my alt text" src="/Assets/t/myImage.gif" />
</td>
I am struggling for a while, tying to change this and making it use an image in my sprite instead of the src
sprites are large images containing more than one graphic, which are used in CSS as background-image. They are placed as background on block elements which are also sized with CSS using Width and Height. Then, using background-position, the background image is placed where it should be. The image is cropped according to those coordinates and element size, and the rest is ignored (used for other element backgrounds).
For example you have pretty buttons, which have a normal state, a mouse hover state, and an active state (pressed). Just place all 3 images one below the other, in one single image file.
button {display: block; width: 100px; height: 50px; background-image: url(yourImage.png); background-repeat: no-repeat; background-position: 0 0;}
button:HOVER {background-position: 0 -50px;}
button.active {background-position: 0 -100px;}
This will also eliminate the situation when new background image has to be loaded when the state is changed, meanwhile leaving an ugly button for half a second.
Here's an simple example of using sprite images.
The basic idea is to use background image on a fixed sized element (in the example it's an a tag with width/height 20px). Then positioning the image using background-position to select the sprite you need. The :hover selector is used to pick yet another sprite when moused over. Normally you'd have multiple links all using a different sprite from the one image.
css:
a.sprite_button
{
background-image:url(toolbar.png);
width:20px;
height:20px;
display:inline-block;
}
a#button1 { background-position:0px 0px; }
a#button1:hover { background-position:0px 20px; }
html: