I have a site design I am working on for a bookkeeping service:
http://digitaldemo.net/vintage/home.html
The overall "look" is supposed to be that of a desk blotter. Everything is rendering correctly across the board, but I am having one problem.
I am trying to get the main content area (the "desk blotter") to overlap the top and bottom borders.
The overall page background is a seamlessly tiling image (the lighter brown / gold) and then the top border is a DIV (#section-head) whose background is a semi-transparent PNG and the bottom border DIV (#section-foot) has the same semi-transparent background as well.
My "desk blotter" is inside a #container DIV that uses the following CSS to overlap the top border:
#container { clear:both ;
width:1002px ;
margin:auto ;
background:url("images/paper-bg.jpg") ;
min-height:600px ;
position:relative ;
top:-40px ;
-webkit-box-shadow: #0e0300 0px 0px 14px;
-moz-box-shadow: #0e0300 0px 0px 14px;
box-shadow: #0e0300 0px 0px 14px;
behavior: url("PIE.htc");
z-index:1000 ;
}
That works all well and good. Problem is that it forces a gap at the bottom of the #container DIV equal to the -40px top positioning.
So two questions:
a. how do I get rid of that gap;
b. how do I get the "desk blotter" to overlap the bottom border as well?
Many thanks!
I am not sure if I understand entirely but to get the blotter to overlap the footer you can add this css:
#section-foot {
position: relative;
top: -80px;
}
From here you may want to add some padding to the top of the footer if you have any additional content there.
Related
I am trying to create a vertical menu but struggle with an overflow problem. Or actually with the problem of not overflowing.
In the static shape all the Buttons should have the same width.
When hovering over one of the buttons I want to move the text and the right border of the button 4px to the right (which means also the container width increases by 4px).
I tried to do this by adding 4px padding to the left within the anchor container, which should make the container overflow 4px to the right.
When hovering over "Zagreb" it should look sth like this:
_________
|Split.........|
|________|__
|...Zagreb........|
|___________|
|Zadar.......|
|________|
|Makarska|
|________|
But it doesn't overflow, instead see what happens:
http://jsfiddle.net/6vxsh61h/1/
SOLUTION
Ok I got it fixed with the margin-right: -4px trick.
http://jsfiddle.net/6vxsh61h/5/
add to the a:hover rules
a:hover {
margin-right: -4px;
}
Just adding that one rule to the jsfiddle you posted has the effect you wanted as I understand it
Increase width on hover, e.g.
a:hover {
width:105%;
background: rgb(120,216,230);
box-shadow: 0px 0 5px 1px grey !important;
}
Demo: http://jsfiddle.net/6vxsh61h/4/
You made your <a> elements block elements, which is fine, but by default, they will be automatically setup with border-box-esque box-sizing. This means that they will be autosized to fit the width of the container, minus the padding that you define. This way, they will always fill the width of the container.
To fix this, you only need to define a width:
a
{
width: calc(100% - 20px);
}
JSFiddle
I'm using CSS box-shadow to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.
Take this HTML:
<div class="wrapper">
<div class="widget">Test</div>
</div>
And this CSS:
.wrapper {
background:red;
padding:20px 0;
}
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}
In most browsers, the widget DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the widget DIV.
Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)
Things I've tried to remove the transparent space:
Changing the box-shadow from using em's to using px's
Adding or subtracting 1px from the other box-shadow attributes
Adding a border around the widget DIV
Adjusting the padding, display, position and other CSS elements for the widget
So many things I can't even remember right now
Any ideas how to remove the 1px transparent space in IE11?
Now that we know it's a bug, here's one acceptable workaround:
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
position:relative;
z-index:2;
}
.widget:before, .widget:after {
position:absolute;
content: " ";
width:1em;
left:-1em;
top:0;
height:100%;
background:white;
z-index:1;
}
.widget:after {
left:auto;
right:-1em;
}
Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.
Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.
Checkout the fiddle here: http://jsfiddle.net/TVNZ2/
THE PROBLEM:
This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.
As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.
That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!
WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):
In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:
div {box-shadow: 10px 0px 0px 0px red,
4px 0px 0px 0px red,
3px 0px 0px 0px red,
1px 0px 0px 0px red;}
Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?
Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.
THE "PRETTY MUCH" PART (FOR ME):
In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.
The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.
Not ideal, but far more preferable than having a whole line transparent.
I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.
Good luck, and let's all thank good ol' IE for its "challenges"!! ;)
You can fill the space with outline:1px solid color; It worked for me.
.container{
display:block;
position: relative;
width:450px;
height:450px;
margin: 0 auto;
background-color: #654d7f;
}
.header-emphasis{
position: absolute;
bottom:5px;
max-width: 420px
}
span{
position: relative;
left:8px;
background-color: white;
padding:4px 4px 4px 0px;
color: #666666;
box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
outline: 1px solid white;
}
<div class="container">
<h3 class="header-emphasis">
<span class="highlight">
If there are no dogs in heaven then when i die i want to go where they went.
</span>
</h3>
</div>
I thought I would share my answer to this issue. I cannot be sure that I have had the same exact problem as everyone else, but what I have observed is this: The problem occurs in EI11 (and EI10 according to other which I have not tested) when an element with a set width of pixels is centered using margin: auto; (my case was a left/right issue). I noticed that on resize, the div would shift over to the right 1px on every other pixel width of the screen.
I used a transparent background to observe that instead of just a gap appearing on the left, the div did in fact shift 1px to the right.
Changing the width of the div 1px does work on the current screen width. However, change the screen width will bring back the problem on every other pixel.
To solve the issue, we need to identify the screen width as even or odd. In my case, on even I added a css rule to my culprit div. The new rule changes the left positioning by 0.5px.
Furthermore, the function needs to be executed on the screen resize.
Below is the script I used to fix the issue:
(function (window, document) {
function isEven() {
var windowWidth = window.innerWidth;
// Find out if size is even or odd
if (windowWidth % 2 === 0) {
document.querySelector("#container").classList.add("container_left_1px");
} else {
document.querySelector("#container").classList.remove("container_left_1px");
}
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);
And the css rule
.container_left_1px {left: .5px;}
Executing the script only on EI10 and 11 would be optimum. Please forgive my scripting as this is the first js I have made. Please feel free to correct any issues. This solved my problem; I hope someone finds it helpful!
DaveE gave a nice solution. I played with this myself as well. I had an issue with the top and bottom blur of a box-shadow, instead of left and right. I eventually solved it by just adding a border on top and use important next to it.
.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}
Perhaps not as well tought out as the previous solution, but it worked for me.
Found this solution(Small space between box shadow and div when alpha set) and it works for me: div width must be an odd number.
width: 800px; => not working, but width:799px; => works and white gap disappeared!
In my case, I had a white line between the div bottom and the shadow and I resolved the issue adding a height to the div with decimals:
height:30px; -> height:30.1px;
I have a paragraph on a web page with 20 pixel margins on all 4 sides. I want to alter just the top and bottom paddings with a single property (so padding-top:0;padding-bottom:0; will not do).
What I have tried is demonstrated here.
http://jsfiddle.net/nFCru/1/
In this Fiddle, I tried to use padding: 30px inherit; to alter just the top and bottom paddings of a paragraph. However, this property-value pair sets the left and right paddings to 0 in addition to altering the top and bottom paddings.
p {
border: 1px solid #000;
padding: 20px;
}
/*
* Here's my failed attempt at only altering the top
* and bottom padding values. The left and right padding
* values are changing even if I use inherit.
*/
p {
padding: 30px inherit;
}
Can I alter only the top and bottom paddings with one property?
No, you can't. inherit means the element inherits the padding from its parent. That is, the body (or whatever element the p sits in), not the "original" p in the stylesheet. To leave the left and right padding intact, all you can do is use the two properties as you described.
In short, no.
The only allowable attributes for padding are width (fixed) or percentage, or inherit (from the parent element). There is no way to inherit values already set.
To set the individual padding values you must use the individual properties.
See http://www.w3.org/TR/CSS2/box.html#padding-properties
Until now you couldn't. But even though this is a very old question I thought I'd update it with a new answer.
With the CSS Logical Properties and Values draft you will be able to do this in the future.
It allows you to specify the start and end of a block or inline padding which is dependent on writing mode and direction instead of simple left-to-right based on the screen in front of you.
If you wanted to specify a 10px padding on the top and bottom of an element you could achieve this with the following for example:
.element {
padding-block: 10px;
}
Although not yet supported by any browsers you could already use this in your projects by using PostCSS with the PostCss Preset-Env plugin.
If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom.
Inherit basically inherits only the parent element's style but in your case you can't use inherit but you can do the following for two "p" elements using class.
p{
border: 1px solid #000;
padding: 20px;
}
p.another{
padding: 30px 20px;
}
<p>A Paragraph with 20px top, right, bottom, left</p>
<p class="another">Another Paragraph with 30px top, 20px right, 30px bottom, 20px left</p>
I wish to have on a given div, a shadow on the bottom and right sides.
#navigation-and-slideshow {
overflow: hidden;
background-color: #fff;
padding: 10px 1%;
box-shadow: 2px 2px 5px #222;
}
I'm only getting bottom on all tested browsers.
Can anyone help me solve this ?
Thanks
Your div's width is sprawling across the entire width of the browser window. In Firefox and Chrome, the shadow is considered outside the total window area and therefore cannot be seen. In Opera, the window area is increased to accommodate the shadows. A scrollbar will appear in the browser window. If you scroll to the right, you shall see the right border shadow.
My goal is to add a drop shadow to the left and to the right side of a #container div, which is 960px wide.
The #container itself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the #container with a custom width due to a graphic.
As such, it does not get a drop shadow added to its right and left. Only the nav menu down needs the drop. This is because the header is set to a custom width, and juts out beyond the #container itself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.
For better visualization, my site looks similar to http://www.doubleyourdating.com/, but the header element juts out on both sides.
I've tried to add a drop shadow to the left and to the right side of the #container, from the nav menu down with the following solutions:
I Photoshopped a 1px high, 1010px wide image which contains a 25px "fade" on opposite ends. I CSS'd that as the #container div background-image, but, probably because the #container itself is set to 960px wide, the 1010px wide background can't show up. Note that changing the 960px width will create a cascade of death in this simple 2 column layout.
I tried CSSing up a makeshift shadow box div "around" the container div, but that isn't working because my header has a custom width that extends wider than the container.
How do I make this work?
You could try something like this:
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
Of course, mess around with the values until it suits you.
Single line of code :
box-shadow: 4px 0 2px #222, -4px 0 2px #222;
Just insert in corresponding css style element
Done!