JsFiddle Link
I have two divs overlapping with borders on both. When I set the z-index on one higher then the other shouldn't the border also be blocked by the higher z-index div?
Is there anything I can do to accomplish this?
Set an explicit background-color
#b {
left: 15px;
top: 15px;
border: 1px solid blue;
z-index: 2;
background-color: white;
}
You need to set the background color to something:
#b { background-color: #fff }
Updated fiddle
They're currently transparent. Add a background colour.
#b {
left: 15px;
top: 15px;
border: 1px solid blue;
z-index: 2;
background-color:#ffffff <---- here
}
I had the same problem with table rows in a drag-and-drop sort environment. Set the background to a specific color (style="background-color:White") and it will cover it up. If you don't set a color, it assumes no background and just draws what is behind it (when it's not overlapping, that's nothing, so it looks like a solid background when really it's empty).
Related
I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:
To create the colors, they're using a simple bottom and left border in CSS.
I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.
I'm using the following CSS:
.anylinkcss li {
list-style-type: none;
}
.participate li {
list-style-type: square;
border-left-color: #fa514d;
}
#navigation_bar {
height: 31px;
list-style: none;
width: 1000px;
margin-top: 15px;
}
#navigation_bar li {
float: left;
padding-right: 35px;
padding-left: 10px;
margin: auto 0px;
vertical-align: middle;
}
#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
position: absolute;
line-height: 18px;
z-index: 20;
background-color: #000;
text-align:left;
visibility: hidden;
left: 421px;
top:207px;
padding: 7px;
padding-left: 25px;
}
The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.
My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!
Although you set the width and color, you can not leave out the style parameter with borders.
To get the desired effect as you presented in the image - jsFiddle demo
dark background color for the <ul>
a wide border-left on the <li>
a margin-bottom: 2px as bottom border - shows ul background
and a few small tweaks like text-indent etc
Some information regarding borders
CSS borders consist of 3 parameters
border-width
border-style
border-color
You can set one value, which applies to all sides
border-width: 5px;
border-style: solid;
border-color: red;
Or with short hand border: 5px solid red; and also applies to all sides.
You can style each border side individually, as you are doing above.
border-side-width
border-side-style
border-side-color
Example:
border-left-width: 5px;
border-left-style: solid;
border-left-color: white;
Which can be accomplished also with shorthand: border-left: 5px solid white;
For more information and other border opportunities
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
ahhh... Brian you beat me to it.
I inserted border-style, and then there is "BORDER"
border: 5px solid white;
Actually the trick in his case is that border is applied to the anchor tags not the lists! Cheers! :) And yes if you apply border-color as a property you should also apply border-style and border-width :)
So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
I am trying to create a div that is square on the top site and flows into a triangle,
the square part is not so hard, and works fine, but the triangle part is a bit harder.
The box needs to change from size with the screen size, in the square i did this by using % in the width and height, but i cannot use the % sign in the border property
The code i have on this moment
HTML
<div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div>
CSS
div.menuItem
{
height: 5.38%;
width: 7.44%;
position: fixed;
background-color: rgb(239, 239, 239);
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
}
div.menuItemHover
{
height: 5.38%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: rgb(211, 211, 211);
}
div.menuItemActive
{
height: 7.8%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: Black;
color: White;
}
The JavaScript is used for setting the class: i did this because i use a parralax library and wanted to set the button on "active" on a certain height
i hope someone can help me (and perhaps others) with this problem
jsfiddle
example
My idea is that when the div is set on class menuItemActive, it will have the arrow, else not
This is only when it is set on active
This uses two overlapping divs to create the triangle and this method to make things fluid while maintaining the aspect ratio.
Working Example
.div1 {
width:100%;
height:100%;
border: 1px solid red;
position:absolute;
z-index:2;
}
.div2 {
width:70%;
min-height:70%;
transform:rotate(45deg);
border:1px solid blue;
position:absolute;
left:15%;
top:65%;
z-index:1;
}
#container {
display: inline-block;
position: relative;
width: 25%;
}
#dummy {
padding-top: 100%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I left it without a background so you could see how it works.
You can do triangles in CSS.
Here's a link to an article, outlining the general technique: http://css-tricks.com/snippets/css/css-triangle/. There's also a variety of similar/other approaches for slightly different situations I've found and used, just search "css triangles".
To briefly describe the technique: it uses four borders on an element (if you wanted a down arrow, you'd put this element inside your <div id="overV12">, or depending on the effect, apply it to your inner <div>). Some are transparent, some aren't. By changing the border widths and colors, you can generate CSS triangles, which can be fully customized to form different angle degrees, lengths, etc. I've also seen this concept used to create CSS-only speech bubbles as well as tooltip handles.
I've used this technique extensively, and in my use cases, it worked in every browser (although I do remember having a problem with IE6 on one project).
I found the solution by using javascript instead of percentage,
Fiddle
I hope this can help some other people as well
The java script i used is this:
$(document).ready(setSize());
function setSize() {
var halfWidth = ($('.div1').width()) / 2;
$('.div2').css('border-width', ('50px ' + halfWidth + 'px 0 ' + halfWidth + 'px'));
$('.div2').css('top', ($('.div1').height()));
}
its better to use a background image for custom shaped like this
it'll make it easier to manager and you can make it adjust itself for different resolutions easily
So I saw this http://cre8tivenerd.com/demos/css/Line-separator.html and wanted to create a divider with that "pressed" effect. The problem is, I don't have a clue of what the divider colors should be for me, tested it out and it didn't get the same effect. My background color is #222222. Anyone that can help me and maybe explain how I "calculate" which colors I should use for the divider?
You can easily get this effect like this:
<div class="vDivider"></div>
css:
.vDivider {
width: 80%;
height: 1px;
margin: 10px auto;
background: #434343;
border-bottom: 1px solid black;
}
The contrast between the background color and the bottom border creates this effect.
Here is a DEMO
It won't look good as #222 is already too dark. Only option as #Dim13i suggested is using black as bottom color, but it won't look distinct.
How about make it a little thicker?
.line-separator {
background: none repeat scroll 0 0 #777;
border-bottom: 2px solid #000;
height: 2px;
}
I have this:
<style type="text/css">
.TopBorderPanel {
position: relative;
overflow: hidden;
border-top: 2px solid #bbbb9f;
margin: 1px;
width: 500px;
}
</style>
The top border has one color , #bbbb9f, what i want to do is make it 2 colors
50% #bbbb9f and 50% #cccccc
Is it possible ?
http://jsfiddle.net/CdWCA/
.TopBorderPanel {
border-top: 2px solid #bbbb9f;
position: relative;
}
.TopBorderPanel:after {
position: absolute;
left: 50%;
right: 0;
top: -2px;
border-top: 2px solid #cccccc;
content: '';
}
Better use a background *.gif split equally into two colours, and use a single pixel of padding on the top:
.TopBorderPanel {
border: 0;
background-image: url(...);
padding-top: 1px;
}
I can think of 2 ways of doing this.
My first method would be to use a pseudo selector, what this does is add content, or styles :before or :after an element. So in effect you can have 2 styles for one element, just one as normal, and then some extras added either before or after this element.
I have added a border-top, as normal, and then added another border-top with the pseudo selector.
My second solution is to add a box-shadow, that instead of normally looking like a diffused shadow, it styled to look like a solid shadow above the element.
I've created a jsFiddle which will hopefully give you an idea, but if you don't understand just say.
jsFiddle