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 ๐ :-\
Related
I only have access to the css code so i can't edit the html. here's the page: http://myanimelist.net/animelist/linodiogo and the css code can be found here: http://pastebin.com/Kyz3dkmB. What i wanted to do was attach a transparent picture to the table right top corner so it would look better.
If you have any other recommendation I'm here to listen.
You can use the following via CSS, however you would probably need access to the HTML to be able to incorporate this without affecting the layout of the rest of the table.
class/id {
content:url(http://example.com)
}
I'm not entirely sure from the question/site what your aim is, but if you don't have access to the HTML it sounds as though an absolutely positioned pseudo-element might be the way to go here (even if you do have access to the HTML, it's still a good way to avoid clogged markup). The absolute positioning may avoid disruption to the table element.
Add position: relative to the table (or whatever you want the parent to be), and use the following to position a transparent element in the top-right:
parent:before {
content: '';
width: ...
height: ...
background: transparent;
position: absolute;
top: 0;
right: 0;
}
Taking this showcase example as a starting point: http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
I want to place the input of each column filter instead of here:
I would like to have it here:
Below the header and above rows containing data.
Is this possible? I saw the attribute filterPosition of the p:column but it only accepts top and bottom and both are still inside the header.
I managed to do it but in a really hackish way, so I'll accept this until someone finds something else.
Having table_with_filter as a styleClass of the p:dataTable, I added the following css:
First, I created space between the data and the header with a border:
.table_with_filter.ui-datatable-data {
border-top: 25px solid #DDDDDD;
}
Then, I move the input downwards with a custom negative bottom, and set the overflow of the header visible so I could see the filter outside it.
.table_with_filter.ui-column-filter.ui-inputfield {
position: relative;
bottom: -26px;
}
.table_with_filter th.ui-state-default {
overflow: visible;
}
Maybe some minor adjustments more on the styles to fit everything perfectly and that was it.
Result:
can you please let me know if there is any chance to make that the label wraps itself and do not go like in the picture ("Change Change Change..."):
I use "no more tables" here and always get that issue with longer labels - they just do not wrap. I understand that the white-space in css is "nowrap", but if I change it to "normal", everything goes wrong and displays badly. Maybe someone had an issue with this "no more tables" technique and word-wrapping?
More about this script can be fuonde here http://elvery.net/demo/responsive-tables/
That example uses absolute positioning to move the generated content to the start of the rows and is a flawed approach as that means that the content cannot wrap because it will overlap the content in the next row. That's why the nowrap rule is in place to stop this happening.
Instead of absolute positioning you could use display:inline-block instead and avoid the issue altogether.
In the code from here change these two rules as follows:
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
}
td:before {
display:inline-block;
vertical-align:top;
width: 45%;
padding:0 3% 0 1%;
}
Rough example here:
Updated code as per comments below:
td:before {
float:left;
width: 95%;
padding:0 0 0 1%;
margin-left:-100%;
}
td {
padding-left:50%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
You need to break the words if they are too long. You can make this in css as:
word-wrap:break-word;
Try it.
The main issue here has to do with sizing one HTML element based on another element. This is something that tables are optimized to do - calculating the height and width of๏ TD elements across the entire table to a uniform size dynamically based on content.
By abandoning tables (via changing the display type of THEAD to "block", effectively making it nothing more than a DIV), you've lost this automatic resizing effect that browsers do for you, as evidenced here:
There's no getting around this. The "No More Tables" approach must make a compromise - use absolute height to mimic the way tables are laid out. You are trying to reintroduce this automatic size calculation, but you can't without restructuring your HTML.
If you want to continue to pursue this path, you'd need to "manually" handle resizing of the TD elements - iterate over the cells of the table and resize them yourself whenever the size of table might have changed. While possible, your Javascript won't be nearly as optimized as the browser and anything you implement yourself will likely be buggy and slow.
I'm afraid the only viable solution is to shorten your label names and accept the need for absolute sizing to get around the lack of dynamic sizing in non-TABLE elements.
One possible solution: show an abbreviated label and then show a longer name in a popup on hover or tap: Tooltips for mobile browsers
I would like add a padding-top to my div when I click on the link to the anchor :
Go to my anchor
...
<div id="myAnchor"> ... </div>
The issues is that I want add the padding just when my link redirect me to the anchor. I don't want add padding-top in the html, I just don't want that my div is on the top of my page, I need a padding or margin top.
Thank you.
I think what you're trying to do is cause the link, when clicked, to scroll the browser window to a few pixels above the target, instead of having the target flush with the top of the browser window.
You can check this article for several solutions http://css-tricks.com/hash-tag-links-padding/
The simplest solution, generally would appear to be to add in your css:
#myanchor{
margin-top: -200px;
padding-top: 200px;
}
Replacing 200px with whatever value you feel is appropriate.
You may also wish to use a class to apply this, as I asume you won't just wish to use it on the one item :)
There's only one way I know of: javascript. If you're already using jquery:
$('a[href="#myAncre"]').click(function(){
$("#myAncre").css("padding-top", "20px");
});
Although if you don't use jquery already, it might be worth to do it with simple javascript.
I think, best way is
#myanchor:before {
display: block;
content: " ";
height: 50px;
margin: -50px 0 0;
}
Source and demo: http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-B
If you choose ugly way (that is margin-top: -50px; and padding-top: 50px;) layer will remain on the bottom and you need to use z-index.
Having seen advice seemingly change over the years regarding use of empty DIVs (ie. <DIV CLASS="somediv"></DIV>) I'm confused as to the current thinking over whether or not to use when a DIV will have no inner HTML.
I can find no definitive confirmation over whether we can rely on all modern browsers to display background color and image correctly at the specified width & height when there is no inner HTML, so I'm thinking maybe we can't rely on it - yet it's such a seemingly basic area.
I have even seen suggestions that empty DIVs should never be used - but do specs really state it is 'wrong' to have empty DIVs, or is it just unreliable? (I've tried finding reference to them, but maybe I'm using the wrong terms).
To illustrate, here are 5 areas where I would normally use an empty DIV, in the absence of any recommended alternative:
as a placeholder for content which will subsequently be fetched by XHR calls
as a way to manually create space in a layout
where an image is defined in CSS (as a background image, but will effectively be foreground)
where the text will come from the CSS using .somediv:after{content:SOMETEXT}
where CSS is used to display graph bars etc using solid background color
Maybe there are different answers for each of these, which might explain the complexity over this issue.
I have, of course, tried discovering already, but for example the SO question Is necessary to show an empty <div>? suggests to me there is a huge amount of "IMHO", "probably", "seems to work" in this area. I would expect that by now that some official consensus has been reached on best practice.
So.. should I use and if so should I set font-size to the same as the smaller of DIV width/height to ensure that space is filled in all browsers? Are there any other CSS tricks to ensure this will work in all browsers?
The browser is not going to discard or forget your container just because it does not have any contents (yet).
If you want the container to have a specific placeholder shape, then you might give it min-height, min-width, height and width and make sure it's display: block;.
If you are still unsure, you can fill it with a spacer.gif/png without padding and margin.
http://jsfiddle.net/APxNF/1/
Short answer. Yes, browsers will render the div even if there is no content.
Long answer, That might now always be the case. I have worked in the web for 8 years now and never had to use these, but here they are anyway.
jsFiddle demo
HTML
<div class="empty1"></div>
<div class="empty2"></div>
<div class="empty3"></div>
CSS
.empty1 {
background: #FBB829;
height: 100px;
width: 100px;
}
.empty2:before {
content: "\00a0";
}
.empty2 {
background: #FF0066;
height: 100px;
width: 100px;
}
.empty3 {
background: #F02311;
min-height: 1px;
height: 100px;
width: 100px;
}
Sources:
Experience
Empty div with 2px width and background color doesnt show with height as 100%
http://csscreator.com/node/36023