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 5 years ago.
Improve this question
What I would like to do is make a bordered element with a horizontal line inside which contains an image at the top and text at the bottom. I had no idea how to make a div with a border and a horizontal line separating it.
What you've asked is how to create a horizontal border between two sections of a div, the easiest way I can think of is to just use an <hr /> element. You could also of course do this by stacking two divs vertically, but I think this is simplest.
.split-box {
border: black 1px solid;
border-radius: 20px;
}
.split-box hr {
border-width: 1px 0 0 0;
border-color: black;
margin: 0;
}
.split-text {
padding: 10px;
}
<div class="split-box">
<div class="split-text">
Top part of box
</div>
<hr />
<div class="split-text">
Bottom part of box
</div>
</div>
You can run the code snippet above to see this in action.
Related
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 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 5 years ago.
Improve this question
I am trying to make this todolist on my own https://www.w3schools.com/howto/howto_js_todolist.asp
But this piece of css code:
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
adds a check before the list, how does it put the check mark before the list?
The "check" is just the border of an empty box given a specific size, then rotated. The ::before pseudo element goes at the beginning of the content, the width and height form a rectangle, the border puts lines on two of the four edges, then the transform rotates it so the border looks like a check. Kinda a roundabout way of doing it. They could have also just used `content: 'some checkbox char'``.
If you change the border-width or transform things, you'll see what I mean.
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 7 years ago.
Improve this question
So I would like to have a kind of line break '-----------' between two divs.
Is there a way using bootstrap/css to make this responsive?
You could use the css property: border-bottom together with the border style: dotted to achieve the effect. Or the solid to have a solid line.
Example:
CSS:
.first {
border-bottom: dotted 1px black;
}
.second {
border-bottom: dotted 1px black;
}
HTML:
<div class="first">
<p>
This is first
</p>
</div>
<div class="second">
<p>
This is second
</p>
</div>
It sounds like you want to use the
<hr />
tag. If your divs start out side-by-side and then stack on smaller screens, you'll want to use media queries to decide when to display the horizontal rules.
Bootstrap has built-in classes to help you do this. They are documented here under the "Responsive utility classes" heading.
As Eric Zaporzan said, you could use the horizontal rule tag <hr/> to draw a line across the page. However if you want it strictly between the two divs then you could simply use border-bottom: 1px solid black; on the higher div.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have link that I want a border around but I can't get the border to appear closer to the text. Below is the css for the element;
.signup{
border: 1px solid;
border-radius: 10px;}
which displays the border as;
If I add height: 1.2em it reduces the bottom spacing but not the top;
how do I reduce the spacing above the text?
I'm using the bootstrap flatly theme http://bootswatch.com/flatly/ the element I want the border around is 'WrapBootstrap' in the top right of the navigation bar.
You should give the border style to the <span> itself.
span{
border: 1px solid black;
border-radius: 10px;
padding: 5px 10px;
}
Editing the padding will allow you to move the border from the text.
In your case the position of the <span> and the .margin might be causing the discrepancy. Like #dfsq pointed out, there could be other factors.
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>