Im Using
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
To add a shadow to my #Wrapper. For some reason it only travels to the end of my menu. Can anyone see why in this example http://www.kerrydean.ca/MATHESON/home5.html
Thanks!!
The issue is that you've got floated content inside of non-floated content. You need a clearfix.
Alternatively, you could float your #Wrapper element, but you can't center a floated element with margins. Here's an example:
<style type='text/css'>
#Wrapper {
margin: 0 auto;
width: 799px;
}
#Page {
float: left
}
</style>
[ snip... ]
<div id='Wrapper'>
<div id='Page' class='shadow'>
[ The rest of your content goes here. ]
Your footer is also going to cause problems because you moved it via relative positioning. Get rid of that and give it a 10px top margin, and you should be all set.
based on the way you have arranged the layout, you'll need to adjust the way you style #Wrapper.
this aught to do it:
#Wrapper {
background-color: #FFFFFF;
float: left;
left: 50%;
margin: 0 -400px;
padding-bottom: 13px;
position: relative;
width: 799px;
}
Related
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>
I am having an unexpected 1px margin under a div residing in a fixed container. This issue only occurs in Edge (possibly in IE as well). After some testing, I was able to reproduce the bug with a bare bones example.
This picture, which you can reproduce running the snippet below, is composed of 3 square divs inside a fixed div. Firefox
In Edge, you can "fix" this issue by either disabling the property top: 50% in the container div, or by disabling border-*-right-radius: 6px in the divs inside it. Naturally, this isn't a fix, because I need both these properties to effectively implement this design.
How can I fix this? I tried adding borders the same color as the background, but the background is not opaque.
Edit: If you can't see it right away in IE/Edge, try to select the container div and slowly increase the value of the top property. In IE11, changing it from 5% to 6% already made the problem obvious again.
.box {
background-color: rgba(0,0,0,0.15);
height: 70px;
line-height: 70px;
text-align: center;
border-right: 1px solid rgba(0,0,0,0.2);
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
.box:first-child {
border-top-right-radius: 6px;
border-top: 1px solid rgba(0,0,0,0.2);
}
.box:last-child {
border-bottom-right-radius: 6px;
border-bottom:1px solid rgba(0,0,0,0.2);
}
.main {
width: 70px;
position: fixed;
left: 0;
top: 5%;
}
<div class="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Try to use border on parent div: http://jsfiddle.net/gtf0fa8n/1/
Border radius on parent does not brake inner divs rendering in IE
.main {
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: 0;
border-radius: 0 6px 6px 0;
overflow: hidden;
}
.box {
background-color: rgba(0, 0, 0, 0.3);
height: 70px;
line-height: 70px;
text-align: center;
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
Just give boxshadow of 1px with same color on bottom.
box-shadow: #2a2e37 0px 1px 0px;
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
It is my understanding that a display:block will automatically start in a new line. Why do the boxes collapse when a float:left is introduced inside a div with display:block? Here is a fiddle and below the code
#wrapper {
width:300px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px solid #a39b8b;
background-color:#fff;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;}
#header { width: 100%; display: block; }
#logo { width: 100px; height: 145px; background: #fde; }
#slogan {
display: block; background: #f9ebcd; height: 35px; -moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888; box-shadow: 0px 3px 10px #888; border: 1px solid red;
}
.left { float:left;}
<div id="wrapper">
<div id="header">
<div id="logo"class="left">left</div>
</div>
<div id="slogan">slogan</div>
Floats move an element out of the normal flow of the page. If there's nothing left in the flow inside a containing element, it will 'collapse'.
Check the specs for more info.
I recommend you familiarize yourself with clearfix. It makes life easier.
Your example (revised): http://jsfiddle.net/HkHTk/4/
That's just what happens with float.
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
The fix:
#wrapper {
overflow: auto;
}
Demo: http://jsfiddle.net/mattball/CjXNW/
You need to clear your float using the CSS clear property.
What are you trying to do? If you want the slogan box to appear beneath the logo box, you need to add clear:both; to the #slogan code.
I'm trying to replicate the CSS 'Vignette' effect, detailed on Trent Walton's site.
.vignette1 {
box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
float: left;
}
.vignette1 img {
margin: 0;
position: relative;
z-index: -1;
width: 320px;
height: 247px;
}
It works well in isolation, but has problems on my production site, where the background settings for a parent div override the z-index on the image - live jsFiddle demo here.
The second approach - mentioned in the original article's comments and included in the demo - works well, but my image has to be wrapped in the tag - it can't be below it.
page has a solid white background, you're giving the image a z-index of -1, so it's going underneath that div. There are several workarounds, depending on how your final design is going to look, but if you just make #page transparent it works:
http://jsfiddle.net/tA8EA/
Or you can also set page to position realtive and give it a lower z-index than the image:
http://jsfiddle.net/PEgBv/
In the end I found the' Overlay & Inset Method', the second of Jordon Dobsons's techniques to be the most effective and least reliant on negative z-indexes:
/* Border & Vignette Setup */
figure{
position: relative;
display: block;
line-height: 0;
width: 500px;
height: 333px;
margin-bottom: 2em;
border: 1em solid #fff;
-webkit-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
-moz-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
}
figure::before{
content: "";
position: absolute;
top: -1em;
bottom: -1em;
left: -1em;
right: -1em;
}
figure::before,
figure img{
outline: 1px solid #ccc;
}
figure.vignette img{
z-index: 1;
position: relative;
display: block;
width: 100%;
height: 100%;
}
/* Overlay & Inset Method */
figure.overlay.inset::after{
/* Mozilla Settings */
-moz-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
/* Webkit Setting */
-webkit-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
}
(jsFiddle demo using original layout)
I've post an answer with dynamic image list loading here. Instead of under-z-indexed image there's just DIVs with background-image and image dimensions set.