Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm not sure if I should be using overflow or something else to fix this, but would appreciate any help I could get.
Scroll to the very bottom of the page. You will see at the very bottom where there's the black div and right below that is a little white space.
How can make that white space become black and still keep the rounded corners?
You have to set your padding-bottom to 0, and set the border radius bottom to the right and the left of the s-in-mid div.
Set bottom padding of .s-inn-mid to 0
Add bottom left and right border-radius 5px to the black div.
border-radius: 0 0 5px 5px
I'd tell you it exactly in terms of classes and ids, but you are using inline styles (GROSS), so that's unfortunately not possible.
Change this:
.s-inn-mid {
padding: 7px 0px 6px 0px;
...
to this:
.s-inn-mid {
padding: 7px 0px 0px 0px;
...
FYI, this has nothing to do with overflow. You simply had padding on the bottom of your container div.
in signup.css line 293 change #fff to #000, as below, tested in chrome.
.s-inn-mid {
width: 1000px;
margin: 0;
padding: 7px 0px 6px 0px;
float: left;
background: none repeat scroll 0 0 #000;
border: 1px solid #CCCCCC;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have the next style for div:
.page {
width: 90%;
border-color: orange;
border-style: double;
border-width: 25px 30px 10px 20px;
border-image: url("images/border-image.png") 25 30 10 20 repeat;
margin: 70px auto 0px auto;
padding: 10px;
box-shadow: 0px 4px 3px rgba(0,0,0,0.9),
0px 8px 13px rgba(0,0,0,0.6),
0px 18px 23px rgba(0,0,0,0.1);;
}
I took it from example. And there is right all! But me it draws only frame of image and black background (body has black background). How can I draw middle part of images too?
Per https://drafts.csswg.org/css-backgrounds/#the-border-image-slice, the middle is automatically discarded (because it's a "border" image) unless you specify the fill keyword. So you want:
border-image: url("images/border-image.png") 25 30 10 20 fill repeat;
ive got a div styled with the css properties:
border: 20px solid #000;
-webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5);
the problem i have is, the shadow of the div is just outside, but not inside of the border.
ive allready tried to set the background to 100% opacity with background: rgba(0,0,0,0); but nothing changes.
I also tried to use inset but then the shadow is just inside.
what to do?
No reason to expect anything different. If you want an inner shadow, add a second one to the declaration that starts with the keyword inset.
E.g. -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5), inset 0 0 40px 0 rgba(0,0,0,0.5);.
Note that elements that are descendants of the element with the box shadow will cover the inner shadow.
Also note that some older versions of modern browsers only support one shadow declaration at a time, but I think that set of browsers/versions is quite small.
Try something like this:
#mydiv {
border: 1px red solid;
box-shadow: 0 0 15px #555, inset 0 0 15px #555;
width: 100px; height: 100px;
}
Codepen
This question already has answers here:
How to get box-shadow on left & right sides only
(16 answers)
Closed 9 years ago.
Is it possible to get a box shadow applied to only the left & right sides of a div?
box-shadow: 0px 0 20px rgba(0,0,0,.4);
I tried changing this to a few varients of:
box-shadow: 0, foo, 0, foo;
but that didn't work well.
In the image below, I want to remove the bottom line (and the top one, but you can't see that in this image).
I would prefer not to use an image if possible.
You can do it by setting the box-shadow on :before and :after
div:before {
box-shadow: -15px 0 15px -15px inset;
}
div:after {
box-shadow: 15px 0 15px -15px inset;
}
http://jsfiddle.net/Qq5tQ/
Basically the way to do it is to use another box shadow on top of it so you css would look like this:
box-shadow: 0px -45px white,0px 22px white, 2px 0 20px rgba(0,0,0,.4)
I am creating a website, and I want to create this effect of giving an outer glow shadow to the main column in the page ..
This page serves as an example: http://royalwatches.pk/
Note that the main column has a shadow effect on both left and right sides, to make the column appear to be 'in front' of the background.
This picture also show's what I'm talking about:
This is the page where I want to replicate this effect: http://blu-rays.pk/index.php
Can someone guide me on what CSS/HTML changes need to be done ?
Sidenote: Putting this all in jsfiddle seemed impractical, which is why I've mentioned the sites instead ..
You can use box-shadow property.
CSS
img{
box-shadow: 0px 0px 5px gray;
}
JSFiddle
Or in your case:
#wrapper{
box-shadow: 0px 0px 5px gray;
}
Note: remove the background-image from #wrapper.
Remember to add code so that the shadow is visible in more browsers, like so:
#wrapper {
-moz-box-shadow: 0px 0px 5px gray;
-webkit-box-shadow: 0px 0px 5px gray;
box-shadow: 0px 0px 5px gray;
}
More can be read about this at: http://css-tricks.com/snippets/css/css-box-shadow/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am trying to create a website background similar to http://www.latlong.net/ but i'm not having any luck. Is this green and gray background one image or is that a green image at the top with a gray background?
I cannot find the css for the background to see what they have, it comes out all jumbled with alot of extra google maps css on it.
Can anyone see what they are doing to do the strip across the top and gray below?
Thanks!
Extracted from inspecting element with Chrome; You need:
body{
background-color: rgb(235, 237, 231); /* This is #EBEDE7*/
}
header{
background-color: rgb(215, 230, 184); /* this is #D7E6B8*/
}
Working fiddle: http://jsfiddle.net/shahverdy/NByX9/
How to find this?
Generally if you want to find out that how Html/Css of a webpage is working, the best way is to use some tools like Chrome Developer Tools instead of reading the Html/Css Files from source. There are some other tool in other browsers too.
In Chrome you need to right click on any element of the page and select inspect element.
You can find this out by using Chrome developer tools and inspecting the element:
https://developers.google.com/chrome-developer-tools/
Looks like they are styling the header element using a background color and bottom border and shadow.
header {
margin-bottom:10px;
background-color: #D7E6B8;
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
It is not an image but the background-color css attribute. You can do something like:
<header>My header</header>
with the CSS:
header { background-color: #D7E6B8 }
The body of your page can have css for the gray background:
body { background-color: #EBEDE7 }
There is no background image in that, all are css background colors and shadows.just try with the following,
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}
I think what you're referring to is the shadow. It's not gray, but black with a high transparency.
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
This is on <header>, which also has a solid green background-color (actually #D7E6B8).
Following classes are used in given page:
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}