I want to add an extra border on the top of the .menu div.
Firstly i added top and bottom border using box-shadow. and then another regular border using
border-bottom:
border-left:
border-right:
now i want to add a border next the top white border(created by box-shadow) same as the regular border just like this.
here is the link for my current progress
Use css outline for this.
Check This- JSFiddle
FIDDLE
You don't need to specify border-top, border-bottom, border-right, border-left. Just simply specify like this border:1px solid #b8b7b7;. You are missing border-top in your css
.menu_area
{
width:960px;margin:0 auto;height:42px;box-shadow: 0 -4px 0 -3px #FFFFFF, 0 4px 2px -2px#ededed;
border:1px solid #b8b7b7;
}
Try this
<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
outline:green solid thick;
}
</style>
</head>
<body>
<p>Here you go</p>
</body>
</html>
Just like Beginner said, you don't need to specify the side (top, right, left, bottom) when you want to apply the effect to all sides, just boder: [styles]; it's enough in your css.
Related
I'm trying to get header effect like this:
I want the dotted border along the bottom of the element, with the background the same color as the dots.
I've tried looking up how to set up a border offset but haven't found anything that works for the look I'm trying to achieve. I've tried using an outline as well, only to find that the outline property can't be specific to a single edge.
Put a div underneath the box with a border-style of dashed:
<div class="box"></div>
<div class="box-border"></div>
.box-border{
border-bottom:dashed 3px red;
}
https://jsfiddle.net/oo31w9x4/
You can use box-shadow as background.
div {
color: white;
box-shadow: inset 1000px 0px red;
border-bottom: 1px dashed red;
}
<div>the header</div>
I recently realised that padding property adds spacing between the content and the border of this content.
I was testing this property when I discovered an instance where padding doesn't add spacing.
I have a paragraph
<p>Some text</p>
and some styling
p {
background: red;
color: white;
border: dashed 2px blue;
margin-left: 44px
}
Result (JSFiddle)
Then I add padding: 49px to CSS. Logically, I shoud get something like it
but finally I obtain it (JSFiddle)
As we can see, the text moves, but the red spacing isn't added. Why?
PS : maybe I express myself badly, I'm sorry about it
You have a margin-left. Difference between Margins and Paddings.
Remove it:
CSS
p {
background: red;
color: white;
border: dashed 2px blue;
padding-left: 49px
}
In this fiddle
No more space :)
The red is the background-color which is also by default painted into the padding area, and not the margin. The behavior you are seeing is correct.
If you don't want the background painted into the padding area, you can set:
background-clip: content-box;
However I think that only works in IE9 and up, so if you need to support IE8, then you can't use that.
The result you get is correct.
Margin - adds space outside your box
Border - adds a border around your box
Padding - adds space between content and border
Look up "css box model" on google for more.
K
I have not understand what you are trying to do but i guess you want this
<html>
<head>
<style>
p
{
background: red;
color: white;
border: dashed 2px blue;
/* display: inline-block; */
padding-left: 49px
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
I have this JSFiddle
<div class="boo">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
CSS
.boo{
border-left: 12px ridge red;
}
and i want to customize the two colors. I tried to put this outline-color:12px solid darkblue in the class boo but it doesn't work..
To obtain two distinct colours for a 12px left border, just give a 6px-wide red left border for .boo element and another 6px.wide blue left border for the inner paragraph
example fiddle: http://jsfiddle.net/uyTd7/1/
CSS
.boo {
border-left: 6px solid red;
}
p {
border-left: 6px solid blue;
}
But this will work until you have two elements and no margin or padding between: if you had one single element (e.g. a <p>) you could reach the same result on modern browser using box-shadow property (with vendor prefixes where necessary), e.g.
p {
border-left: 6px solid red;
box-shadow: -6px 0 0 blue;
}
example fiddle: http://jsfiddle.net/7cq78/1/
There are several ways you can add another 'border'
1. Using outline (wont work with rounded corners though)
http://www.w3schools.com/css/css_outline.asp
2. Using :after & :before
:after and :before lets you create a whole new element with fully customize-able border (and outline). The limit is your creativity
3. Border style & image
There are many kind of border style such as solid, dashed, dotted, ridge etc. Also you can just easily use repeating image for your border
try this
.boo{
border-left: 12px solid red;
outline:12px solid darkblue ;
}
p{
padding-left:10px;
}
one limitation is IE6 and IE7 don't support the outline property.
In my jsFiddle I cannot get my triangle to appear correctly. It either goes above my text container or behind the background container. How do I get it to stay comfortably in the middle?
<div class="container">
<div class="firefighter-link">
Program Overview
</div>
<div class="firefighter-current-page">
Program Overview
<div class="firefighter-current-page-corner"></div>
</div>
</div>
Here is a picture of what i'm trying to do. The bottom "triangle" represents the page you are currently on.
You shouldn't be using a square and rotating it, you should be using a triangle.
Try creating a div with a 0 width and 0 height and give it an 8px border. Then, make all borders transparent except for one (in your case your top border) and you'll end up with a triangle.
EDIT:
Sorry, forgot to save my fiddle:
http://jsfiddle.net/ndudD/
div { width:0; height:0; border: 8px solid transparent; border-top-color: #000; }
As Adam says, the best practice is to use a triangle.
.triangle{
width:0;
height:0;
border-top: 50px solid blue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
Very helpful screencast on css triangles:
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-drawing-and-using-css-triangles/
In the site I am currently building I am having trouble getting my border colors right for <input> and <button> elements. I would like to have the top, left, and right borders to be the same color and then have the bottom border a different color. I can get the styling to work for any other element to work except for those two, and this issue only exist in IE9. Any help or explanation would be greatly appreciated.
Example of my problem: http://jsfiddle.net/NyG3x/24/
Try setting to borders separately.
border: 1px solid #000;
border-bottom: 5px solid #CE181E
This appears a bug in IE9. If you set the bottom border to 1px, the red border appears to show correctly. However, if you set the value to anything more than 1px, it seems to revert the border-color to the value of the other border-color.
UPDATE
A simple solution would be to remove the styling from the button, wrap the inner text of the button inside a div and style the div. This works in IE9 as shown here.
I know this is more markup, but it will surely solve the issue.
Apply the 1px border as usual to the three sides, but wrap your form elements in a tag, say a div tag and apply a 5px bottom border on the div tag.
HTML would look something like this:
<form id="button-set-two">
<div class="btn-wrapper">
<input class="btn-style" type="submit" value="Btn1" />
</div>
</form>
And CSS would look like this:
#button-set-two .btn-style{
border: 1px solid #000;
border-bottom:none;
color: #000;
float: left;
font-size: 1.6em;
margin-right: 5px;
padding: 2px 10px;
background: none;
}
#button-set-two .btn-wrapper{
border-bottom:5px solid #CE181E;
}