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:
Related
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;
}
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 2 years ago.
Trying to make a little database for projects for personal use, not sure how to word it but...
what i want:
what i got:
current code:
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 20px;
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
I used a screenshot editor to create the image of what i want, how can i change the code to get the desired effect?
Thanks for your time and hopefully your response.
I would strongly recommend wrapping your sections into containers or HTML5 elements and style them accordingly
See pen HTML and CSS:
https://codepen.io/aystarz52/full/LYpLYBp
HTML
<body>
<div class="container">
<h1 id="Header">What do you want to do?</h1>
</div>
<br>
<div class="page-content-container">
Games   Code<br><br><br>
Articles
</div>
</body>
CSS
body, html {
background: #FFF;
padding:0;
margin:0;
}
.container {
text-align:center;
border: 4px #000 solid;
padding: 10px 0;
background-color: #000;
}
#Header {
color: #FFF;
}
.page-content-container {
padding:10px;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
Is this more or less what you hoped for?
Set padding and margin to zero for the body, set a margin on the header and position at the top of the body....
body{margin:0;padding:0;box-sizing:border-box}
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 20px;
background-color: #000;
margin:0;
top:0;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
What you can do is subtract 10px from the padding-bottom of #Header and add it to padding-top:
#Header {
padding: 30px 0 10px; <--plus ten on top, minus ten on bottom
}
#Header {
text-align: center;
color: #FFF;
border: 4px #000 solid;
padding: 30px 0 10px;
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
To achieve what you want, the easiest way is to increase padding-top on #Header.
Your CSS has some issues, though. I'm listing them here:
border-top: ;
border-right: ;
border-bottom: ;
Omitting the right side of the declaration is not allowed. You need to either add values to assign to those CSS properties, or remove the lines completely.
border=left: ;
I'm assuming this is just a typo - it has to be border-left. Aside from that, same as stated previously. You must assign a value, or remove the declaration.
Background: #FFF;
CSS property names never contain capital letters. Instead, use background: #FFF;
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 40px 20px 20px; /* short for 40px top, 20px left & right, 20px bottom */
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
Set margin-top:0px; in #Header style, That should work for you.
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 am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.
Here is my code:
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
just change your a:hover to .button:hover a
everything will look great. :>
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
.button:hover a{
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
Ok so heres the deal. You made it too complex. If you had problem with the spaces, its because < a > tag is diplayed inline by default and it makes gap between it's container sometimes.
Here's your code, cleaned and working : https://jsfiddle.net/m6dphvm1/
<a class="button" href="https://www.google.com"> Click Me! </a>
a.button {
border: 2px black solid;
border-radius: 4px;
padding: 5px;
color: black;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: black;
color: white;
}
The problem with your CSS is that your anchor(link) color is black, when you hover on the button you are changing the background of button to black, i.e both anchor color and background are black. due to that text is not being visible.
Change either background-color of button or anchor color to a differnt color and that should work. For example I'm changing the color of anchor to blue.
.button:hover {
background-color: black;
color: white;
}
a {
color: blue;
text-decoration: none;
}
a is an inline element, meaning it's designed to be nested in plain text (or what otherwise could be). It's only occupying the immediate space around the text.
However, a tags are also totally allowed to wrap around elements according to the HTML5 spec (not that anyone would stop you otherwise, it's just convention). So if you want the a tag to occupy the entire space just wrap it around the element.
Better yet, only use the a tag. The rest is basically redundant:
<a class="button" href="https://www.google.com">
Click Me!
</a>
.button {
width: 66px;
height: 20px;
border-radius: 4px;
padding: 5px;
color: black;
border: 2px black solid;
}
.button:hover {
background-color: black;
color: white;
}
https://jsfiddle.net/hyp4a9ya/
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;
}