How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.
I have a div like:
<div id=header>Document</div>
and I would like to display it on every page in top left corner using css like:
#page {
size: 8.5in 11in;
margin: 0.25in;
border: thin solid black;
padding: 1em;
#top-left {
content: ???? ;
}
}
Thank you.
I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1
In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.
<style>
div.header { display: none }
#media print {
div.header {
display: block;
position: running(header);
}
#page { #top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>
<h1 class="chapter">An introduction</div>
Doesn't
#header {
position: fixed;
top: 0;
left: 0;
}
work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.
EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.
Related
i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.
i want to solve this problem but i don't know how.
anybody knows how? so please guide me.
link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100
my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="inner-header">header</div>
</div>
<div class="body">body</div>
<div class="footer">
<div class="inner-footer">footer</div>
</div>
</body>
</html>
my css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
font-size: 30px;
text-align: center;
}
body{
background-color: orange;
}
.header{
border-bottom: 1px solid black;
}
.inner-header{
background-color: black;
}
.body{
height: 3000px;
background-color: blue;
}
.footer{
border-top: 1px solid black;
}
.inner-footer{
background-color: green;
}
.header,
.footer{
width: 100%;
height: 100px;
}
.inner-header,
.inner-footer{
height: 100%;
}
.inner-header,
.body,
.inner-footer{
width: 1000px;
margin: 0 auto;
}
#media screen and (min-width: 1200px){
.inner-header,
.body,
.inner-footer{
width: 1200px;
}
}
I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.
So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write
body {
overflow-x: hidden;
}
and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,
.main_container {
overflow: hidden;
}
There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
OR you could execute jQuery one,
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).
$.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;
or if you still can't find that particular element use this below trick,
//Open inspector -> “New Style Rule”:
* {
outline: 1px solid red;
}
You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.
Hope it helps someone. Happy digging.
I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?
* you should really not use that name for a class, it's unnecessarily confusing.
#media screen and (min-width: 1200px) {
body {
overflow-X: hidden;
}
.inner-header,
.body,
.inner-footer {
width: 1200px;
}
}
Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.
Codepen Demo
You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.
Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.
body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}
You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px
Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.
Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?
i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.
new link of code:
codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100
I'm trying add a simple text watermark that I want to appear for each page that it will get printed on and look reasonable on Firefox, IE and Chrome.
I've gone through all the related threads that I could find and have applied the suggested answers, but to no avail. Either it appears fine on every page, but doesn't show on the first page (Firefox). Or it only appears on the first page (Chrome). Or doesn't show at all.
I was wondering, is there a standard way to do css watermarks that works for all browsers that I may have missed somehow?
For those curious as to what my html/css looks like at the moment:
<div class="watermark">This is a watermark!</div>
#media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
Any help is much appreciated!
Edit: This isn't just for watermarking images, otherwise as suggested I should use an image editor. This is for watermarking pages of document content (sections of text of various sizes).
The real problem is that you need a .watermark at the bottom of each printed page, but CSS has no concept of these printed pages.
The best you could probably do is to use the page-break-after CSS attribute to force a page break at certain points, then you could position your watermark just before that.
Something like (untested):
#media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
#media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
Really I think those 2 classes could just be the same element, but this seemed more understandable in code.
The down side here of course is that you need to manually specify where each page break happens, and realistically, if someone prints your webpage on a 4"x6" notecard, its going to be radically different than standard size paper. But still, it's a step in the right direction.
You can't do this in css, simply because it won't work.
Think of this, the user just removes your css, gets your image URLs and copies the images, without the watermark. Right click 'save image url' will also bypass css.
There are two good ways to add watermarks that are fail-safe.
Edit the actual images
If you have control over the images, such as if you are building a photography portfolio, just batch process them in your image editor and add the watermarks before you upload them to the web.
This is a good idea because then your images are ready watermarked regardless of where you use them, so they're social media / promo pack ready etc.
Do it on request
Set up an .htaccess rule that intercepts any image requests and redirects them via some server side code that uses an image processing library to add the watermark and return the binary image data. You can cache a watermarked image with a hash code and check for a watermarked version existing first that will allow you to bypass the processing.
This means that any image request, regardless of whether it comes from css, HTML, or a direct URL will serve a watermarked image. Do use some logic to skip any images used for the decoration of your site, otherwise you'll get watermarked in unexpected places!
The advantage here is that the original image is untouched, if you update your watermark, perhaps as part of a rebranding, you won't need to update all your images.
Another advantage of this approach is that you can apply it to any images, even if you don't create them - for example, if you have users uploading images to your site. Care should be taken with this however, before you watermark, make sure you have the right to watermark the image.
issue reason.
print not support background-image.
This is my solution.
1.Absoluted position for Main elements(need to print div).
2.add element
<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
opacity: .8;
}
</style>
<script>
var addWatermark = function () {
var bodHeight = document.body.scrollHeight;
//imge size is 1000*400px
var imgNum = Math.floor(bodHeight/400) ;
var template = '<img src="../img/icon/watermark.png" class="watermark">';
var innerHTML;
//create image number
for(var i = 0;i < imgNum;i++){
innerHTML +=template;
}
// innerHTML.appendTo("#reportContent);
$("#reportContent").append(innerHTML);
}
window.onload = addWatermark;
</script>
<div id="reportContent">
<div class="mainContend" id="mainContend">
content reportContentreportContentreportContent
</div>
</div>
Here is how I successfully managed to use watermark on every page in print preview
HTML:
<!-- place this only once in page -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark"></div>
<!-- place this in your table thead -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark_print"></div>
CSS:
div.watermark_print{
display: none;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
div.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
#media print {
div.watermark {
display: none;
}
div.watermark_print {
display: block;
position: fixed;
inset: 0;
}
}
That should do the trick, we have two watermark, one in HTML page review and another hidden in normal view but in print preview, we show it and because we are repeating table header in every page so we have this watermark on every page.
.responsive td.head1:before {
content: url(myimage.png )
}
I want to put an image into a responsive table column (I'm using this to put the column titles as rows in a similar manner described at CSS Tricks here. The difference is that my 'headings' contain images. Those images need to be rescaled to fit, and I seem to be drawing a blank using such things as background-size. So is there any way to rescale/resize the image?
Update: Thanks for your suggestions about using a background-image - you get bonus points if someone can tell me a way of getting an image in a :before segment with an alt/description tag for disability compliance.
You can give the class a background image and style it. Try this...
name{
background-image:url("url here");
background-size:80px 60px;
}
Append a background image to this item, like here: http://jsfiddle.net/4rB5X/1/
.responsive th:nth-child(1):before {
content: "";
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background-image: url(http://www.placehold.it/30x30);
background-repeat: no-repeat;
background-position: top left;
vertical-align: middle;
}
th
{
vertical-align: middle;
}
To address your question with the alt Tag for these images:
You may indeed use content for an pseudo alt-tag. You can use an attribute to define the desired text. Here is an exampe:
http://jsfiddle.net/4rB5X/2/
CSS
/* Puts the data-img-alt value of the <th> as content */
.responsive th:nth-child(1):before {
content: attr(data-img-alt);
}
/* Hide Text from content */
th.hide-text:before
{
text-indent: -99999px;
overflow: hidden;
text-align: left;
}
HTML
<thead>
<th class="hide-text" data-img-alt="Lalala">Test</th>
<th>Test</th>
</thead>
Update:
Like #vogomatix pointet out, the content property must not be null, but at least an empty string (content:""; would be ok). To have a workaround, try this:
th:before
{
content: "";
}
th[data-img-alt]:before
{
content: attr(data-img-alt);
}
This is my first time posting to the forum and I'm by no means a web developer but I have been learning as I go.
The problem I'm having with is http://www.audiofactory.co.uk.
On some pages there are music players. Created using a Wordpress plugin.
See pages below for examples.
-services/audio-books/
-services/voiceovers/
-services/voicereels/
-/services/radiocontent/
-/our-team/voice-talent/
I have edited some CSS styles for each player to give it a specific width for a given page.
/* ===== "voicetalent" ===== */
.voicetalent div.playlist-colour { position:absolute; height:115px }
.voicetalent div.playlist-wrap-MI ul { position:static; height:115px }
/* ===== "voicereels" ===== */
.voicereels div.playlist-colour { position:absolute; height:207px }
.voicereels div.playlist-wrap-MI ul { position:static; height:207px }
/* ===== "audiobooks" ===== */
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
If you take a look at http://www.audiofactory.co.uk/services/audio-books/
you can see that when you resize the browser window the player does not resize as you would expect and overlaps the image on the left. I'd like the player to auto adjust its width when changing the width of the browser so everything stays relative.
I have spoken to the developer of the music player plugin and he suggested this
It looks like it's just a markup issue, it would probably work if you float the player as well as the image, either using the 'pos' parameter in the shortcode or by wrapping the shortcode in another floated div of a given width.
As the instructions were not very specific I was a bit unsure of how to implement these suggestions.
I tried wrapping my short code in a <div> like so but its probably completely wrong.
/* ===== "audiobooks" ===== */
<div position:float;>
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
</div>
Any help you could offer would be really appreciated.
Floating would be easiest. You'll have to add a clearfix for this to work properly so you can force the floated elements to behave as desired when they stack.
First include this into your main style sheet at a top level (top of the file).
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
In the html for the audiobook you'll have to add the clearfix class as below.
<div id="wrapperMI_0" class="clearfix wrap-MI audiobooks nolistbutton nopn">
On the div.wrap-MI class in css add:
float: left;
width: 48%;
I want to add a footer to an HTML page that will be repeated across all pages WHEN PRINTING. I have managed to achieve this through this code:
#media print {
p.note {
bottom: 0; position: fixed;
}
}
But now I have a problem with this paragraph going on top of the rest of the copy
According this Mirosoft article, this should work for me:
#page :first {
margin-bottom: 4in;
}
But it doesn't, it doesn't change anything... any ideas?
Here's the solution that worked, CSS is this:
#media print {
p.note {
display:block;
bottom:0;
position:fixed;
font-size:11px;
}
}
And everything needs to be contained in a separate div with this CSS
#wrapper {
position:relative;
bottom:1in;
margin-top:1in;
width:974px;
margin:0 auto;
}
This worked perfectly!
How about adding some z-index ? It seems that the footer overrides the last paragraph
Also try to use
#media print {
p.note {
bottom: 0; position: fixed;
margin-top:10px;
}
}
Make sure that the container for the main content makes room for the footer. For instance, if your markup looks something like this:
<div id="content"><p>Lorem Ipsum Latin et cetera</p></div>
<p class="note">Footer</p>
You'd want some css like this:
#content {margin-bottom:4in}
To create room for your footer text you can use a table with tfoot. Use tfoot>tr to create a spacer. Place your footer text inside a div container that has position:fixed; to bottom:0;.
CSS
table {width:100%;}
#media print {
tfoot>tr {height:20mm;}
tfoot div {position:fixed;bottom:0;}
}
HTML
<body>
<table>
<thead><tr><td>Page header</td></tr></thead>
<tbody><tr><td>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
</td></tr></tbody>
<tfoot><tr><td><div>Page footer</div></td></tr></tfoot>
</table>
</body>