Long story short..I need my navbar to float on top of an image background (don't want to make the image into a background image). I have managed to place the navbar on the image but its in the left corner. I need it in the right corner! Please help.
http://vetamera.nu/DK/index.html
Just add right: 0; to your .top-nav class.
.top-nav {
position: absolute;
top: 5px;
right: 0;
width: 750px;
}
Related
I've created a pile of images on which you click through. By clicking the top image it moves the z-index back by the amount of images. These images need to have a shared description. If I put position:absolute on them (to stack them). The description also gets stacked. Is there a way to keep them it under the images?
.image-pile {
position: relative;
}
.images img {
position: absolute;
width:300px;
}
https://jsfiddle.net/td59pr1h/
The .image-pile had no height because the content was positioned absolute. Fixed it by calculating the height in javascript.
var imgheight = $( ".images img" ).innerHeight()
$('.images').css('height', imgheight)
I want to ask if there is some way to force Dropzone to use the dimension (dimension ratio) for preview, based on the uploaded image rather then specifying them in Dropzone config.
I want to display the preview of the image in the same dimensions ratio as the original, but smaller.
Thanks
Jan
You should redefine the css styles below :
.dropzone .dz-preview .dz-details, .dropzone-previews .dz-preview .dz-details {
width: auto !important;
height: auto !important;
}
.dz-details img {
width: auto !important;
height: auto !important;
position: relative !important;
}
I have problems to display a bitmap which I create in my C# Application. I create following bitmap:
int w = 150;
int h = w/3;
Bitmap aBMP = new Bitmap(w, h);
using (Graphics G = Graphics.FromImage(aBMP))
{ ...G.FillRectangle(...) } //here I am painting an image
later in the application I am saving the image as following:
aBMP.Save(anIMGfilename);
By a right click on the resulting image properties I dont receive the sercurity tab which I get with any other Bitmap image. Have you ever seen this behavior?
When you use position absolute you must not use float,and u must set left and top and its parent has a position relative
<!--[if IE 8]>
#frame{
position:relative;
}
#image {
position: absolute;
text-align: right;
height: 70px;
width: 400px;
left:0;
top:10px;
}
<![endif]-->
I use CSS3 Keyframes to make a image circle run without moving, i means like a wheel but circle not moving, it stay as it is.
Here is my CSS code :
.step_7 {
background: url(../images/step7.png) no-repeat center top, url(../images/outer_glow.png) no-repeat 0 -7px;
top: 377px;
left: 417px;
width:102px;
height: 104px;
z-index: 4;
}
#-webkit-keyframes circle-run
{
0%{
-webkit-transform:rotate(0deg);
}
100%
{
-webkit-transform:rotate(360deg);
}
}
.animation {
-webkit-animation: circle-run 2s infinite;
-webkit-animation-timing-function:linear;
}
Javascipt :
$('.btn1_inv').click(function () {
$('.step_7').addClass('animation');
});
here is my sample code :
http://jsfiddle.net/vLwDc/25/
From these above code, my element run but it move a little bit, how can i fix it ? thanks in advance .
do you mean why is it wobbly ? if so it's coz width height are different so it will be like that as it's not a perfect circle
I want to make my image grow to 1500px in height (and hopefully the width would just automatically re-size itself, if not, I could easily set it too)
I was using jquery .animate() but its just too choppy for my liking...
I know I can use the :
-webkit-transform: scale(2);
But I want it to be set to a specific size.. not just double or triple the image size.
Any help?
Thanks
You're looking for the -webkit-transition property for webkit. That allows you to specify two separate CSS rules (for instance, two classes) and then the type of transition to be applied when switching those rules.
In this case, you could simply define the start and end heights (I did both height and width in the example below) as well as defining -webkit-transition-property for the properties you want transitioned, and -webkit-transition-duration for the duration:
div {
height: 200px;
width: 200px;
-webkit-transition-property: height, width;
-webkit-transition-duration: 1s;
-moz-transition-property: height, width;
-moz-transition-duration: 1s;
transition-property: height, width;
transition-duration: 1s;
background: red;
}
div:hover {
width: 500px;
height: 500px;
-webkit-transition-property: height, width;
-webkit-transition-duration: 1s;
-moz-transition-property: height, width;
-moz-transition-duration: 1s;
transition-property: height, width;
transition-duration: 1s;
background: red;
}
Tested in Safari. The Safari team also posted a pretty good write-up on CSS Visual Effects.
However, I would also recommend having another look at jQuery, as the newer CSS3 stuff won't be fully compatible with versions of IE.