I have a 2 column HTML/CSS layout and I am having an issue with <div>sidebar</div> where the div doesn't expand all the way down the side of the content (in other words, there is a large gap between the bottom of the "sidebar" div and the "footer" div and it results in ugly white space that I would like to get rid of.
sandbox.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Title</title>
<link href="twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">
My Header
</div>
<div class="sidebar1">
<ul class="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
<p> </p>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus dolor nec ante imperdiet malesuada. Phasellus nec ipsum ipsum. Pellentesque lacus elit, tempor vitae laoreet nec, condimentum vel magna. Mauris imperdiet consectetur egestas. Praesent pellentesque, turpis ultricies elementum pellentesque, felis arcu consequat diam, quis viverra libero nibh a massa. Proin nec lectus at lorem semper hendrerit. Curabitur sed diam ut nisi ultrices vestibulum vel eget leo. Donec dapibus sem vel ipsum vestibulum suscipit. Donec faucibus ipsum eu neque facilisis blandit. Vivamus rhoncus odio in nibh pretium elementum.
Morbi adipiscing odio eu nibh gravida eu cursus risus luctus. Cras malesuada fermentum fermentum. Aliquam neque magna, pellentesque nec lobortis eget, scelerisque eu elit. Curabitur commodo leo porttitor eros commodo a venenatis odio vehicula. Aenean sodales diam ac orci interdum aliquam. Nulla sodales enim ut leo porttitor in mollis est consequat. Morbi lobortis nunc nec mi varius varius. Mauris ac velit eget augue cursus viverra. Mauris ut felis vehicula urna aliquet sodales ut vel purus. Pellentesque sed mi felis. In leo urna, dignissim et vestibulum tristique, lobortis quis est. Nulla tincidunt consequat mi a volutpat. Aenean ut arcu nibh, ut placerat augue. Etiam sollicitudin orci id neque ornare a euismod metus imperdiet.
</div>
<div class="footer">
My Footer
</div>
</body>
</html>
twoColLiqLtHdr.css:
#charset "UTF-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #699643;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:hover {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 1260px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
overflow: hidden;
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #A9B92E;
}
.sidebar1 {
float: left;
width: 20%;
background: #94c493;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 80%;
float: left;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
text-decoration: none;
background: #E8EEC7;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #FDEAA6;
color: #000;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #A9B92E;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/* style the results tables */
#stylized p {
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
table.decorated {
margin: 1em 1em 1em 2em;
background: whitesmoke;
border-collapse: collapse;
}
table.decorated th, table.decorated td {
border: 1px silver solid;
padding: 0.2em;
}
table.decorated th {
background: gainsboro;
text-align: left;
}
table.decorated caption {
margin-left: inherit;
margin-right: inherit;
}
table.decorated tr:hover {
background: lightsteelblue !important;
}
/* Create the scrollable "boxes" */
.scrollArea {
width: 200px;
height: 300px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
</style>
Ahh, getting columns to line up vertically. The dark side of CSS. You have two options:
Use some slightly convoluted, but well documented, CSS. This fellow here has an excellent template you can use which I've used before, and it works great.
JavaScript. Using jQuery, you can set the height of the smaller div to the height of the bigger div after all the content is rendered.
Stop using floats for layout unless you need to support IE7 or lower:
.sidebar1 {
display:table-cell;
width: 20%;
background: #94c493;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 80%;
display: table-cell;
}
Example. You may want to add some extra padding to the .content element because margins won't work inside display: table-cell;, like this.
If you don't care for IE7 you can do it as simple as this:
<style>
div.sidebar_ {
display: table-cell;
width: 20%;
background: red;
}
div.content_ {
display: table-cell;
width: 80%;
background: blue;
}
</style>
<div class="sidebar_">
Sidebar
</div>
<div class="content_">
Content<br>
Content<br>
Content<br>
Content<br>
</div>
Works in IE8 and better and in any other browser.
In some cases, equal-height columns can be faked by adding a bg image to a parent container, or by splitting the columns into header-content-footer sections and putting the footer for each in a separate container (and doing the same for the header sections if needed). If the columns have a fixed width, you'll have a lot more options available.
<div class="container-with-bg-image-for-all-columns">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
or...
<div class="content-container">
<div class="col1-content"></div>
<div class="col2-content"></div>
<div class="col3-content"></div>
</div>
<div class="footer-container">
<div class="col1-footer"></div>
<div class="col2-footer"></div>
<div class="col3-footer"></div>
</div>
If the need is great enough, don't forget about the option of using an HTML table for the columns. That's the only easy way to have full control over the size and alignment of columns. I haven't tested display:table and the other table-related display values, but that may be another way to get the vertical advantages that HTML tables offer.
Related
I do not want to inherit the child opacity from the parent in CSS.
I have one div which is the parent, and I have another div inside the first div which is the child.
I want to set the opacity property in the parent div, but I don't want the child div to inherit the opacity property.
How can I do that?
Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency.
So instead of:
background-color: rgb(0,0,255); opacity: 0.5;
use
background-color: rgba(0,0,255,0.5);
Opacity is not actually inherited in CSS. It's a post-rendering group transform. In other words, if a <div> has opacity set you render the div and all its kids into a temporary buffer, and then composite that whole buffer into the page with the given opacity setting.
What exactly you want to do here depends on the exact rendering you're looking for, which is not clear from the question.
A little trick if your parent is transparent and you would like your child to be the same, but defined exclusively (e.g. to overwrite the user agent styles of a select dropdown):
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}
As others have mentioned in this and other similar threads, the best way to avoid this problem is to use RGBA/HSLA or else use a transparent PNG.
But, if you want a ridiculous solution, similar to the one linked in another answer in this thread (which is also my website), here's a brand new script I wrote that fixes this problem automatically, called thatsNotYoChild.js:
http://www.impressivewebs.com/fixing-parent-child-opacity/
Basically it uses JavaScript to remove all children from the parent div, then reposition the child elements back to where they should be without actually being children of that element anymore.
To me, this should be a last resort, but I thought it would be fun to write something that did this, if anyone wants to do this.
Opacity of child element is inherited from the parent element.
But we can use the css position property to accomplish our achievement.
The text container div can be put outside of the parent div but with absolute positioning projecting the desired effect.
Ideal Requirement------------------>>>>>>>>>>>>
HTML
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}
Output:--
the Text is not visible because inheriting opacity from parent div.
Solution ------------------->>>>>>
HTML
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}
Output :
the Text is visible with same color as of background because the div is not in the transparent div
The question didn't defined if the background is a color or an image but since #Blowski have already answered for coloured backgrounds, there's a hack for images below:
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');
This way you can manipulate the color of your opacity and even add nice gradient effects.
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
<div class="wrapper">
<h1>Question 5770341</h1>
</div>
There is no one size fits-all approach, but one thing that I found particularly helpful is setting opacity for a div's direct children, except for the one that you want to keep fully visible. In code:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
and css:
div.parent > div:not(.child1){
opacity: 0.5;
}
In case you have background colors/images on the parent you fix color opacity with rgba and background-image by applying alpha filters
Answers above seems to complicated for me, so I wrote this:
#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}
#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}
span {
color: white;
}
<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div>
kb-mask-overlay it's your (opacity) parent, pop-up it's your (no opacity) children. Everything below it's rest of your site.
It seems that display: block elements do not inherit opacity from display: inline parents.
Codepen example
Maybe because it's invalid markup and the browser is secretly separating them? Because source doesn't show that happening. Am I missing something?
Below worked for me:
Changed
From:
opacity: 0.52;
background-color: #7c7c7c;
To:
opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;
To convert the hex & opacity to rgba,
use a website like http://hex2rgba.devoth.com/
<!--Background opacity-->
<style>
.container1 {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, .5);
margin-bottom: 50px;
}
</style>
<div class="container1">
<div class="box1">Text</div>
</div>
<!--Before, after, z-index opacity-->
<style>
.container2 {
width: 200px;
height: 200px;
position: relative;
margin-bottom: 100px;
}
.container2:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
opacity: .5;
z-index: 1;
}
.box2 {
position: relative;
z-index: 2;
}
</style>
<div class="container2">
<div class="box2">Text</div>
</div>
<!--Outline opacity-->
<style>
.container3 {
width: 200px;
height: 200px;
outline: 50px solid rgba(0, 0, 0, .5);
margin: 50px;
}
.box3 {
position: relative;
left: -16px;
}
</style>
<div class="container3">
<div class="box3">Text</div>
</div>
I also faced the same issues, after doing some googling I found some solutions ( 3-ways ) of this problem.
I am sharing the solutions here, you can try any of these.
Option-1:
Use a pseudo markup element before or after as the background
.parentContainer {
position: relative;
}
.parentContainer:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.6;
}
.childContent {
position: relative;
color: red;
z-index: 1;
}
Option-2:
Use rgba colors with alpha value instead of opacity.
<div id="parentContainer" style="background: rgba(255,255,255,0.6);">
<div id="childContent">
Content ...
</div>
</div>
Option-3:
Use background div with absolute position one element over another.
<div class="parentContainer">
<div class="childContent">
Here is the content.
</div>
<div class="background"></div>
</div>
.parentContainer {
position: relative;
}
.childContent {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
opacity: .5;
}
If you have to use an image as the transparent background, you might be able to work around it using a pseudo element:
html
<div class="wrap">
<p>I have 100% opacity</p>
</div>
css
.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}
My answer is not about static parent-child layout, its about animations.
I was doing an svg demo today, and i needed svg to be inside div (because svg is created with parent's div width and height, to animate the path around), and this parent div needed to be invisible during svg path animation (and then this div was supposed to animate opacity from 0 to 1, it's the most important part). And because parent div with opacity: 0 was hiding my svg, i came across this hack with visibility option (child with visibility: visible can be seen inside parent with visibility: hidden):
.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}
And then, in js, you removing .invisible class with timeout function, adding .opacity-zero class, trigger layout with something like whatever.style.top; and removing .opacity-zero class.
var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);
Better to check this demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011
I solved this problem by first creating and saving a faded image which I then used in the css background. I used the following python code:
from PLI import Image
bg = Image.open('im1.jpg')
fg = Image.open('im2.jpg')
#blend at ratio .3
Image.blend(bg,fg,.3).save('out.jpg')
Here, im1.jpg was simply a white image of the same dimensions as im2.jpg.
On mac you can use Preview editor to apply opacity to a white rectangle laid over your .png image before you put it in your .css.1) ImageLogo2) Create a rectangle around the imageRectanle around logo3) Change background color to whiterectangle turned white4) Adjust rectangle opacityopaque image
For other people trying to make a table (or something) look focused on one row using opacity. Like #Blowski said use color not opacity. Check out this fiddle: http://jsfiddle.net/2en6o43d/
.table:hover > .row:not(:hover)
Assign opacity 1.0 to the child recursively with:
div > div { opacity: 1.0 }
Example:
div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }
<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>
I do not want to inherit the child opacity from the parent in CSS.
I have one div which is the parent, and I have another div inside the first div which is the child.
I want to set the opacity property in the parent div, but I don't want the child div to inherit the opacity property.
How can I do that?
Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency.
So instead of:
background-color: rgb(0,0,255); opacity: 0.5;
use
background-color: rgba(0,0,255,0.5);
Opacity is not actually inherited in CSS. It's a post-rendering group transform. In other words, if a <div> has opacity set you render the div and all its kids into a temporary buffer, and then composite that whole buffer into the page with the given opacity setting.
What exactly you want to do here depends on the exact rendering you're looking for, which is not clear from the question.
A little trick if your parent is transparent and you would like your child to be the same, but defined exclusively (e.g. to overwrite the user agent styles of a select dropdown):
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}
As others have mentioned in this and other similar threads, the best way to avoid this problem is to use RGBA/HSLA or else use a transparent PNG.
But, if you want a ridiculous solution, similar to the one linked in another answer in this thread (which is also my website), here's a brand new script I wrote that fixes this problem automatically, called thatsNotYoChild.js:
http://www.impressivewebs.com/fixing-parent-child-opacity/
Basically it uses JavaScript to remove all children from the parent div, then reposition the child elements back to where they should be without actually being children of that element anymore.
To me, this should be a last resort, but I thought it would be fun to write something that did this, if anyone wants to do this.
Opacity of child element is inherited from the parent element.
But we can use the css position property to accomplish our achievement.
The text container div can be put outside of the parent div but with absolute positioning projecting the desired effect.
Ideal Requirement------------------>>>>>>>>>>>>
HTML
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}
Output:--
the Text is not visible because inheriting opacity from parent div.
Solution ------------------->>>>>>
HTML
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}
Output :
the Text is visible with same color as of background because the div is not in the transparent div
The question didn't defined if the background is a color or an image but since #Blowski have already answered for coloured backgrounds, there's a hack for images below:
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');
This way you can manipulate the color of your opacity and even add nice gradient effects.
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
<div class="wrapper">
<h1>Question 5770341</h1>
</div>
There is no one size fits-all approach, but one thing that I found particularly helpful is setting opacity for a div's direct children, except for the one that you want to keep fully visible. In code:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
and css:
div.parent > div:not(.child1){
opacity: 0.5;
}
In case you have background colors/images on the parent you fix color opacity with rgba and background-image by applying alpha filters
Answers above seems to complicated for me, so I wrote this:
#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}
#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}
span {
color: white;
}
<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div>
kb-mask-overlay it's your (opacity) parent, pop-up it's your (no opacity) children. Everything below it's rest of your site.
It seems that display: block elements do not inherit opacity from display: inline parents.
Codepen example
Maybe because it's invalid markup and the browser is secretly separating them? Because source doesn't show that happening. Am I missing something?
Below worked for me:
Changed
From:
opacity: 0.52;
background-color: #7c7c7c;
To:
opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;
To convert the hex & opacity to rgba,
use a website like http://hex2rgba.devoth.com/
<!--Background opacity-->
<style>
.container1 {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, .5);
margin-bottom: 50px;
}
</style>
<div class="container1">
<div class="box1">Text</div>
</div>
<!--Before, after, z-index opacity-->
<style>
.container2 {
width: 200px;
height: 200px;
position: relative;
margin-bottom: 100px;
}
.container2:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
opacity: .5;
z-index: 1;
}
.box2 {
position: relative;
z-index: 2;
}
</style>
<div class="container2">
<div class="box2">Text</div>
</div>
<!--Outline opacity-->
<style>
.container3 {
width: 200px;
height: 200px;
outline: 50px solid rgba(0, 0, 0, .5);
margin: 50px;
}
.box3 {
position: relative;
left: -16px;
}
</style>
<div class="container3">
<div class="box3">Text</div>
</div>
I also faced the same issues, after doing some googling I found some solutions ( 3-ways ) of this problem.
I am sharing the solutions here, you can try any of these.
Option-1:
Use a pseudo markup element before or after as the background
.parentContainer {
position: relative;
}
.parentContainer:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.6;
}
.childContent {
position: relative;
color: red;
z-index: 1;
}
Option-2:
Use rgba colors with alpha value instead of opacity.
<div id="parentContainer" style="background: rgba(255,255,255,0.6);">
<div id="childContent">
Content ...
</div>
</div>
Option-3:
Use background div with absolute position one element over another.
<div class="parentContainer">
<div class="childContent">
Here is the content.
</div>
<div class="background"></div>
</div>
.parentContainer {
position: relative;
}
.childContent {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
opacity: .5;
}
If you have to use an image as the transparent background, you might be able to work around it using a pseudo element:
html
<div class="wrap">
<p>I have 100% opacity</p>
</div>
css
.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}
My answer is not about static parent-child layout, its about animations.
I was doing an svg demo today, and i needed svg to be inside div (because svg is created with parent's div width and height, to animate the path around), and this parent div needed to be invisible during svg path animation (and then this div was supposed to animate opacity from 0 to 1, it's the most important part). And because parent div with opacity: 0 was hiding my svg, i came across this hack with visibility option (child with visibility: visible can be seen inside parent with visibility: hidden):
.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}
And then, in js, you removing .invisible class with timeout function, adding .opacity-zero class, trigger layout with something like whatever.style.top; and removing .opacity-zero class.
var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);
Better to check this demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011
I solved this problem by first creating and saving a faded image which I then used in the css background. I used the following python code:
from PLI import Image
bg = Image.open('im1.jpg')
fg = Image.open('im2.jpg')
#blend at ratio .3
Image.blend(bg,fg,.3).save('out.jpg')
Here, im1.jpg was simply a white image of the same dimensions as im2.jpg.
On mac you can use Preview editor to apply opacity to a white rectangle laid over your .png image before you put it in your .css.1) ImageLogo2) Create a rectangle around the imageRectanle around logo3) Change background color to whiterectangle turned white4) Adjust rectangle opacityopaque image
For other people trying to make a table (or something) look focused on one row using opacity. Like #Blowski said use color not opacity. Check out this fiddle: http://jsfiddle.net/2en6o43d/
.table:hover > .row:not(:hover)
Assign opacity 1.0 to the child recursively with:
div > div { opacity: 1.0 }
Example:
div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }
<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>
This issue is related to the topic mentioned here.
I managed to fix my previous CSS code to get the effect of having text aligned to the middle of the picture, but now I would like to add a header to the text. My problem is that I have troubles with aligning the header, currently it looks like this: https://jsfiddle.net/u8db2j75/ , but I would like to achieve the effect like this: http://i.imgur.com/fFuohml.png where the header text is right above the normal text. I don't know why in my solution there's this huge gap between the header and the text. Could you help me with my issue? My current css code is as follows:
* {
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 60rem;
/* 960 */
margin: 0 auto;
}
.item {
width: 100%;
overflow: hidden;
margin-bottom: 5rem;
display:table;
/* 80 */
}
.item__img,
.item__info {
width: 50%;
display:table-cell;
vertical-align:middle;
}
.item__img {} .item__img .img-map {
width: 95%;
height: 18.750rem;
/* 300 */
}
.item__img img {
width: 95%;
height: 18.750rem;
/* 300 */
}
h2 {
font-weight: normal;
font-size: 4rem;
/* 64 */
text-align: left;
}
and current html code is this:
<div class="container" role="main">
<article class="item">
<div class="item__img">
<div class="img-map">
<img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" />
</div>
</div>
<div class="item__info">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum
vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris
rutrum ornare.</p>
</div>
</article>
</div>
Thanks!
When you have a heading followed by a paragraph, there are (generally) no more than 4 style declarations that create a visible vertical gap between the heading and the paragraph. These 4 style declarations are (in order):
1) The padding-bottom of the heading;
2) The margin-bottom of the heading;
3) The margin-top of the paragraph;
4) The padding-top of the paragraph;
With more advanced layouts, declarations like line-height will also play a role, but we don't need to worry about that for now.
Therefore, if you want to ensure that there is zero visible gap between the second-level heading and the paragraph which follows it, you might declare the following rules:
h2 {
margin-bottom: 0;
padding-bottom: 0;
}
p {
margin-top: 0;
padding-top: 0;
}
Of course, if we leave it there, the style rules for the paragraph above will apply to all paragraphs. If we want these style rules to apply only to paragraphs which immediately follow an <h2>, then we can make the styles above slightly more explicit by declaring:
h2 {
margin-bottom: 0;
padding-bottom: 0;
}
h2 + p {
margin-top: 0;
padding-top: 0;
}
The + selector above indicates that the rules only apply to the element after the selector when it is the sibling which immediately follows the element before the selector.
Now that you have zero visible gap between the <h2> and the <p>, you can tweak your margins and paddings as appropriate.
The answer to this lies in the answer I gave on the previous question. There's spacing because the browser applies it's own stylesheet.
Here's what firefox adds:
h2, *:-moz-any(article, aside, nav, section) h1 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin: 0.83em 0;
}
You just need to add a style that overwrites the margin.
As I mentioned before, you can use a developer console either in Google Chrome, or by adding Firebug to Firefox. This will allow you to see what styles are being applied to which elements on the page, just by pressing F12.
You must reduce the bottom margin of h2 (53px) and the top margin of (16px)
h2 {
font-weight: normal;
font-size: 4rem;
/* 64 */
text-align: left;
margin-bottom: 0px;
}
p{
margin-top: 2px;
}
Inspect the code and you'll see a margin applied to your <h2> :
This is caused by default CSS value.
It is very recommended you add * {padding: 0; margin: 0;} to disable default padding/margin on every element, then you'll be able to add your own margins/paddings on whatever you want.
I'm currently trying to learn adaptive/mobile web-design, which involves media queries for different platforms and resolutions, using em rather than px in designs etc. I am currently trying to place two em-width elements next to each other; a navigation/info bar next to my content.
I have set the info bar to be 16em wide (translates into 16px per em according to font-size) and the content to be calc(100% - 17em) wide. I'd assume this should leave 1em of margin between the menu and the content, no matter how much I zoom and resize my window, but the end result disagrees:
100% zoom
25% zoom
friend's screen
The space between the elements changes vastly by zoom level, although everything universally uses 'em' units and the font-size is not changed between relevant elements. What could possibly be the issue?
Info: I'm using a media query to transition the navigation from horizontal alignment to a sidebar. It's the queried version that is acting up. Keep this in mind when looking over the CSS. It might be part of the problem, though I seriously doubt it...
#contentwrap {
margin-top: 1em;
border: 1px solid #000;
border-radius: 8px;
}
#content {
border-radius: 8px;
padding: 2em;
#navbar {
margin-top: 1em;
border: 1px solid #000;
border-radius: 8px;
width: 100%;
display: table;
font-family: 'Cabin', sans-serif;
}
.navelement {
font-size: 0.8em;
width: 25%;
padding: 1em;
text-align: center;
display: table-cell;
}
#nav4 {
}
#media (min-width:1580px) {
#navbar {
border: 1px dashed red;
padding: 0px;
width: 16em;
float: left;
background-image: none;
}
.navelement {
font-size: 0.8em;
background-image: url('../img/navbg.png');
background-size: 100% 100%;
width: 20em;
display: inherit;
border: 1px solid;
border-color: #303030 #101010 #101010 #101010;
border-radius: 8px;
margin-bottom: 1.25em;
padding: 1.25em;
}
#nav4 {
background-image: url('../img/navbg.png');
background-size: 100% 100%;
margin-bottom: 0em;
}
#contentwrap {
float: right;
width: -moz-calc(100% - 17em);
width: -webkit-calc(100% - 17em);
width: calc(100% - 17em);
}
}
HTML code:
<div id="navbar">
<div id="nav1" class="navelement"><b>Current news post:</b><br/>"Welcome to usp3!"<br/>by ividyon</div>
<div id="nav2" class="navelement"><b>Current MOTW:</b><br/>"Some Map"<br/>by some guy</br>[ Link to thread ]</div>
<div id="nav3" class="navelement"><b>Recent additions:</b><br/>- "Some map" review by Delacroix<br/>- Article: "Blah blah blah.." by ividyon<br/>- "Some other map" review by ividyon</div>
<div id="nav4" class="navelement">Recent forum posts:</br>- "This design is not good!"<br/>by A Dude</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</div>
</div>
<div id="contentwrap">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut purus tortor. Maecenas ut semper dui, ac convallis libero. Vivamus molestie mauris a mauris pretium, et dignissim mauris dictum. Vivamus et interdum ipsum, vitae facilisis massa. In auctor convallis feugiat. Nulla sit amet accumsan ipsum. Sed risus felis, sodales ornare nisl a, scelerisque fringilla neque.</p>
</div>
</div>
The content of your #navbar is wider than the width you have given to the #navbar itself.
#navbar would be 16em+2px = 258px (at a font size of 16px), while the content would be 20em+2.5em+2px = 290px (at a font size of 12.8px).
And since the #navbar has display:table, its own width will adjust itself to the width of its children rather than let the content overflow out of its boundaries. Tables do that.
So, calc(100%-17em) for the remainder doesn't make it. Either calculate a smaller width, or, since the navbar has float:left anyway, you can leave out the width altogether! Simply set the left margin if desired and you're done.
See Fiddle.
I'm building a website that displays a vertically stacked list of comments that are placed by users.
The text should appear in a text balloon that basically displays the name of the user, there under the text and finally in the text balloon footer, it shows two links and floated to the right, a time stamp.
Since design/layouts are not my thing, it took me some painful days to achieve this in pure CSS (requirement) and I managed to make the list appear very neatly. For that I have tried to study the CSS that Google and Twitter use to show resp their video's and Tweets and try to extract some useful stuff from it. However, I noticed their CSS's and HTML are huge and I'm questioning if they did it the "right" way or if they found out that was the only possibility in order to make it display well on all types of devices. (Can somebody shed some light on that perhaps?) Conclusion is that it was not very useful for me.
However, the result doesn't feel good and is very "touchy" (not flexible at all); for instance, when I resize my window or open the page on my tablet, it just looks disgusting; text block wrapped and displayed under the avatar image...
Question 1: as I mentioned, I have been looking /studying a lot by looking how the big sites (such as YouTube, Twitter and FaceBook) doing similar things and the HTML/CSS looks a bit messy in my opinion. Anybody sharing that thought/opinion?
Question 2: can someone provide me a with good starting point, i.e. HTML/CSS Example (preferably in a JSFiddle or so) for the following:
Some remarks:
No images should be used (expect from the avatar image offcourse)
No tables should be used; only Div's and/or HTML-5 sementics (such as header, footer, article, and so on)
The CSS/HTML layout should be that flexible that it adjust itself properly. On the image you can how I would like to have it displayed in different scenarios.
Should display well in latest version in IE, FireFox, Safari and Chrome.
Given the following mark-up:
<div class="wrap">
<img src="http://davidrhysthomas.co.uk/img/dexter.png" />
<div class="comment" data-owner="Dexter">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
<ol class="postscript"> <!-- links and timestamp -->
<li>link 1</li>
<li>link 2</li>
<li class="date">3 days ago</li>
</ol>
</div>
</div>
And the following CSS:
div.wrap {
width: 90%;
margin: 0 auto 1em auto;
position: relative; /* the image will be absolutely-positioned relative to this */
}
div.wrap:first-child {
margin-top: 1em; /* just for aesthetic reasons, adjust or remove, to taste */
}
div.comment {
font-size: 1em;
position: relative; /* the arrow on the left side of the div positioned relative to this element */
margin-left: 60px; /* allows a 10px gutter for the arrow to fit into */
border-radius: 0.75em 0.75em 0.75em 0.75em;
background-color: #ccc;
line-height: 1.4em;
font-family: Helvetica; /* or whatever... */
}
div.comment::before { /* requires a fairly modern browser */
content: attr(data-owner); /* displays the name of the comment-owner */
border-radius: 0.75em 0.75em 0 0;
background-color: #ccc;
display: block;
text-indent: 10%; /* adjust to taste */
border-bottom: 3px solid #999;
}
div.comment::after { /* again, requires a fairly modern browser */
content: ''; /* this property is necessary, even if only an empty string */
position: absolute;
top: 50%;
left: 0;
border: 10px solid transparent;
border-right: 10px solid #ccc; /* forms the 'arrow' */
margin: -10px 0 0 -20px;
}
div.comment p { /* or whatever, adjust to taste */
width: 80%;
margin: 0 auto 1em auto;
padding-bottom: 1em;
}
img {
position: absolute;
top: 50%;
width: 50px;
float: left;
border-radius: 10px;
margin-top: -25px;
}
p + ol.postscript {
width: 80%;
font-size: 0.8em;
margin: -0.5em auto 0 auto;
}
ol.postscript::after {
content: '';
height: 0.5em;
display: block;
clear: both;
}
ol.postscript li {
float: left;
margin-right: 0.5em;
}
ol.postscript li.date {
float: right;
margin-right: 0;
}
.wrap a:link,
.wrap a:visited {
color: #333;
text-decoration: none;
border-bottom: 1px solid #333;
}
.wrap a:hover,
.wrap a:active,
.wrap a:focus {
color: #f00;
border-bottom: 1px solid #f00;
}
JS Fiddle demo.
Edited in response to the valid comments, left below:
I don't think screen readers reads attributes which means it would probably be better to put the content of data-owner inside its own element, instead of an attribute.
One quibble (as noted above too) [Screenreaders will not read CSS generated content](One quibble (as noted above too) Screenreaders will not read CSS generated content and the comment author seems to me to be an essential bit of content that should be accessible to screenreader users.) and the comment author seems to me to be an essential bit of content that should be accessible to screenreader users.
Given the sound advice, I've replaced the .comment::before element, adding a discrete h2:
<div class="wrap">
<img src="http://davidrhysthomas.co.uk/img/dexter.png" />
<div class="comment" data-owner="Dexter">
<h2 class="owner">Dexter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
<ol class="postscript">
<li>link 1</li>
<li>link 2</li>
<li class="date">3 days ago</li>
</ol>
</div>
</div>
and appended the following CSS (in place of the original .comment::before):
div.comment p {
width: 80%;
margin: 0 auto 1em auto;
}
Revised JS Fiddle.