I am having trouble getting my hover to work on my button. I want my button to not have a border but to display a blue border when my mouse is on top of it. I also need it to change the image when the mouse is not top but that has been sorted, therefore the changeImage function :). Just need help with the border, any suggestions?
HTML
<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda"
/>
CSS
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
.button:hover {
border:2px solid #0000ff;
border-radius: 20px;
}
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
}
.button:hover {
border: 2px solid blue;
border-radius: 20px;
cursor:pointer;
}
<input type="button" class = "button" value="Panda"
/>
Missing closing bracket }
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
}
.button:hover {
border:2px solid #0000ff;
border-radius: 20px;
}
<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda" />
The border on hover will appear if you add the closing bracket to your css rule button. You just missed that ;-)
Concerning the changing of the images I am not sure if I did understand it right ... but at the end: without the JS code cannot be said much about it. Here it would be helpfull if you could show the JS code ;-)
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
} /* <<< add missing bracket here */
.button:hover {
border:2px solid #0000ff;
border-radius: 20px;
}
Related
so I have text on the top when you hover over it, it gains a box shadow. but unfortunately, the text below it gets moved.
I have searched for a while but could not find any solutions. Please help.
edit:
butto{
border:none;
outline:none;
background-color:white;
padding:2px;
cursor: default;
}
butto:hover{
background-color:#e3e3e3;
display: inline-block;
box-shadow: 2px 2px grey;
}
html{
background-color:black;
}
<butto onClick="print()" class='no-print'>Print</butto>
<p style="color:white;">Text below!</p>
Just move display property from the hovered to the general state:
butto {
border: none;
outline: none;
background-color: white;
padding: 2px;
cursor: default;
display: inline-block;
}
butto:hover {
background-color: #e3e3e3;
box-shadow: 2px 2px grey;
}
html {
background-color: black;
}
<butto onClick="print()" class='no-print'>Print</butto>
<p style="color:white;">Text below!</p>
The reason why your text below is being pushed, is because you have display: inline-block property assigned to the hover class.
Removing it will bring it to default display: initial and will solve your problem.
P.S. also make sure to update <butto> tag to <button>, as that might result an unexpected behaviour while developing.
Try to change your display: inline-block to content
also read what is display: content here
butto{
border:none;
outline:none;
background-color:white;
padding:2px;
cursor: default;
}
butto:hover{
background-color:#e3e3e3;
display: content;
box-shadow: 2px 2px grey;
}
html{
background-color:black;
}
<butto onClick="print()" class='no-print'>Print</butto>
<p style="color:white;">Text below!</p>
Disclaimer: I am decently new to HTML. I know this is (most likely) going to be marked as a repeat, however i am not able to word it out and search so i am unable to find the information i need, so i came to ask this very simple question on stack overflow.
I have a quick HTML login form, with a div:
In the image given above there is my login form aligned to the right, and there is a 2px black border surrounding it, is it possible to make the border only enclose the login form and not the extra whitespace in the left.
Result wanted:
Thanks!
Code:
<!DOCTYPE html>
<html>
<head>
<style>
html body {
margin:20px;
}
#login-form{
padding:30px;
border:2px solid black;
}
#title-login{
font-family:Arial,sans-serif,serif;
margin-right:235px;
}
.inpt{
border-radius:3px;
width:235px;
height:30px;
font-size:20px;
border: 1px solid black;
margin:2px;
}
.userinpt{
width:315px;
}
.passwdinpt{
margin-right:83px;
}
.login-button{
background-color: transparent;
color: black;
border: 1.5px solid #008CBA;
padding: 13px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius:5px;
margin-right:210px;
}
.login-button:hover {
background-color: #008CBA;
color: white;
}
#ask-reg{
font-family:sans-serif;
font-weight:lighter;
margin-right:10px;
}
#link-reg{
}
.link {
color: #0099ff;
text-decoration: none;
}
.link:hover {
color: #007acc;
transition-duration: 100ms;
transition-property: all;
border-bottom: 1.3px solid black;
padding: 0 0 0.8px;
opacity:100%;
}
.link:active {
color: #99d6ff;
}
</style>
</head>
<body>
<div align="right" id="login-form">
<h1 id="title-login" >Login</h1>
<form action="subindex.php" method="post" >
<input type="text" class="inpt userinpt" name="usrname" placeholder="Username or E-mail"><br>
<input type="password" class="inpt passwdinpt" name="passwd" placeholder="Password"><br><br>
<button type="sumbit" class="login-button" name="logn">Confirm</button><br>
</form>
<br>
<p id="ask-reg" >If you do not have an account, register <a id="link-reg" class="link" href="register.html">here</a>.</p>
</div>
<script>
</script>
</body>
</html>
the border will always be surrounding the element width and height including the padding. change the width of the form and if you want it to align to the right use:
form {
width: 30%;
margin-left: auto;
}
The easiest way to do this is to set the width and float:right property on your #login-form element. Here's an example on repl.it: https://repl.it/#TrishaAguinaldo/example-border
Also, try not to use the <br> to break html elements. You can just set the margin/padding on an element for that.
I'm looking at a text boxes here. They have a very nice effect. How can I achieve same effect with CSS. This is what I'm able to get but it's not close to that.
What I'm trying to achieve:
By default the textbox has greyish outline and when on focus it changes to blue color. I want a similar effect. I tried using outline property and shadows (in code below) but couldn't get that.
My attempt to get that effect (https://jsfiddle.net/7jphmdzf/):
#tags {
width:500px;
height:30px;
border: 1px solid grey;
border-radius: 10px;
}
input:focus {
outline: 0;
box-shadow: 0 0 0 0.7pt blue;
}
<div class="ui-widget">
<input id="tags">
</div>
You can use the following solution (https://jsfiddle.net/7jphmdzf/1/):
#tags {
outline:0;
width:500px;
height:30px;
border: 2px solid #ccc;
border-radius: 8px;
font-size:24px;
padding:8px 12px;
}
#tags:focus {
outline:0;
border: 2px solid #0097cf;
border-radius: 8px;
}
<div class="ui-widget">
<input id="tags" placeholder="Tags">
</div>
To change the color of the outline on :focus you have to set the border. There is no need for styling the outline or box-shadow of the <input>.
Try This,
#tags {
width:200px;
height:30px;
border: 2px solid grey;
border-radius: 10px;
}
#tags:focus {
outline: 0;
border: 2px solid #109cdf;
}
<div class="ui-widget">
<input id="tags">
</div>
I am not sure how to make a separate line as shown in this image.
This is what I am doing:
.separate-line {
background-color: #D8D9DE;
border-width: 0;
color: #D8D9DE;
height: 1px;
}
I added this html to show the border line:
<div>
<hr class="separate-line">
<input...>
</div>
The result shows a normal border. But I want to display a separate horizontal line.
If your looking to create a two coloured/seperate lined <hr>, this is a way that you can do it
If you zoom in close, you can see the difference in colours between the top half of the line and the bottom half
I've added a darker background so you can notice the difference in colour
.separate-line {
background-color: #fff;
color:#fff;
height: 2px;
border:0;
border-top:2px solid #aaa;
}
input {
width: 96%;
margin-left:2%;
}
body {
background-color: #ddd;
}
<div>
<hr class="separate-line">
<input type="text">
</div>
For Firefox (some reason have to double hr height):
.separate-line {
background-color: #fff;
color:#fff;
height: 4px;
border:0;
border-top:2px solid #aaa;
}
input {
width: 96%;
margin-left:2%;
}
body {
background-color: #ddd;
}
<div>
<hr class="separate-line">
<input type="text">
</div>
Hello Try This This Might Help you as you want a separate border.
hr {
display: block;
border-style: inset;
border-width: 2px;
background-color: #D8D9DE;
}
you can increase the border using border-width:
Hi guys i would like the border to surround my whole <div id=wedding> but it wont wrap around the image and the text within the <div>. Please help my code is below:
HTML:
<div id="Weddings">
<img src="images/gallery/weddinggh.jpg">
<br>
<a href="gweddings">Click here to check out pictures of
<br> our past wedding cakes<a>
</div>
CSS:
#Weddings {
padding: 2px;
border: 1px solid;
}
#Weddings a:link {
text-decoration:none;
color:black;
font-size:16px;
font-family: "footer";
}
#Weddings img {
width:200px;
height:300px;
}
#Weddings {
padding: 2px;
border: 1px solid;
width:200px;
}
you just need to set a width to your div :)
Here's an example : http://jsfiddle.net/f4t2Z/
You need to define a border color
#Weddings {
padding: 2px;
border: 1px solid red;
}
or whatever.
Have you tried
#Weddings img {
width:200px;
height:300px;
display:block;
}