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;
}
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 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 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 remove white space which is colored black on image from both side
to remove this white space from header i add margin-left:-10px
.site-header-main {
float: left;
width: 100%;
margin-left: -10px;
padding: 44px 0 22px;
padding: 4.4rem 0 2.2rem;
background-color: #fff;
}
After adding this I successfully removed white space from the left side but a grey color space comes on right side image here
Please remove the margin: -10; you put in the css and add this to it.
.site-header-main .container {
padding: 0px;
}
The container class is having a margin of 3.3em from both left and right. so this will fix this glitch.
if You want to remove this from the whole site try this
body .container {
padding: 0px;
}
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a background img 120x30, but it's not showing in the full size..why?
Please look here http://f1u.org/en - under each article readmore button.
<a> is an inline element. So, an inline element in not take height, width , vertical margin & vertical padding in it's.
Then we have to define display:block in the css like this:
.comments-link, .readmore-link {
display: block;
}
Add display: block;
.comments-link, .readmore-link {
background: url("images/readmore.png") no-repeat scroll 0 0 transparent;
border: medium none;
display: block;
font-size: 11px;
height: 30px;
line-height: 30px;
padding: 0;
text-indent: 8px;
text-transform: uppercase;
width: 120px;
}
The a tags are inline elements so width won't apply, they will automatically resize depending on content. If you change the display to block then you can control the elements width and height and should see the image. You might want to also float them so if you have the comments link and read more link they will be displayed side by side. Add the following to your style sheet:
.comments-link, .readmore-link {
display: block;
float: left;
}