On the University system am developing. I supposed to generate admission letters where each letter has two pages with a dynamic diagonal student name .
The problem is on printing the watermark comes to only one page instead of staying on each page yet on #media screen am achieving it.
<style>
#media screen{
#adm #background{
position:absolute;
z-index:0;
display:block;
height:850px;
width:78%;
}
#adm #watermark{
color:#f0f0f0;
font-size:80px;
transform:rotate(310deg);
-webkit-transform:rotate(310deg);
}
#adm #content{
position:relative;
z-index:1;
}
}
#media print{
#adm #background{
position:fixed !important;
z-index:-1;
text-align:center;
display:block;
height:850px;
width:78%;
background:gre
}
#adm #watermark{
color:#f0f0f0;
font-size:70px;
transform:rotate(310deg);
-webkit-transform:rotate(310deg);
}
#adm #content{
position:relative;
z-index:1;
}
}
</style>
<div id='adm'>
<div id='background'>
<div id='watermark'>John Morgan</div>
</div>
<div id='content'>Admission content</div>
</div>
I want when loop and print the admission text watermark of the student appears diagonally in the each admission letter.
I think you need to set the position of your element from the top in your print media section and as many you want you can increase that.
In your case, I set the .background CSS top:50%; and it shows the text in the middle of the page.
And If you set it to top:150%; it will be shown in the second-page middle.
#media print {
.adm .background{
position:fixed !important;
z-index:-1;
text-align:center;
display:block;
height:850px;
width:78%;
background:green;
top:50%;
}
I provide an online demo for your requirements, please check here.
https://codepen.io/nasser-ali-karimi/pen/MdgGoL
Related
I have a problem with my website banner. When I view my banner image on a phone screen, the text on the banner is too small to see. Due to this, I made the width of my image 120% (on CSS) so the text would be larger on a phone screen. When I did this, the banner just extended longer than the website length - but I want the excess banner to be cut off. I tried to solve this by using 'overflow: hidden' but it didn't work. Ultimately, I just want to crop the excess length off my banner but I don't know how.
HTML:
<div class="content">
<div class="banner">
<img src="images/large_banner.png" width="1440" height="80" alt="Sister banner"/>
</div>
</div>
CSS:
#media only screen and (max-width: 550px){
.banner{
height: auto;
width: 120%;
overflow: hidden;
}
}
You put width to the wrong place. You should paste height and width for image and put overflow: hidden; to div .banner.
Here's an example
img{
width:100%;
}
#media only screen and (max-width: 480px){
.content{
width:360px;
margin:0 auto;
}
.banner{
width:90%;
margin: 0 auto;
overflow: hidden;
}
.banner img{
width: 250%;
margin-left:-138px;
}
}
<div class="content">
<div class="banner">
<img src="http://man-centr.uz/image/cache/catalog/slider/slider2-1920x641.jpg" alt="Sister banner"/>
</div>
</div>
I have tried the piece of code mentioned below for a table, but it doesn't make it responsive. Can anyone make modifications to this code to make it responsive?
.content table {
border-collapse:collapse;
margin:0 0 1.625em;
width:100%;
font-size:90%
}
.content table h3 {
font-size:1em;
font-weight:300
}
.content tbody {
border-bottom:1px solid #444;
border-left:1px solid #444
}
.content tr:nth-child(odd) {
background-color:#eee
}
.content table th {
background-color:#0078d7;
color:#fff;
font-size:.85em
}
.content td,.content th {
vertical-align:top
}
.content th,.content td {
padding:3px 10px;
text-align:left;
border-top:1px solid #444;
border-right:1px solid #444
}
HTML
$menu .= '<table class="content"><thead><tr><th>Name</th><th>Description</th><th>Price</th></tr></thead>';
while ( have_rows('sections_items') ) : the_row();
// Your loop code
$menu .= '<tr><td>'.get_sub_field('dish_names').'</td><td>'.get_sub_field('dish_description').'</td><td>$ '.get_sub_field('dish_price').'</td></tr>';
endwhile;
$menu .= '</table> ';
What I did for showing table on mobile was either using bootstrap grid feature or modify table display style. I use them both depending on the content I want to show.
The key is to add #media query so that it changes based on screen size:
#media (max-width: 767px){
table{
//styles you want to change
}
}
If you have to use table elements, you can change the style of table and td elements to display: block on mobile and modify them from then.
Another way to do this which is not recommended is to create a whole new view for mobile only and hide the original table using media query. This creates duplicate data but gives you the freedom to custom mobile view at will.
example:
.mobile-table{ // or whatever class you want
display: none;
}
#media (max-width: 767px){
table{
display: none;
}
.mobile-table{
display: block;
}
}
If you want to resize your table according to the size of the window try using '#media' blocks so you can make sure your page looks exactly the same way you want
'#media' rule changes the css values according to the screen size
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
use this link to learn more
Try putting it in a container with overflow-x: auto, this should bring up a horizontal scroll bar for the table on screen resize. Here's an example
<div style="overflow-x:auto;">
<table class="content">
....
</table>
</div>
The above was answered keeping in mind the simple behavior of table "adding a scrollbar". My bad for not thinking and adding the advanced level of table responsiveness. If you are looking to have every row of your table to act as an individual table, when the screen size is too small, answer by Songqi Liu is the way to approach.
One more thing I would like to add to the styles relative for your table headers
td:nth-of-type(1):before { content: "Name"; }
td:nth-of-type(2):before { content: "Description"; }
td:nth-of-type(3):before { content: "Price"; }
This will set the headers to the left with the values on the right.
min-device-width and max-device-width are other attributes to interest if you are considering mobile. Check more here
i am working on a grid view for image gallery
this is what i did so far but there are still vertical spaces between some of the photos
CSS:
#container{
background-color:transparent;
top: 60px;
left:8%;
height:100%;
border:1px solid ;
width: 82.19%;
position:absolute;
outline: 0;
}
.box {
background-color:#3e3e3e;
border:1px solid #bebebe;
margin: 6px 3.5px;
width:362px;
display:block;
float:left;
border-radius:3.6px;
}
.box:nth-child(2n + 0) {
float: right;
}
how i am applying it:
<div id='container'>
<?php
(some php & mysql here)
echo "<div class='box'><img src='pictures/$image' width='360' ></div>";
</div>
?>
i can't figure out the proper css to create a grid view with no extra vertical spaces.
images have varying heights fixed width, the space i m talking is that space which is not letting grid structure to form properly the vertical distance b/w some photos is alot more than it should be
Is there anybody who can help me?
NOTE: Don't suggest any jquery plugins i want to use pure css
I have this HTML:
<div class="dashboard_wrap">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
that displays 3 divs, here is the CSS:
.dashboard_wrap {
padding:10px;
}
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
width: 50%;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_clear:after {
content: "";
display: table;
clear: both;
}
#media all and (max-width: 700px) {
div.wrap div {
width: 100%;
float: none;
}
}
I am using PHP so only certain users can see certain divs. If a user can only see the first 2 divs, how can i make them 50% each rather than 40%?
There is no need to use php or javascript for this. You can use basic html and css for this.
You can check the html fiddle for this: http://jsfiddle.net/4WaX4/1/
All the css which you need is this:
.dashboard_wrap {
display:table;
min-width:500px;
background:#00ff00;
}
.dashboard_items {
display:table-row;
}
.dashboard_items div{
display:table-cell;
border:1px solid #ff0000;
}
#media all and (max-width: 700px) {
div.dashboard_items div {
width: 100%;
display:block;
}
}
And the html looks as follows:
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
</div>
</div>
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
</div>
Very simpel and quick. When you resize the result window in jsfiddle you see that the divs become 100% relative to the outer div (500px).
I hope this is the solution youre looking for...
You can specify the class of the wrapper based on the number of items inside.
CSS classes for each variant will handle the style automatically.
If however the number of divs can extend beyond expected numbers, then dynamic inline styles may be your solution.
<div class="dashboard_wrap has3">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
<div class="dashboard_wrap has2">
<div>orders</div>
<div>porting</div>
</div>
<style>
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_wrap.has2 div {
width: 50%;
}
.dashboard_wrap.has3 div {
width: 33%;
}
</style>
When the page gets rendered, only two divs will be visible. What you need to do is use a client-based language i.e. javascript or jQuery, to manipulate what is visible on screen.
Use a simple check to see what divs are visible or use php to generate a value which you can hide in the page to make it easier to resize the divs like:
<input type='hidden' id='divs_visible' value='" . $divs_visible ."' />
then using jQuery:
$(document).ready(function() {
var divsvis = $("#divs_visible").val();
if(divsvis == 2)
{
// resize the divs
}
});
EDIT
You can also render all the divs, then using jQuery and the value you've placed in the hidden input, you can simply hide the div you do not need with:
$("#div_to_be_hidden").hide();
The image below explains what I am trying to achieve.
I need to show a user's car picture with the name under it. Each image/name pair should be in a DIV so as a user adds more cars, they move to the next line or page. Ideally the DIVs should be centered, more as a matter of aesthetics.
Using DOMPDF, I am generating a PDF from an HTML layout.
Unfortunately, DOMPDF's support for float is bad, even in the new 0.6.2 beta. I wonder if this layout I am proposing could be done without float. DOMPDF also does not support unordered lists.
I have tried some solutions using tables, but this also isn't good since DOMPDF does not allow cells to spill over to the next page.
I am using PHP 5/ codeigniter, and DOMPDF 0.5.2 (stable).
Any suggestions on how to get this layout are greatly appreciated!
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
img {width: 150px; height: 150px;}
h1 {font-size: 3em; text-align: center;}
h2 {text-transform: uppercase; width: 150px; text-align: center;}
div {margin: 10px; width: 150px;}
</style>
</head>
<h1>My Cars</h1>
<?php foreach ($cars as $row): ?>
<div>
<img src="<?php echo $row->cars_picture; ?>" />
<h2><?php echo $row->cars_name; ?></h2>
</div>
<?php endforeach; ?>
</html>
Thanks to #rkw and #manyxcxi for helping out.
At the end the only way of doing this without hacks was to use mpdf instead of DOMPDF.
I have the impression mpdf is a much better library, with better documentation. It has partial support for float, but it works very nicely and does exactly what I needed above.
If the boxes are all fixed width and you know the width of your PDF, then you can calculate the boxes per row and use a spacer div on the left of the bottom row to give you the offset you're looking for.
Without using float, you would have to use instead of : http://jsfiddle.net/AxZam/40/
relevant css:
body {
width:800px;
}
#content {
margin: 0px auto;
width: 600px;
text-align: center;
}
img {
width: 150px;
height: 150px;
}
h1 {
font-size: 3em;
}
.cars {
text-transform: uppercase;
width:150px;
display:block;
position:absolute;
top:0px; left:0px; }
span {
margin: 10px;
position: relative;
}
relevant html section:
<div id='content'>
<h1>My Cars</h1>
<span>
<img />
<span class='cars'>car</span>
</span>
...
</div>