What I'm trying to do it have my picture as a button and I've been using the 'input type"image"' for it and it's been going fine and dandy until I tried changing the height of my picture, width is all cool to change but height.. Nuhu.
Here's the code.
<html>
<head>
<style type="text/css">
.startavisningstop
{
display: block;
margin-top: 0px;
background: url("https://imagizer.imageshack.us/v2/102x24q90/822/kac9.png") no-repeat center center;
width: 102px;
height: 24px;
}
</style>
</head>
<body>
<input type="image" value=" " class="startavisningstop" onclick="location.href='latest_inlog_include.php?action=stoppa'">
</body>
</html>
I'm not using the green picture as a background on my site but I'm on a computer that doesn't allow uploads so hence why I'm using the green picture in the example.
I'm using a picture that's got the dimensions 102px width and 24px height.
As you can see, I can freely change the width but when I add a height line it gives me a transparent broken image picture on top of my own picture.
P.S. If anyone knows any better way to do this I'm all good with some tips, seeing as it doesn't look very appealing right now.
Just use a button instead of your input tag:
<button class="startavisningstop" onclick="location.href='latest_inlog_include.php?action=stoppa'"></button>
.startavisningstop {
display: block;
margin-top: 0px;
background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Auto_Racing_Green.svg/800px-Auto_Racing_Green.svg.png") no-repeat center center;
width: 102px;
height: 24px;
border:0;
}
Related
I am creating a Navigation menu containing four icons but I can't get my head around how to achieve it.
Checkout my desired outcome:
Desired Outcome
I tried,
navIcon:hover
{
background-size: 50px; border-radius: 20px;
}
first I think it's better if you can refer "how do I ask a question".
If you are using an icon, use
font-size:50px
instead of,
background-size:50px
or,
You can transform the size when hovering to scale up.
div{
width: 30px;
height: 30px;
margin: auto;
margin-top: 50px;
background-color: black;
}
div:hover{
transform: scale(2,3);
border-radius: 5px;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
use,
transform: scale(2,3)
The above code will increase the element to two times its original width and three times its original height when hovering.
htmlcssanimationtransformscale
I am using particles.js to set a full screen particle effect, I specified I wanted this animation full-screen by using height: 100vh; this has worked perfectly and has fulfilled what I wanted to achieve. I then tried to add text on top of my particle animation and then proceed to vertically center it using line-height: 100vh;. Although when doing this my animation stops and turns to a pure grey background and my text is centered? I want my animation to continue running with the text on top of it (being centered), I am unsure what to do to stop my text messing my animation. I have included a video below of what is happening.
Video (Streamable)
HTML
<div id="particles-js">
<div id="main-text">Center Me</div>
</div>
<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/particles.js#2.0.0/particles.js"></script>
<script>
particlesJS.load('particles-js' , 'particles.json', function(){console.log('particles.json loaded...')})
</script>
<!--End Of Scripts-->
CSS
*{
padding: 0;
margin: 0;
}
body{
font-family: sans-serif;
overflow: hidden;
}
#particles-js{
background:#4a4a4a;
height: 100vh;
}
#main-text{
text-align: center;
/* line-height: 100vh; */
}
Please try to change the way you're centering the text to this :
#main-text{
/*text-align: center;*/
/* line-height: 100vh; */
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
I believe this is because the line-height is covering the entire viewport, even if the font is still small ( I can't say for sure this is the case, it's just an assumption )
I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output
I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.
This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>
Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}
Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}
You could also set the image to display: block and add padding, if it does not mess with your layout.
Is there any way to allign a button to the center of the DIV.I was able to make it work with different strategies using a padding-top:2px and padding-bottom:2px or with using a margin-top and margin-bottom.But here comes the problem,basically it is a moving DIV i.e it might differ if the user have more inforamtion in it.For example user enters only work number in the input text field it will be showing up only the only work phone number.But if the user enters work,home and additional number,it need to show all the information entered,which will vary the size of the DIV.What happens is the div will increase in size and button still stays at the top of the div.Is there any way to make the button fixed at the center even after the DIV varies in size.Can it be achieved in CSS or we need to used javascript to make it work.
Vertical align is always tricky.
However where is a demo of moving centered button with CSS and moved with jQuery.
As it moves, the button remains at center as the position has not been defined.
#outer {
text-align: center;
width: 200px;
background: #ddd;
height: 200px;
position: static;
display: table;
}
#inner {
line-height: 200px;
display: table-cell;
vetical-align: middle;
}
I think it can be done with pure css, is this what you are looking for?
<html>
<head>
<style type="text/css">
.wrapper {
position: relative;
width: 300px;
height: 200px;
background: #eeeeee;
}
.button {
position: absolute;
top: 41%;
left: 33%;
}
</style>
</head>
<body>
<div class="wrapper">
<input class="button" type="button" value="Button" />
</div>
</body>
</html>