I need to print content of a div using print style sheet.My div has big ordered list (200+ lines).
Issue :
only print the content of div which is fitted with first page.rest of the content is not showing in print.
#media print
{
body *
{
visibility: hidden;
}
#printcontent, #printcontent *
{
visibility: visible;
}
#printcontent
{
background-color: white;
border: 0px;
position: fixed;
top: 0px !important;
left: 0px !important;
margin: 0;
font-size: 14px;
line-height: 18px;
display: inline;
overflow: visible !important;
}
*
{
overflow: visible !important;
}
#nonPrintableTable
{
display: none;
}
#nonPrintableTable div
{
display: none;
}
}
Note:
I changed doc type in order to fix positioning issue on IE.
Thank in advance.
Related
I'm trying to turn a hyperlink into an icon while turning the content text into a tooltip. The catch is I'm working in a place where I have only CSS to play with, and I can't modify the HTML or add any Javascript. I'm retrieving data from an external source in a table, and one of the columns is a hyperlink - this I want to transform into an icon with the text-content as a tooltip manner on hover.
Below snipped is how far I've gotten, is there any way of making the :hover part look, feel and behave more like a tooltip? Or is there perhaps another way completely to achieve what I'm after?
.external-link {
font-size: 0;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
}
Stack Overflow
It's a bit tricky, but it's achievable with modifying before and after pseudo-elements. You just have to write tooltip content in your content property, otherwise, you should modify your HMTL itself.
So your final code should be something like this:
.external-link {
font-size: 0;
}
.external-link::before {
content: 'Stack Overflow';
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
left: 40px;
z-index: 1;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.external-link::after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover.external-link::before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
visibility: visible;
opacity: 1;
}
Stack Overflow
You can just edit your css like below. Just some idea. Not sure if you can write the tooltip text into css
.external-link {
font-size: 0;
position: relative;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:before {
content: 'Text';
position: absolute;
display: inline-block;
height: auto;
padding: 2px 5px;
width: 100%;
display:none;
color: white;
font-size:initial;
background: #00000099;
bottom: -15px;
}
.external-link:hover:before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
display:block;
}
Stack Overflow
I am creating a responsive header. I got two columns and want the button in the right column to be vertical centered.
I know I can center items using top: 50%; margin-top: -xy px, and my button although got a fixed height: 40px.
To use this method I wrapped my button inside a div {position: relative}. This does not work, as the div does not stretch its own height.
How can I solve this with css? First I thought about Flexbox, but it has quite some lack of browser compatibility.
JSFIDDLE DEMO
You can greatly simplify your code - remove floats, (use display: inline-block instead), remove the .relative div, etc.
Working Fiddle
html, body {
margin: 0;
padding: 0;
font-size: 16px;
}
header {
background: red;
color: #fff;
padding: 0.5em;
}
header h1 {
font-size: 2em;
margin: 0 0 0.2em;
}
header p {
margin: 0;
}
header button {
height: 40px;
width: 70px;
}
.column-left {
display:inline-block;
width: 70%;
vertical-align: middle;
}
.column-right {
width: 29%;
text-align: right;
display: inline-block;
vertical-align: middle;
height: 100%;
}
/* responsive */
#media (min-width: 200px) {
header {
padding: 1em;
}
}
#media (min-width: 300px) {
header {
padding: 1.5em;
}
}
#media (min-width: 400px) {
header {
padding: 2em;
}
}
#media (min-width: 500px) {
header {
padding: 2.5em;
}
}
#media (min-width: 600px) {
header {
padding: 3em;
}
}
/* helpers */
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
Remove this div with position: relative and add position: relative to your header tag. You can even delete your column-right div.
Another solution:
header button {
top: 50%;
transform: translateY(-50%); // instead of negative margin-top (it is useful when your button has dynamic height, supports IE9+ with -ms- prefix)
}
JSFIDDLE
I'm trying to prove a wireframe can work responsively, whereby list items 1-4 display:block on mobile, and on desktop 1,3,5 display inline next to each other.
I've encountered a weird bug only in Chrome, whereby the elements 1,3,5 don't re-render inline after a resize down to the small breakpoint and up again.
Demo:
http://jsfiddle.net/n0ocqf2w/3/
Full Screen:
https://jsfiddle.net/n0ocqf2w/3/embedded/result/
stackoverflow is making me post the code with the jsfiddle link, so here are the styles we have in play:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
ul {
margin: 50px 0 0 0;
padding: 0;
font-size: 0;
white-space: nowrap;
}
li {
display: block;
margin: 0;
padding: 10px 50px;
height: 40px;
background: red;
font-size: 12px;
position: relative;
z-index: 2;
display: block;
width: 100%;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: pink;
}
li:nth-child(3) {
background: blue;
}
li:nth-child(4) {
background: lightBlue;
}
li:nth-child(5) {
background: green;
position: fixed;
top: 0;
right: 0;
width: 50%;
}
#media screen and (min-width:400px) {
body {
background: black;
}
ul {
margin: 0;
}
li {
display: inline-block;
width: 20%;
vertical-align: top;
}
li:nth-child(2) {
background: pink;
position: fixed;
top: 35px;
left: 0;
width: 100%;
z-index: 1;
opacity: .5;
}
li:nth-child(4) {
background: lightBlue;
position: fixed;
top: 45px;
left: 20px;
width: 100%;
z-index: 1;
opacity: .5;
}
li:nth-child(5) {
background: green;
position: relative;
width: 20%;
}
}
Steps to replicate in Chrome:
Open at wide breakpoint, so body background is black. Observe items 1,3,5 rendering inline.
Resize browser down to < 400px, so body background is white. Observe items 1-4 switching to display:block.
Resize browser up again, so body background is black. Observe items 1,3,5 NOT lining up again.
After a bit of digging, I found this very old bug which hasn't been fixed in over 4 years:
https://bugs.webkit.org/show_bug.cgi?id=53166
Could anyone please confirm if this is fixable? I'm really hoping the open bug in the above link isn't present here, but the criteria of not applying the display property in a media query after a resize matches exactly :-(
Cheers
Hope this helps.
http://jsbin.com/bakujusaxu/1/edit?css,output
/*
SOLUTION HERE
The following elements are being treated as a "clearfix" type of thing, so when you re-size from "mobile" to "desktop" the fixed position elements are being treated as "block", as they happen to be intersected elements, it gives the stacked result...
*/
#media screen and (min-width:400px) {
li:nth-child(2),
li:nth-child(4) {
/*
The bug is a re-drawing bug. Not your fault, but the browser's.
The ideal solution, would be to set this to inline, but that doesn't work.
So you can set it to the following values:
none
flex
table
list-item
*/
display: flex;
}
}
I have created a css sprite image for multiple images. The css for sprite is:
.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}
Now I want to assign the first image from this sprite to an li element. Currently the first images is assigned using background:url property of this li as:
li{margin-top:0;padding:3px 0 3px 25px;background:url(../images/arrow.gif)
How can bring the first image from sprite and assign to the li element. I have seen an example which suggests to use:
<div class="sprites" id="image_5306605314403955_gif"></div>
But I want to see if adding HTML can be avoided and use CSS only for that purpose. The li element on my page looks like:
<li>ABC</li>
I am not sure if that is what you are looking for or not, but the below code should do it:
HTML:
<li class="sprites"><a id="image_5306605314403955_gif" href="http://www.xyz.com">ABC</a></li>
<li class="sprites"><a id="#image_9167572062810537_gif" href="http://www.xyz.com">ABC</a></li>
CSS:
.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}
#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}
#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}
#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}
#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}
#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}
#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}
If what you are looking for is not to use class or id, then I think it is impossible, as your CSS needs an identifier to differentiate between your items (which are inherited from the same class <li>)
body {
overflow-y: scroll
}
.mini_iframe,
.serverfbml_iframe {
overflow-y: visible
}
.auto_resize_iframe {
height: auto;
overflow: hidden
}
.pipe {
color: gray;
padding: 0 3px
}
#content {
margin: 0;
outline: none;
padding: 0;
width: auto
}
.profile #content,
.home #content,
.search #content {
min-height: 600px
}
.UIStandardFrame_Container {
margin: 0 auto;
padding-top: 20px;
width: 960px
}
.UIStandardFrame_Content {
float: left;
margin: 0;
padding: 0;
width: 760px
}
.UIStandardFrame_SidebarAds {
float: right;
margin: 0;
padding: 0;
width: 200px;
word-wrap: break-word
}
.UIFullPage_Container {
margin: 0 auto;
padding: 20px 12px 0;
width: 940px
}
.empty_message {
background: #f5f6f7;
font-size: 13px;
line-height: 17px;
padding: 20px 20px 50px;
text-align: center
}
.see_all {
text-align: right
}
.standard_status_element {
visibility: hidden
}
.standard_status_element.async_saving {
visibility: visible
}
img.tracking_pixel {
height: 1px;
position: absolute;
visibility: hidden;
width: 1px
}
This question would have been a duplicate of header and footer fixed, content scrollable and Fixed header, footer with scrollable content if not for one detail, which is very important for me - I do not want to specify a fixed height and width for the content.
http://jsfiddle.net/mark69_fnd/PWRDa/ contains a real form with dummy data, demonstrating the problem - resizing the window makes the scrollbars appear, but on the page, rather than on the form. In the current layout the menubar and the statusbar are scrolled out of view and I want them to remain fixed, while the form data gets scrolled.
Please, do not provide a solution with absolute width and/or height. I prefer calculating them in javascript, rather than baking them into the CSS, unless it is 100%. Of course, pure HTML/CSS solution is preferable.
Here is the CSS:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #eee;
}
.content {
background-color: #ddd;
padding: 0em 0em 2em; /* bottom padding for footer */
overflow: auto;
}
#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}
#status {
border: solid 1px #000000;
}
#status .error {
color: red;
font-weight: bold;
}
/* ------------------------------------------------------------------------------------*/
.char {
display: inline-block;
vertical-align: top;
}
.line {
white-space: nowrap;
}
/* --------------------------------- fieldset and legend ------------------------------*/
.fieldset {
border: 2px groove threedface;
margin-top: 1em;
}
.fakeFieldset {
padding: 2px;
}
.fieldset > div.legend:first-child {
display: inline-block;
text-align: left;
margin-left: 10px;
background: #ddd;
position: relative;
top: -0.7em;
}
.merge-bottom {
margin-bottom: -2px;
}
/* ------------------------------------ Forms ------------------------------*/
form div {
white-space: nowrap;
}
form select, form input {
margin: 2px;
border: 1px groove;
}
form label:not(.same-line) {
width: 8em;
text-align: right;
display: inline-block
}
#cust-balance {
text-align: center;
}
.ccExpDate {
width: 2em;
}
#cust-salutation {
width: 4em;
}
.postalCode {
width: 7em;
}
#cust-ccAddress {
width: 20em;
}
// Updated with input from asker.
This works great. Mine have widths set to 100%, but of course you can do that in JS if you want.
You need to give the header and the footer position:fixed
I also put some padding in the .content div to make room for the top header.
Like the following:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.content {
background-color: #ddd;
padding: 2em 0em; /* padding for footer and header */
}
.menubar {
position: fixed;
top: 0px;
width: 100%;
z-index:1;
}
#footer {
position: fixed;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}