I have a sticky header on my page, but I found a bug that buttons on right side of sticky header is not visible when browser window is small... and horizontal scrolling does not work for hearder.
Here is html code:
<div class="search-container">
<div class="sticky-wrapper">
<!-- it's fixed header -->
</div>
<div class="sidebar">
<!-- search filters e.g. -->
</div>
<div class="content">
<!-- search results e.g. -->
</div>
</div>
Here is my CSS (sass) code:
.search-container {
.sticky-wrapper {
box-shadow: 0 3px 3px 0 #8f8f8f;
position: fixed;
top: 0;
z-index: 999;
}
.sidebar {
float: left;
margin-left: 5px;
width: 229px;
}
.content {
background: none repeat scroll 0 0 #fff;
border-top: 4px solid #5d5d5d;
display: inline;
float: left;
margin-left: 18px;
margin-right: 0;
width: 691px !important;
}
}
When I make browser window smaller then (sidebar + content) width, horizontal scrolling appears - but it works only for .sidebar and .content.
How can I make sticky header horizontal-scrollable too?
P.S. it's important to working in FF, Chrome, IE >= 9. And I it not good to change/add new css ids or classes, cause many tests become broken.
Please, help.
Thanks kindly.
If it will be helpful - jsfiddle with header and content
I think CSS alone cannot handle this scenario. It would be better if you add a pinch of JS flavour. Try this Fiddle.
Added a JS code: (Note: I have used JQuery, you can also have it rewritten in pure JS if required)
$(window).scroll(function() {
var max_width = 990;
if ($(window).width() < max_width) {
$('.sticky-wrapper').css('margin-left', -$(this).scrollLeft() + "px");
}
});
For what I could test, and for previous experience, is to add a div inside with a width bigger than the container one, and to that container add an overflow-x: auto;
For example:
<div class="sticky-wrapper">
<div class="bigger">Your text here</div>
</div>
.sticky-wrapper {
box-shadow: 0 3px 3px 0 #8f8f8f;
position: fixed;
top: 0;
z-index: 999;
background: grey;
width: 900px;
overflow-x: auto;
}
.bigger {
width: 1000px;
}
Fiddle: https://jsfiddle.net/afs5k1zp/1/
I have a content div with a ragged border (using a border-image) and I place another div each below the content div left and right to hold an image. This image is supposed to have a link. While the image shows nicely through the border the link area gets hidden by it. Given that my ragged border is rather wide (almost 100px), this feels quite confusing. Therefore I would like to "float" the image below the border and the actual link area above so that the link is clickable as well were the image is under the border or visible through the border.
Despite not having the background-image uploaded the effect becomes visible since the border is wide black. The structure includes a minimal header, which is not vital to the problem but is part of the root structure.
Another problem is that the link area expands to more than the wrapped image in height, however this is a minor issue.
http://jsfiddle.net/hc3jrkku/
Basestructure:
<header>
<nav>
<a href='?p=faq#faq' id='faq'>
FAQ
</a>
</nav>
</header>
<div class='leftSide'>
<a href="#anchor" class="bgImage"><img src="img/some.png" style="
position: relative;
z-index: -1;
opacity: .99;
border: 1px solid red;
width: 150px;
height: 200px;
background-color: red,
"></a>
</div>
<div class='rightSide'>{$right}</div>
<main>
<div class='container'>
{$content}
</div>
</main>
</body>
CSS:
* {
box-sizing: border-box
}
body {
margin: 0;
}
.leftSide{
position: fixed;
z-index: 0;
top: 20px;
right: 50%;
transform: translateX(-50%);
width: 808px;
height: 100%;
display: flex;
justify-content: flex-end;
margin-right:-93px;
padding: 15px 93px 90px 0;
}
.rightSide{
position: fixed;
z-index: 0;
top: 20px;
left: 50%;
transform: translateX(50%);
width: 808px;
height: 100%;
margin-left:-93px;
padding: 15px 0 90px 93px;
}
a.bgImage {
z-index:900;
opacity:.99;
border:2px dashed blue
}
.rightSide .bgImage {
margin-left: -93px;
}
.leftSide .bgImage {
margin-right: -93px;
}
main {
width: 808px;
min-height: 400px;
margin: 20px auto 0;
position: relative;
z-index: 50;
border-style: solid;
border-width: 0px 93px 127px 93px;
border-image: url(img/paperedge.png) 0 93 127 93 fill round;
padding-top:10px;
}
header {
height: 20px;
background: #ffffff url(img/header_bg.png) repeat-x bottom;
border-bottom: 1px solid #000000;
position: fixed;
width: 100%;
top: 0;
z-index: 100
}
nav {
display: flex;
justify-content: center;
}
Having read http://philipwalton.com/articles/what-no-one-told-you-about-z-index/, I tried creating new context(s) as well, and stripping the divs containing left/right background image of the z-index, However my current code depends on the transform/position thus creating a new context for the parent element either way. Is the sandwich stacking (some children above other parts of the page/others below) possible anyways?
If you want the image to be behind the border (or your content div), you can add this to the CSS of your div in the front:
main {
pointer-events: none;
}
This will kill the events on your div and make the behind events visible in the front: DEMO
You can also search more and find these similar topics:
HTML "overlay" which allows clicks to fall through to elements behind it
HTML/CSS: Make a div "invisible" to clicks?
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
So i'm coding my website now, and i'm using two div to create a somewhat gradient in the background, where div#bg1 is grey and div#bg2 is dark grey. But when i'm then adding the wrapper div, bg1 and bg2 still follows the wrapper's top alignement, but it should not. bg1 and bg2 should stay at the top.
heres the html:
<div id="bg1"> </div>
<div id="bg2"> </div>
<div id="wrapper"></div>
and stylesheet:
div#wrapper {
background-color: #FFFFFF;
width: 800px;
height: 1000px;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
position: relative;
z-index:3;
}
div#bg1 {
width: 100%;
margin:0px;
padding:0px;
height: 200px;
background-color: #ccc;
z-index: 2;
position: absolute;
box-shadow: inset 0px 10px 60px 0px rgba(0, 0, 0, 0.6);
}
div#bg2 {
width: 100%;
margin:0px;
padding:0px;
height: 100px;
background-color: #444444;
z-index: 2;
position: absolute;
box-shadow: inset 0px 10px 60px 0px rgba(0, 0, 0, 0.7);
}
i have the code currently on my website here: http://andreassvarholt.com/test/test3/
You have both your BG divs set to an absolute position.
To force them to the top, you need to define the "top" CSS attribute.
div#bg1 {
top: 0;
}
div#bg2 {
top: 0;
}
Furthermore, I must point out that your implementation is inelegant. Just make a 1px by 200px image that tiles as a background image on the body. There's no sense in stacking divs on top of divs just for a simple background effect.
Using divs to creat a background gradient is kind of jenky. Why not just go to one of the many free css3 gradient generators available online. Free and easy.
Good Luck
-brian
I want to achieve this using html and css:
I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.
jsFiddle of my try here
The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).
You can use opacity in combination with background color, like this:
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}
<div id="container">
containter text
<div id="box">
box text
</div>
</div>
Live demo
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}
<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>
Use Javascript - almost the same as above, but position and size don't have to be hardcoded.
You can't apply an opacity property without affecting a child element!
"Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another... If you do not want to apply opacity to child elements, use the background property instead." https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
If you want the opacity to be applied only to the background, without affecting the child elements, use:
background-color: rgba(255, 255, 255, .3)
However, you can achieve the desired effect if you place them inside a div parent element and use CSS position property:
.parent {
border: solid green 3px;
position: relative;
width: 400px;
height: 200px;
}
.sibling-one {
border: solid red 3px;
position: absolute;
box-sizing: border-box;
width: 400px;
height: 200px;
opacity: .3;
}
.sibling-two {
border: solid blue 1px;
margin: 10px;
width: 200px;
height: 100px;
position: absolute;
transform: translateY(50%);
}
<div class="parent">
<div class="sibling-one">
<p>A sibling's one element</p>
</div>
<div class="sibling-two">
<p>A sibling's two element</p>
</div>
</div>
Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}
<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>
See a working codepen here
Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.
Apply this css rule
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
In addition to this, you have to declare background: transparent for IE web browsers.
For more details visit the following link:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Any child of an element with opacity set will take on that opacity.
To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.
Another workaround is to simply use an overlay background to create a similar effect.
I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.
Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.
If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.
It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.
Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.
Here is a input box that i created that i can turn on or off with the class property invisible by javascript
<div id="blackout" class="invisible">
<div id="middlebox">
<p>Enter the field name: </p>
<input type="text" id="fieldvalue" />
<input type="button" value="OK" id="addfname" />
</div>
</div>
CSS
#blackout {
z-index: 9999;
background: rgba(200, 200, 200, 0.6);
height: 100%;
width: 100%;
display: block;
padding: 0px;
clear: both;
float: left;
position: absolute;
margin-top: -10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -10px;
}
#blackout #middlebox {
border: thick solid #333;
margin: 0px;
height: 150px;
width: 300px;
background-color: #FFF;
top: 50%;
left: 50%;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px 50px 0px 50px;
}
#middlebox p {
float: left;
width:100%;
clear:both;
}
#middlebox input {
clear:both;
margin-bottom:10px;
}
#middlebox input[type=text]{
width:100%;
}
#middlebox input[type=button]{
float:right;
width:30%;
}
.invisible{
visibility:hidden !important;
}
Use such elements that you can add :before or :after. My solution
<div class="container">
<div>
Inside of container element is not effected by opacity.
</div>
</div>
Css.
.container{
position: relative;
}
.container::before{
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: #000000;
opacity: .25
}
This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...
Using a tiled image might seem dated but will work no worries across all browsers.
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it.
And use no background on your container.
Now container's children have no opaque parent and the problem vanishes.