On my site I have added a border-left to the sidebar. The issue I have is that this border is very close to the text to the left of it and I would like to move the border slightly to the right. I have tried various ways of doing this, but all were unsuccessful.
.blog-sidebar {
width: 250px;
border-left: 1px solid #000000;
}
Have you tried adding a margin on the left-hand side? For example:
.blog-sidebar {
width: 250px;
border-left: 1px solid #000000;
margin-left: 20px;
}
That should give you some space between the border and the content on the left.
For reference, see the CSS box model
http://www.w3schools.com/css/css_boxmodel.asp
Related
I'm trying to replicate the design of google calendar, and its text input box looks like this when clicked:
https://ibb.co/6Hqrnt4
but what I created looks like this:
https://ibb.co/HprQ125
My code was like
.element{
border-radius: 2px;
border: none;
border-bottom: 2px solid;
}
As you can see, the bottom border of mine gets whined up at the end.
The counterpart of google calendar isn't. I've noticed that the bottom border doesn't perfectly fit the original grey box(zoom in the image), but it doesn't really matter. How can I achieve this?
You can do something like this by giving the blue border to a new element.
.grey-box {
width: 100px;
height: 50px;
display: block;
background-color: #f1f1f1;
border-radius: 5px;
}
.blue-line {
display: block;
width: 100px;
border-bottom: 5px solid blue;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
<div class="grey-box"></div>
<span class="blue-line"></span>
Just taking a guess here as I’m on mobile. Maybe the button is within a div with a bottom border and small border radius
<div class=“blue-line”>
<a href=“#” class=“grey-back”>
<\div>
I'm trying to use this CSS border hack to create triangle shapes. They work, but I can't get them vertically centered in their container.
I would use the black triangle entity but it looks different in every font and browser and has weird line height AND isn't vertically centred either. (Why do they even bother making these characters if you can't use them?)
Anyway you can see the Codepen here.
Arrows CSS:
.ico_arrow_left {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-right: 0.75em solid #CCC;
}
.ico_arrow_right {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.75em solid #CCC;
}
Other notes: I'd prefer not to affect the height of any of the containers. Only evergreen browsers needed.
The problem arises due the line-height you have set. However I've edited your codepen and here is the new one, also I've not deleted your original line-height you have set.
With the increase in line-height, the .btn elements also inherited the line-height and were not aligned properly in the middle. I have added a few changes to your codepen which I have made clear by commenting on the line.
http://codepen.io/anon/pen/MwBqyp
I have a menu, when the menu item is active it should have a border to the right, the issue is that the border is doesn't render correctly, please notice the bottom edge of the border.
This image shows the issue:
http://imgur.com/FC1n8qA
Jsfiddle: http://jsfiddle.net/2yj3hyqm/5/ (See full screen for better view)
CSS code:
.border {
border-right:4px solid #000;
}
Thanks,
The rendering is correct.
Take a look at this:
border: 10px solid black;
border-right-color: red;
border-bottom-color: blue;
border-left-color: green;
Note how the borders meet at the corners. Your menu items have a thick right border and a thin bottom border. The way borders meet at the corners the thick right border looks slightly crooked at the bottom. Try and remove the bottom border and see how the right border gets straight again.
You can try nesting elements in the menu item and apply the border-bottom and border-right to different elements or use a pseudo element to fix the appearance.
As mentioned, the problem is the bottom border overlaping the right one. So, a possible solution is to "fake" a border using :after pseudo, placing it at the right of the element:
Updated JSFIDDLE
.border {
position: relative;
}
.border:after {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 4px;
background: black;
content: "\00a0"; /* invisible content */
}
Borders meet at angles so you would have to use an alternative for the right border
A box-shadow would work quite well
JSfiddle Comparison (exaggerated)
HTML
<div class="border"> </div>
<div class="shadow"> </div>
CSS
.border,
.shadow {
background-color: grey;
width:100px;
height:100px;
margin-bottom: 10px;
border-bottom: 5px solid lightgrey;
}
.border{
border-right: 20px solid black;
}
.shadow {
box-shadow: 10px 0 0px 0 black;
}
I am trying to add a line(solid border, color) to a td. How can I trim line top and bottom with 2 px or add padding top and padding bottom to line?
My expected output would be
I have a black border for a td with height 10 px. I want to make top 2px and bottom 2 px of that line to white color or apply 2 px padding to that line.
I am trying to separate 2 tds in a table with icons in side each td.I am trying to add a line between 2 tds with a line. I am adding border style of td to make it look like a line. I want that line height to be small and not touching td top and bottom borders.
My code in fiddle is here
.leftLine {
border-left-style: solid;
border-left-color: lightgray;
border-left-width: 1px;
padding-bottom: 2px;
border-bottom-left-radius: 2px;
height: 2px;
}
.icoContainer {
text-align: center;
width: 40px;
}
To adjust the spacing just use padding-top: ***px and padding-bottom: ***px in each <td>.
Similar for the borders: border-top: solid black 2px and border-bottom: solid black 2px
I didn't completely get your Question:
But according to my understanding you are trying to give left border to a single td and you want its height should be small.
This cannot be achieved by adding border style to td direcetly.
I would suggest to use below code:
CSS CODE would be:
.leftLine {
border-left: solid black 1px;
margin: 0px;
padding : 0px;
}
.icoContainer {
text-align: center;
padding-top : 5px;
padding-bottom: 5px;
}
h1{
margin: 0px;
padding: 0px;
}
Add "leftLine" css to the innder div of the TD.
and you can change padding of "icoContainer".
This will add padding to TD and border to inner div.
Please let me know if my understanding about your question is correct.
I have the following HTML structure
<div id='parent'>
<div id='child-1'>Some text goes here</div>
<div id='child-2'>Different text goes here</div>
<div class='clear'></div>
</div>
I also have the following CSS
#parent {
width: 800px;
position: relative;
}
#child-1 {
width: 500px;
float: left;
}
#child-2 {
width: 200px;
float: left;
}
.clear {
clear: both;
}
Now, the contents of the child DIVs (child-1 and child-2) could be anything, so eventually child-1 might have longer height than child-2, or child-2 might have a longer height than child-1.
What I want to do, is have a vertical line between child-1 and child-2, and this line has the length of the DIV that is of longer height. I tried border on both DIVs, (right border for child-1 and left border for child-2), but this is not a good idea, because the line will appear thick where the two DIVs touch each other and then thin for the extended part.
How can I do that? I also like to use CSS only if possible, no jQuery nor JavaScript. If you think extra DIVs are needed then this is OK though.
Thanks.
I tried border on both divs, (right border on child-1 and left border on div-2, but this is not a good idea, because the line will appear thick where the two divs touch each other and then thin for the extended part.
That's a good way to go, actually. The final step, though, is to give the right div a negative left margin of 1px (assuming the border is 1px wide), so that the two borders overlap.
#child-1 {
width: 500px;
float: left;
border-right: 1px solid gray;
}
#child-2 {
width: 200px;
float: left;
border-left: 1px solid gray;
margin-left: -1px;
}
Another option is to use display: table on the parent and then display: table-cell on the columns, and then have a single border line between them.
The simple one:
elements {
border-left: black solid 1px;
}
elements:nth-child(1) {
border-left: none;
}
try to use
border-left:1px solid #color;
margin-left:2px;
and
border-right:1px solid #color;
margin-right:2px;
You could also give border-right: 1px solid #000; only to your first div if this div is longer than second div and if second div is longer you could assign border-left: 1px solid #000; only to your second div.