My code is as below
http://jsfiddle.net/gXN2u/219/
I am trying to add a border to each of the items with the class item-list. However it doesn't show.
My actual slider is a vertical slider.
What i want to achieve:
![enter image description here][1]
Please help
Just clear the float
<div class="item-list clearfix">
add clear fix style in your style sheet
or add float and width for the .item-list
.item-list {
border: 8px solid red;
box-shadow: 0px 0px 0px 10px #888888;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
float: left;/*added*/
width: 100%;/*added*/
}
Or, you can use overflow property
.item-list {
border-top: 1px solid red;
overflow: hidden;
}
.item-list:first-child {
border-top: 0;
}
http://jsfiddle.net/ewygux9t/
Related
I'm trying to get box-shadow on all 4 sides of my element.
I've tried box-shadow: 4px 4px 4px 4px 5px grey but it doesn't work. There also doesn't seem to be a rule for specifically setting the blur of a box-shadow.
If you have googled this a bit more, you would have found the answer right away.
The box-shadow property syntax is the fallowing :
box-shadow : horizontal offset | vertical offset | blur | spread | color ;
So you want it on all sides means :
No offsets.
Blur as you like.
Spread here is key to this, setting 10px to the spread means 5px on all sides, basically, half the amount will be on each facing side.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
padding: 30px;
margin: 30px;
width: 300px;
height: 100px;
padding: 15px;
background-color: orange;
box-shadow: 0px 0px 10px 10px grey;
}
<div></div>
Also if you want to customize that you always define multiple shadows separated by a comma.
You have an extra value to box-shadow property. This works: box-shadow: 4px 4px 4px 5px grey
Try this instead 5px specify the blur distance of the shadow while 10px specify the horizontal and vertical shadow of the box-shadow. You can check this link for more info https://www.w3schools.com/css/css3_shadows.asp
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px grey;
}
<body>
<div>This is a div element with a box-shadow</div>
</body>
or
you can modify yours like so
box-shadow: 4px 4px 5px grey
To get a box-shadow on all sides of your element, you'll need:
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: lawngreen;
box-shadow: 0 0 20px black;
}
<div>All of my sides have a box-shadow!</div>
I'm working on a input text with image and I'm trying to position the image on the right side corner of the input text and it seems that my top positioning has different output in different browsers. So I have this HTML structure like so:
<div class="bcb-box-left-content">
<input type="text" name="skills" id="skills"/>
<img src="assets/images/plus-in-box.png" alt=""/>
<p>Maxiumum 3 skills for a guest account.</p>
</div>
And here is the style for that:
/*----the parent container-----------*/
.bcb-box-left-content
{
max-width:444px;
margin-left:17px;
position:relative;
margin-right:20px;}
/**********the anchor *********/
.bcb-box-left-content a
{
position: absolute;
bottom: 0;
right: 4px;
top:5px;
}
/**********the input text *********/
#skills {
width:100%; padding: 10px 20px 10px 10px;
}
So now is there any approach like this (but not literally the code itself):
/*in this case TOP for chrome*/
-webkit-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for mozilla*/
-moz-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for normal*/
box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
DEMO:
http://jsfiddle.net/leonardeveloper/Wm4ML/
Apply margin and default border property to your #skills class. It will give the same result on all the browsers as you mentioned. Update your CSS like below.
#skills
{
width:100%;
padding: 10px 0px 10px 10px;
margin:0;
border:1px solid #ccc;
}
DEMO
I want to style my own button. I've managed to get rid of the default style, but now I want to add a thin blue border around it, but don't know how. If I just get rid of the border: none, then the default style comes back, which is not what I want
This is my style.css:
input#hideshow{
margin: 0;
border: none;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
You also need to specify border-style because it's default value is none demo.
But the easiest way is to use the border short hand and also specify
border-width:
border:1px solid #7BC2E3;
and remove border:none;
DEMO
CSS :
input#hideshow{
margin: 0;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border:1px solid #7BC2E3;
width: 280px;
text-align: left;
}
U just specified the border color alone. U forget to specify border width
Demo
border: 2px solid #7BC2E3;
Your CSS works perfectly. But you don't want it to work this way. You set border to none so no border is displayed. You better should set to, for instance:
border: 1px solid #7BC2E3;
And remove the border-color line.
https://developer.mozilla.org/en-US/docs/Web/CSS/border
Try doing this:
input#hideshow{
margin: 0;
border:1px solid blue;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
Hope this is what you want.
Try like this: Demo
border:1px solid #7BC2E3;
and remove
border:none from your code
I have the following div stricture.
<div class="profile_outer>
<div class="profile"></div>
</div>
And the following CSS
.profile_outer {
border: 2px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 100;
}
.profile_outer:hover {
background-color: blue;
}
you can find the fiddle here
Both divs do not have a background, the background is determined by an image on some parent div. So they are transparent.
So, on a hover I just want to change the background of the outer profile. It only works if I also change the background color of the inner div using
.profile_outer:hover .profile {
display: block;
background : #fff; // but I do NOT want to change the background
}
I tried the following combinations of these:
.profile_outer:hover .profile {
display: block;
background : none !important;
background-color:transparent;
}
Thanks for your help.
Well, I guess that the effect that you want is this
.profile_outer {
border: 2px solid #660000;
border-radius: 5px;
overflow: hidden;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
border-radius: 5px;
z-index: 100;
}
.profile:hover {
box-shadow: 0px 0px 0px 1000px blue;
}
fiddle
... but you should review your ideas about transparency ...
After re-reading the question, I think that Moob's sugestion is right, the answer to the question is
.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}
Set the child's background to #fff and it'll work.
Your problem happens because the default background color for all elements is transparent
There is one other way to get this effect but it could be really annoying to implement. I'm only offering it up as a solution for completeness. Effectively you have the SAME background image on the bit that is supposed to appear masked:
body {
margin:0px;
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') 0 0 repeat;
}
.profile_outer {
margin:20px; /* added this just to show that you'd need to offset the image placement in .profile depending on its position */
}
.profile {
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') -20px -20px repeat;
}
http://jsfiddle.net/PdQFJ/1/
<div class="row">
some content
<div class="info-box">
some other content
</div>
</div>
.row {
float: left;
margin-bottom: 1.5%;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-color: rgb(250, 250, 250);
width: 685px;
-webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}
.row:hover {
background-color: rgb(240, 245, 245);
-moz-box-shadow: inset 0 0 5px #4d4d4d;
-webkit-box-shadow: inset 0 0 5px #4d4d4d;
box-shadow: inset 0 0 5px #4d4d4d;
}
.info-box {
position: relative;
border-left: 1px solid #e3e3e3;
padding: 15px;
width: 170px;
font-size: 0.93em;
color: #363636;
float: left;
}
Alright, I have this info box inside row. Since at .row:hover, I'm creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.
My question is if you can make the shadow on top of the border. Thanks in advance.
Note: z-index doesn't work for me.
Of course it's on top: the child has to appear above the parent, otherwise it'd be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.
If you take a look at this fiddle, I've achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.
Basic guide to what I did:
Gave .row the CSS position: relative so we can place children in relation to it.
Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
Added content: ' ' to force the pseudo element to display.
Added positioning, height and width, top and left to make the pseudo element cover available width.
EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I've updated my example to show this in action.