I'm trying to create this vertical line within my HTML page, I wanting to use it as a place to put side information. I'd like to be able to color this as well! I tried a few things, but just can't get it right. Here is my code:
#sidebar {
width: 200 px;
border-right: 3px solid #000000;
border-left: 3px solid #000000;
}
#sidebar {
float: left;
width: 200px;
padding: 15px 10px 15px 20px;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
min-height: 100vh
}
I think this is what you're wanting
Related
This question already has answers here:
set css border to end in a 90 instead of a 45 degree angle
(7 answers)
css outline left and right
(1 answer)
Closed 2 years ago.
I want to create a element that has a red border and a white right border but CSS creates a small diagonal cut out:
h1 {
border: 5px solid red;
border-right: 5px solid white;
}
Is there a way to make the lines go straight?
div {
width: 300px;
height: 100px;
background: #eee;
border-radius: 0px;
border-top: 0;
border-left: 0;
border-right: 0;
border-left: 6px solid #0b0;
border-top: 6px solid #0b0;
border-bottom: 6px solid #0b0;
border-right: 6px solid #fff;
margin: 10px;
}
<div></div>
Simply reduce the width of the right border.
I've added a background color to the div tags to emphasize where the content is drawn. Drawing a zero-width border will definitely affect the layout, but you could adjust for that by adding a margin-right.
#div1,
#div2,
#div3,
#div4 {
height: 100px;
width: 100px;
margin: 2px;
display: inline-block;
background-color: grey;
border: 5px solid red;
}
#div2 {
border-right-color: white;
}
#div3 {
border-right: 0px;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
I have created a div that looks like an arrow with css border.
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
Now i want to create an extra border on the right side of that div, lets say: 1px solid black
How can i do that?
hers is the fiddle: https://jsfiddle.net/wqehc9vv/4/
So it should look like this:
image preview
You can use a pseudo-element like :before for that. And make it slightly bigger than the div. Also position it accordingly. See below
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
.blue-arrow-right:before {
content:"";
position:absolute;
left:-30px;
top:-32px;
border-top: 32px solid transparent;
border-bottom: 32px solid transparent;
border-left: 32px solid black;
z-index:-1;
}
<div class="blue-arrow-right">
</div>
check this out
http://codepen.io/anon/pen/jfIil/
css code
.xyz {
margin: 50px;
width: 300px;
height: 300px;
background-color: #fff;
border-right: 1px solid #DEDEE0;
border-bottom: 1px solid #DEDEE0;
border-left: 1px solid #DEDEE0;
border-top: 3px solid #73A784;
}
you see the top-left and top-right corners ? why is it like this ? and how can I fix it ?
I'm talking about the the top border get "cutted" in the corners ...
thanks!!
.box {
width: 150px;
height: 150px;
margin: 20px auto;
border-color: red blue green yellow;
border-style: solid dashed dotted double;
border-width: 20px 10px 5px 15px;
}
This will set different widths, border-color and border-style for each of the four borders.
In addition, each of those properties can be broken down even further with border-left-style, border-top-width, border-bottom-color, and so on.
Checkout the fiddle here to understand better
.box {
width: 150px;
height: 150px;
margin: 20px auto;
border-color: red blue green yellow;
border-style: solid dashed dotted double;
border-width: 20px 10px 5px 15px;
}
Solution here
css
.xyz {
margin: 50px;
width: 300px;
height: 300px;
background-color: #fff;
border-left: 20px solid black;
border-right: 20px solid black;
box-shadow: 0px -20px 0 0 red;
height: 150px;
width: 150px;
}
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.
I am trying to create 2 buttons of the same width that will look as following:
White text in a blue square with black border and with margin of lets say 5px from each side:
this is my css code:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
}
But what I am getting is:
I am using Google Chrome browser, and when I click on "inspect element" I can see all my css properties there, but my application is ignoring them.
You need to declare the border style (solid in your case)
Try the following
a.button
{
background-color: Blue;
border: 2px solid black;
color: White;
padding: 2px 5px;
width:100px;
text-align:center;
margin: 5px;
display:inline-block;
text-decoration:none;
}
You will need to adjust the css, and add hover and active states.
Example: http://jsfiddle.net/3tKS7/
Make your element an inline-block:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
display: inline-block;
}
Not sure if the capitalized color names are helping either.