Here is the code: http://jsfiddle.net/F4sYM/
EDITED
Here is the new code: http://jsfiddle.net/F4sYM/5/
I'm trying to remove the #header opacity when #main overlaps it.
Since I'm using an image that uses background-size property, I can't just create another div inside #main.
Sample:
Is there a way to do it?
Thanks.
Opacity is inherited and cannot be simply removed.
.notranscolor -> opacity: 0.5 * 1.0 = 0.5
Solution:
Absolutly position contents.
I am trying to understand what exactly you need to achieve....
Is there any chance you can quickly make a screenshot of the result you want to achieve?
Check this fiddle even though i don't think that's what you want...
I just reverted the index
z-index: 0;
Use
background: inherit;
for #main div. You can also specify any other background-color explicitly.
http://jsfiddle.net/F4sYM/3/
EDIT:
removing
position: relative;
for #main div seems to have done it.
http://jsfiddle.net/F4sYM/7/
EDIT 2:
solution using 3 divs:
http://jsfiddle.net/7e3BG/
Related
My knowledge is pretty limited but have tried playing around with inspect element and cannot seem to figure it out? Thanks in advance
site link
I am trying to achieve this..
#
edit / update: got it mostly working just trying to figure out how to get rid of these two, can I do it through additional css?
This might work for you. add this to your CSS styles:
.header-filter {
background-size: auto;
}
First, delete that content: ""; in header-filter::after
second, add style topage-header{ background-color: #ffffff}.
The progress:
I took the photo in a div itself and checked what's behind it (added z-index just to make sure it's on the top):
then I deleted the content:
Changed background-color to red:
The final results:
Recode the .header-filer #media
Delete padding and min-height
The Results:
Please find here a HTML snippet and the corresponding CSS which build a BorderLayout:
https://jsbin.com/zokutalafe/edit?html,css,output
-
The yellow area in that BorderLayout example shall have a height of 100%, unfortunatelly it has not :-(
The question is now: Is it possible to change that yellow container's height to 100% by just modifying the CSS, NOT(!) the HTML, without using new [Edit: I mean "additional"] CSS selectors (means: something like ".borderlayout-center > div { height: 100% }" is not allowed)???
This is for a very special use case - that's why I have the above mentioned strange constraints.
Thanks a lot in advance.
You can use like below:
.borderlayout-center div {
height: 100%;
}
I'm not shure what you mean with new CSS selectors
But something like
.borderlayout-center div{
height: 100%;
}
it's nothing new and it works...
I have the below page where the column header is fixed and the table body is scrollable. But when i scroll the data, i have the result like the image 2. Please suggest as to what to do to get rid of this. This is the code for my div. The table is sitting inside the below div.
<div style="overflow:auto; height:400px; position: absolute;">
Before scroll
After scroll
You have to declare a background color, like this:
#element {
background: white;
}
Please post a JsFiddle or Codepen of your markup.
The bgcolor attribute is deprecated. Use background-color: #FFF or background: #FFF instead. Also, please terminate your style declarations with a ; you are going to experience strange issues otherwise. It also may be that you are not applying the style to that header row correctly, but it is difficult to say without some example markup.
There's two odd things I'm noticing:
1) You are using a div tag as a table header, which I haven't seen anyone do nor do I see any obvious reason for it.
2) I heard position: absolute can cause some weird issues in IE. http://www.impressivewebs.com/absolute-position-css/ I'm not sure if that's the main issue though.
I am using the following css to make all items in the main DIV of my page to be transparented:
#wrapper
{
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
This works and everything gets transparented. But for example I DO NOT want the texts, images and buttons to be transparented. How can I do this?
You can do this like so:
#wrapper{
color:rgba(255,255,255,0.9);
}
You will have to use rgba() to achieve this. Take a look at this website:
http://www.css3.info/introduction-opacity-rgba/
I did also come over this problematic and solving it with rgba() is really the best way to get around this. Using transparent images as background, in my opinion is not as flexible as it should be and I'm really against using images when you can achieve the effects you want in other simpler ways.
You need to use a transparent background (in png) for your wrapper and do not use opacity
The child-elements inherit the opacity and you can not directly change it back. But there is a workaround http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
I am trying to set a background image to be outside the actual containing div.
<div class="expandable">Show Details</div>
.expandable
{
background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}
so the "expand" image should basically appear just to the left of the div.
I can't get this working, the image doesn't show when it's positioned outside the borders of the container. I'm not sure if there's a CSS trick I am missing, or if it's something to do with my page layout (the "expandable" div is nested inside several other divs).
Is it possible to do this? Any hints?
Edit: here is a jsFiddle showing the problem: link
I know this is an old thread but I just wanted update it and add that this is possible using CSS pseudo elements.
.class:before {
content: "";
display: inline-block;
width: {width of background img};
height: {height of background img};
background-image: url("/path/to/img.png");
background-repeat: no-repeat;
position: relative;
left: -5px; //adjust your positioning as necessary
}
You're going to have to put the background image inside a separate element. Background image positions cannot place the image outside the element they're applied to.
edit your question jogged my memory and I went and checked the CSS specs. There is in fact a "background-attachment" CSS attribute you can set, which anchors the background to the viewport instead of the element. However, it's buggy or broken in IE, which is why I've got it sitting on the "do not use" shelf in my head :-)
edit — Note that this answer is from 2010, and newer (and, more importantly, widely-supported) CSS capabilities exist in 2016.
You can't do this how you want to exactly, but there is a pretty straightforward solution. You can put another div inside of .expandable like:
<div class="expandable">Show Details<div class="expandable-image"></div></div>
Then your CSS would look something like:
.expandable{ position:relative; }
.expandable-image{
position:absolute; top:0px; left:-20px;
width:<width>px; height:<height>px;
background: url('./images/expand.gif') no-repeat;
}
Depending on the details of your situation, you might be able to get away with CSS3's border-image-* rules. For instance, I used them effectively to place "dummy search buttons" in the filter row of a CGridView widget in yii (clicking anywhere outside the filter's input boxes will trigger the ajax call, but these "buttons" give the user something intuitive to do). It wasn't worth it to me to subclass the CGridColumn widget just to hack the html in its renderFilterCell() method * -- I wanted a pure CSS solution.
.myclass .grid-view .items {
border-collapse: separate ;
}
.myclass .grid-view .filters td + td {
border-image-source: url("/path/to/my/img_32x32.png");
border-image-slice: 0 0 0 100%;
border-image-width: 0 0 0 32;
border-image-outset: 0 0 0 40px;
border-width: 1px;
}
.myclass .grid-view .filters input {
width: 80%;
}
There is a little bit of a trick involved in the border-image-width values -- that 32 is a multiplier not a length (do not put px) of the unit used in border-width (ie 1px). The result is fake buttons in the first n-1 columns of the gridview. In my case, I didn't need anything in the last column because it is a CButtonsColumn which does not have a filter box. Anyway, I hope this helps people looking for a pure CSS solution 😀 :-D
* Not long after writing this, I discovered I can just concatenate code for an image in the 'filter' property of the array used to construct the CGridColumn, so my rationale turns out to be moot. Plus there seems to be an issue (in Firefox, anyway) with the border-image-repeat being forced to stretch even when space is specified. Still, maybe this might come in handy for someone 😕 :-\