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>
Related
Before flagging this as already asked, pls read the whole scenario. Thanks
SHORT VERSION :
Just to clearly state what i am trying to achieve, here's the page https://www.facebook.com/MercedesBenzPolska/ and I want to add border to the target element (on which i am hovering), whether it be <div> or <img> or <p>, without the shaking
DETAILED VERSION
Webpage in question: Any of Facebook's page.
Requirement: Moving a cursor over an element should add border to the target element [only on hover therefore temporary border not permanent]. Permanent border will be added ONLY if I click on that element. [Simply, if I hover over an element it will be highlighted with, say, pink border and only when i click on it, a green border would be added]
Initial problem: adding border on elements on hover would make the whole page's structure shaky, since I am constantly adding and removing the border. For that what I did was add a transparent 1 px border to all the elements of the page, and on hover just change the color of the border from transparent to pink; thus no shaky.
Present problem: The above solution was working for all the pages till I encountered Facebook's page. It turns out adding the initial 1 px border totally disrupts the structure i.e. the look and feel of the page. DIVs move from somewhere to somewhere else.
How do I now solve my original problem? Is there a way of, maybe like, applying a negative margin or border, so that adding the extra 1 px border does not dirupt the page's structure? I don't know I am just suggesting. Pls help
[SCREENSHOTS]
1. this is when the page loads [without applying the border]
2. Now when I hover over the div containing image ie adding 1 px border on hover, the divs move here and there
css I am using
* { border: 1px solid transparent !important;} //when page loads
.hover-selected{ border: 1px solid #e42a78 !important;} //on hover border
.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} //when option is selected
The images and the css both reflect towards the same problem, the default 1px transparent border disrupts the page's css and If I don't do that, the on hover border application becomes shaky and the page's css anyway gets disrupt
box-shadow: 0px 0px 0px 1px #000;
Use box shadow instead border. Box-shadow don't take up space.
div {
width:300px;
height:300px;
background: red;
}
div:hover {
box-shadow: 0px 0px 0px 1px #000 inset;
}
<div> Test </div>
outline is perfect for this. It works in a very similar way to border but does not effect layout at all.
div:hover {
outline: 1px solid orange;
}
<div>
Lorem ipsum sit amet.
</div>
<div>
<img src="https://placehold.it/200x100">
</div>
<div>
Lorem ipsum sit amet.
</div>
you can use box-sizing property in css. Try below code with and without box-sizing property
<div class="item">
</div>
.item {
box-sizing: border-box;
height: 50px;
width:50px;
background:red;
}
.item:hover{
border:1px solid black;
}
I would start from something like this and move from there:
*:hover:last-child:before {
display:block;
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border:2px solid red !important;
}
Using a pseudo-element instead of putting a border on the actual object might not create as many issues with the initial layout. Still not exactly what you asked for, but I believe it's at least a bit closer. :-)
EDIT
I believe that the only way to achieve this as good as possible would be to be less greedy when selecting elements in the CSS, and specify a list like so:
a:hover:before,
img:hover:before{
display:block !important;
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
border:2px solid red !important;
}
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/
I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!
Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.
One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!
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;
}