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.
Related
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 2 years ago.
Improve this question
I'm trying to create a Triangle on top of a rectangle div. The triangle needs to be the width of the page and also be responsive. The upper right and left parts of the div (where no triangle exists) needs to be transparent.
I have an image of what it should look like but it's very difficult to see due to the similar dark colors. The upper right and left of the rectangle div needs to be transparent.
Does anyone know how I can recreate the highlighted rectangle in the image below?
I've been trying for hours by searching through stackoverflow and haven't been able to figure it out from other questions.
Thank you!
You can try that :
<html>
<body>
<style>
body {
margin: 0;
}
.rectangle {
width: 100%;
height: 100px;
background: #777;
}
.triangle-up {
width: 0;
height: 0;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
border-bottom: 100px solid black;
}
</style>
<div class='rectangle'>
<div class='triangle-up'></div>
</div>
</body>
</html>
(I changed the colors to make it easier to see)
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.
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 7 years ago.
Improve this question
I want to create a button looking like this:
Is there a way to create this button using only CSS, without using the attached as a background image. I tried playing around with border-radius but was unable to achieve this.
Closest I can get you is this.... for a width of 410px and height of 294px..the actual image is by far larger than this snippet's window...good luck
div{
width:410px;
height:294px;
background:#ed1e79;
border-radius:45%;
}
<div></div>
Yes, it is possible.
Here's how you do it :
.pinkbutton {
border-radius: 240px / 120px;
background-color: #ed1e79;
width : 175.2px;
height : 126.6px;
}
<div class="pinkbutton"></div>
.ellipseDiv {
height: 50px;
width: 100px;
border: 2px solid #005;
border-radius: 50px / 25px;
background-color: #EE5D20;
}
<div class="ellipseDiv"></div>
That should get you what you want.
This example is made with a div, but can be just as easily done with a button!
You have to play with the property border-radius, so for example it will be
#your-button {
background-color: some-color;
border-radius: some-percentage;
}
Look at this
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Help! I've read every question here and every tutorial online… but I can't seem to make the left and right column bottom border appear on my layout that I'm trying to put together.
Here is a link where I am currently working on it.
Can anyone tell me what I am doing wrong?
My current css is:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
margin-right: 20px;
background: white url(http://i1109.photobucket.com/albums/h423/thesinglemomoirs/templates/pinkcupcake/38d73024.png) repeat scroll top left;
border: 2px solid black;
}
.fauxcolumn-outer .fauxborder-left, .fauxcolumn-outer .fauxborder-right, .fauxcolumn-inner {
height: 100%;
}
The solution to your problem is to set the box-sizing like so:
.fauxcolumn-inner {
box-sizing: border-box;
}
Your problem is that without box-sizing to border-box when you set your height to 100%:
.fauxcolumn-outer .fauxborder-left,
.fauxcolumn-outer .fauxborder-right,
.fauxcolumn-inner {
height: 100%
}
and THEN add margins, padding or borders, your true height ends up being greater than 100%
You could replace border with an inner box shadow with no blur:
box-shadow: inset 0 0 0 2px #000000;
.yourclass {
border-bottom:thick solid black;
}
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
My page here on the left hand nav is showing the categories (div.cat) spaced out at 48px height and I can't work out why.
There's no padding or margins or height specified. If someone could have a look on an inspector to see what could be causing it that'd be great.
The clearfix is causing issues within the child. The whole structure is a tangle of block and inline elements that should be cleaned up in one way or another. Any block elements within each category seem unnecessary. You probably also want to use a ul for greater semantic meaning.
There is class .cat declared in the css file.
.cat, .cat a {
padding: 0 5px;
color: #444066;
}
remove the padding from there or reduce the padding from 5px to 0px
and another thing is found is in the body class
body {
line-height: 1.6;
font-size: 15px;
}
which increses line-height of all divs and elements