Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to make a div like the one in screen shot I have attached.
It opens when we click on Apps and closed when click on any where else on the page. Especially the part outlined in green and gray.
I have no idea how to do it.
Thanks in advance.
You should elaborate what you want? Do you want a popup or an arrow like one shown in the screenshot?
Try this: http://jsfiddle.net/F47uy/
CSS:
#arrow{
border-left: 15px dashed transparent;
border-right: 15px dashed transparent;
border-bottom: 15px dashed grey;
margin-left:200px;
width:0;
height:0;
}
#box{
background:grey;
width:300px;
height:300px;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
As mentioned in the title, the width changes slightly when focusing on the input element.
This is a problem that occurs in IE11 and Firefox 83.0.
(It does not occur in chrome and safari.)
If you know the cause, please let me know.
This is probably because focusing creates a border, as you can see in the following example:
.focus:focus {
border: 5px solid green;
}
<input class="focus" />
You can fix this by using adding an empty border first:
.focus {
border: 5px solid black;
}
.focus:focus {
border: 5px solid green;
}
<input class="focus" />
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm looking for some techlogy that I can make an effect at the bottom of <input> element when I hover on it. Like this:
If I understand correctly, you're looking for box-shadow property. Like this:
input {
width: 280px;
height: 20px;
border: 3px inset;
}
input:hover {
box-shadow: 0 2px cyan;
}
<input type="text">
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am trying to style a <button> by removing the sides of the border and keeping the top and the bottom line intact. Is there any way to do this?
Remove all borders, only define the top and bottom border:
button {
border: none;
outline: none;
border-top: 1px solid #111111;
border-bottom: 1px solid #111111;
/* For styling purposes */
padding: 5px;
}
<button>button</button>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I know the title wasn't the best way to describe it. But I am trying to recreate the symbols shown in the image on both sides of the word interval. I have no idea how to do this. Is it a symbol? Or some kind of graphic using svg?
Here is my solution,
You can use border-width to create that shape
To create the first L shape, make top and left border-width 2px.
Similarly for 2nd L shape make border-width of top and right 2px;
span:after,span:before{
content: "";
width: 41px;
height: 6px;
display: inline-block;
margin:3px;
vertical-align: bottom;
border:1px solid grey;
}
span:after{
border-width:2px 2px 0 0; /*top right bottom left*/
}
span:before{
border-width:2px 0 0 2px;
}
<span>Interval</span>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've got the following code for my html section
only the first heading creates a border and the rest are all over the place, below is two photos of what it should look like, and what it does look like...
![enter image description here][1]
![enter image description here][2]
Any ideas? Thanks!
The code is a bit messy. But if this is what you want: http://jsfiddle.net/96z7U/3/
These are the changes:
<h1 class="titleBorder">Module Details</h1>
It had no class.
#moduleDetails {
border-style: solid;
/*border-width: 1px;*/
padding: 5px;
}
I'm not sure if you intended that border.
And:
.titleBorder {
padding-top: 10px;
border-style: solid;
border-width: 1px;
margin:0 auto;
float:left;
width:100%;
}
Add float left and width 100%
The problem seems to be connected with the fact that the content below the heading have the style float:left which causes the issue. Try adding the following code before each heading with class 'titleBorder':
<div style="clear:both"></div>