Hi need a css for the following mock up
how to make border leaving 10 px on both ends on bottom,with a background fill.
For this to look right, you'll need nested div:
.inner {
margin-right: 10px;
background: #666;
border-bottom: 2px solid #000;
width: 200px;
padding-bottom: 10px;
}
.outer {
width: 200px;
border: 10px solid #666; /* your grey fill */
border-bottom: none;
}
Demonstration
Just mess with padding-top and padding-bottom on the .inner element to get the spacing you want.
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'm trying to create some CSS triangles, using css and the :after pseudo class. Somehow, the up and down arrows are working properly, but the left and right arrows are being "cut off" (see fiddle: http://jsfiddle.net/K9vxN/ )
This is basically the css I'm using:
.arrow-right:after {
content:"";
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
Does anyone know why this is happening?
Make the :after pseudo element inline-block (or block). Currently it's an inline element, and it's size is based on the line height of the (empty) text it contains.
You'll have to fix some positioning then, though, but that should be trivial.
div { height:0px; }
div:after { content:""; display: block;}
.arrow-up:after {
margin-left: 50px; /* move right, to show it */
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
.arrow-down:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right:after {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left:after {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
http://jsfiddle.net/K9vxN/2/
By the way, you might not need to use :after at all, but that depends on whether you want the div to have an arrow or to be an arrow. That's up to you. ;)
Simply add display: block to all your :after selectors. For example
.arrow-up:after {
display: block; /* Added this */
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
Here's a demo
Ensure the :after pseudo-element is specified as either block or inline-block, dependent upon your usage scenario.
div:after {
content:"";
display: block;
}
See http://jsfiddle.net/kFa6a/
your pseudo-element needs layout to be triggered:
you can set as display:block; or any other value of display but inline.
You can use as well float or position:absolute/fixed to trigger layout.
http://jsfiddle.net/K9vxN/5/
div:after {
content:"";
display:block;/* or table, inline-table,inline-block, but not inline*/
/* to your choice, where it suits design the best */
/* pick up here instead display*/
/*position:absolute;*//* or fixed */;
/* float:left;*//* or right */
}
So I'm drawing elements in CSS, using this tutorial as a guide. I need some help with borders, though. For instance, here's my code for a curved trapezoid:
.foobar {
height: 0px;
width: 140px;
position: relative;
border-bottom: 200px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-left-radius: 150px 70px;
border-bottom-right-radius: 100px 25px;
}
The problem: I want to draw a 1px line border around the foobar element, but I'm already using the border properties to draw the element in the first place.
Is there an easy way to do this? My sense is that I'll have to create a shadow element that is the same shape as -- but slightly larger than -- the foobar element.
Thanks in advance!
You can position a :pseudo element behind with slightly adjusted dimensions.
.foobar, .foobar:before {
height: 0px;
width: 140px;
position: relative;
border-bottom: 200px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-left-radius: 150px 70px;
border-bottom-right-radius: 100px 25px;
}
.foobar:before {
content: "";
display:block;
position: absolute;
left: -31px;
top: -1px;
width: 142px;
z-index: -1;
border-bottom: 202px solid black;
/* add these lines if you're a pixel perfectionist */
border-bottom-left-radius: 150px 71px;
border-bottom-right-radius: 100px 26px;
}
http://jsfiddle.net/4vNGL/2
You can use a pseudo element drawn behind with same rules with a small increase of scale.
.foobar, .foobar:before {
height: 0px;
width: 140px;
position: relative;
border-bottom: 200px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-left-radius: 150px 70px;
border-bottom-right-radius: 100px 25px;
position:relative;
}
.foobar:before {
content:'';
position:absolute;
display:block;
z-index:-1;
top:0;
left:-30px;
width: 140px;
-webkit-transform-origin:center;
-webkit-transform:scale(1.03);/* adapt here the width of your fake border */
transform-origin:center;
transform:scale(1.03);
border-bottom: 200px solid black; /* color of fake border */
}
http://codepen.io/gc-nomade/pen/eDIGJ
You can even play with both pseudo-element and still add some shadows: http://codepen.io/gc-nomade/pen/axmsc
I tried using this guy's tutorial of making a 2 column layout:
http://www.vanseodesign.com/css/2-column-layout-code/
Here's how mine came out : / http://jsfiddle.net/WrpA8/
The CSS:
#container {
width: 800px;
margin: 40px auto;
border: 1px solid black;
}
#header {
border: 1px solid black;
}
#sidebar {
float: left;
width: 200px;
padding: 4px;
border: 1px solid black;
}
#content {
float: left;
width: 600px;
padding: 4px;
border: 1px solid black;
}
#footer {
clear: both;
border: 1px solid black;
}
Border and padding contribute to an element's overall width. Try setting the border and padding to 0 and you'll see that the layout works as expected. If you want a border and padding, you'll have to factor their size in when you size the main element.
Your padding and border actually are eating up your content of 600px. So, try to make it to 580px for example and it will work.
#content {
float: left;
width: 580px;
padding:4px;
border: 1px solid black;
}
or of course you could remove padding and border altogether if you want and stay with 600px size.
Check the demo here
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.