I have a list of items that I want to layout in three columns. The list is pretty long (using a 3-column layout might take 5 pages). The conditions are as follows:
The first page has a header that is about 200px in height and 100% in width. After the heading in the first page, the page should start displaying the list in 3-columns.
"Middle and last" pages dont contain any header.
Last page contains an image.
I tried to give a margin-top for the second and third frames, the first page looks right but the "middle" pages don't. The margin-top gets applied to all pages.
Help will be appreciated.
When a frame is filled, pisa will automatically use the next frame. The example is explained in usage.rst:
<html>
<head>
<style>
#page {
size: letter portrait;
#frame header_frame { /* Static frame */
-pdf-frame-content: header_content;
left: 50pt; width: 512pt; top: 50pt; height: 40pt;
}
#frame col1_frame { /* Content frame 1 */
left: 44pt; width: 245pt; top: 90pt; height: 632pt;
}
#frame col2_frame { /* Content frame 2 */
left: 323pt; width: 245pt; top: 90pt; height: 632pt;
}
#frame footer_frame { /* Static frame */
-pdf-frame-content: footer_content;
left: 50pt; width: 512pt; top: 772pt; height: 20pt;
}
}
</style>
<head>
<body>
<div id="header_content">Lyrics-R-Us</div>
<div id="footer_content">(c) - page <pdf:pagenumber>
of <pdf:pagecount>
</div>
<p>Old MacDonald had a farm. EIEIO.</p>
<p>And on that farm he had a cow. EIEIO.</p>
<p>With a moo-moo here, and a moo-moo there.</p>
<p>Here a moo, there a moo, everywhere a moo-moo.</p>
</body>
</html>
The HTML content will flow from Page1.Col1 to Page1.Col2 to Page2.Col1, etc. Here's what the resulting PDF document could look like:
+-------------------------------+ +-------------------------------+
| Lyrics-R-Us | | Lyrics-R-Us |
| | | |
| Old MacDonald farm he had a | | a moo-moo everywhere a |
| had a farm. cow. EIEIO. | | there. moo-moo. |
| EIEIO. With a moo- | | Here a moo, |
| and on that moo here, and | | there a moo, |
| | | |
| (c) - page 1 of 2 | | (c) - page 2 of 2 |
+-------------------------------+ +-------------------------------+
Related
So I want to make 3 images over 2 columns. The left image will be 100% of the height of the flexbox and I want to 2 right side images to be stacked top to bottom and their total height to equal the height of the left image or the flexbox height itself. When responsive resizing I want to keep this ratio as well.
The problem I'm having now is that upon resizing the left image shrinks and the combined height of the right 2 gets larger than the left image.
Thanks for trying to understand my jibberish.
I've tried a number of things and nothing working.
Using Flexbox
In order to accomplish what you are describing using flexbox you will need to use two flexboxes which will require making a few changes to the HTML.
The outer flexbox should have flex-direction: row; (this is the default value so it can be omitted). This will flex its children horizontally.
The inner flexbox should have flex-direction: column;. This will flex its children vertically.
The children of the first div should have flex: 1; which will distribute the space using an even ratio amongst the children.
You then just need to set height: 50%; for each of the images in the second flexbox.
Here's an example of what your code could look like:
.container,
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
img {
object-fit: cover;
}
div {
display: flex;
}
img,
div {
flex: 1;
}
.right {
flex-direction: column;
}
.right>img {
height: 50%;
}
<div class="container">
<img src="https://source.unsplash.com/random?mountain">
<div class="right">
<img src="https://source.unsplash.com/random?city">
<img src="https://source.unsplash.com/random?cat">
</div>
</div>
So here the picture of what I'm trying to do:
http://imageshack.us/content_round.php?page=done&l=img14/1023/62507155.jpg
FF diplay is OK, IE8 - don't know ie on 1 PC is OK, checking from another is not OK, IE7 is not OK.
I've got a div with positioning relative and a backgroung picture which is transparent and overlays div 2. Div 2 is positioned absolute and sticked to the bottom of div1 with z-index: -1.
How can I make it look the same on all browsers (IE7/8 in particular)? I've read about putting higger z-index on parent div and lower on nested div but it just makes div2 to be on top on all browsers.
here is the code:
#div1 {
position: relative;
height: 900px;
width: 850px;
float: left;
background: url(img/background-left.png) no-repeat;
}
#div2 {
position: absolute;
background: red;
width: 850px;
height: 420px;
bottom: 0px;
border: none;
z-index: -1;
}
<div id="div1">
<div id="div2"></div>
</div>
If I remove position relative from div1 then its background is always on top of div2 like I want it, but then without position relative I cannot stick div 2 to the bottom of div1.
How do I truncate a table if it is wider than its container?
For example, say I have a div with width = 300px;
Inside the div: one table with 2 td, each with width = 200px;
Obviously, 200 + 200 > 300.
However, what HTML does is make each td 150px wide.
Is there a way to respect the td width (200) and truncate the last td so that only its left half is visible?
I have tried overflow:hidden on the div but the table is still 300px wide
Set the wrapping div to overflow hidden:
.wrapper {
overflow: hidden;
}
Here's the fiddle: http://jsfiddle.net/qmby4/
Please try using max-width property
Use the CSS overflow:auto tag on your div.
Check out more here:
http://www.w3schools.com/cssref/pr_pos_overflow.asp
I want to check the layout of the page. Something pretty simple - that a certain div is displayed above/below/left/right of another div
Is it possible to do this kind of stuff?
Using the Ruby client (#selenium is my SeleniumDriver object):
To check if a certain element is above another div:
#selenium.get_element_position_top("firstdiv") <
#selenium.get_element_position_top("seconddiv")
To check if a certain element is left to another div:
#selenium.get_element_position_left("firstdiv") <
#selenium.get_element_position_left("seconddiv")
If you also want to check that the elements don't overlap, compare the top of the element to the bottom of the other:
#selenium.get_element_position_top("firstdiv") +
#selenium.get_element_height("firstdiv") <
#selenium.get_element_position_top("seconddiv")
You can do it with Galen Framework. It is a tool based on Selenium but with its own special language.
The idea is that you test locations of page elements relatively to each other. Here is a basic example of how the test code looks like.
# all
------------------------------------
header, menu, footer
width: 100% of screen/width
header
height: 100px
above: menu 0px
menu
height: 50px
above: content 0px
footer
height: > 100px
content
inside: screen 0px left
# desktop, tablet
-----------------------------------
side-panel
width: 300px
below: menu 0px
inside: screen 0px right
near: content 10px right
# mobile
-----------------------------------
side-panel, content
width: 100% of screen/width
side-panel
below: content 5px
For more information you can read this article TDD for Responsive Design
Lets say I have some markup like this:
<html>
<head>
<style type="text/css">
#container
{
margin: 0 auto;
width: 900px;
background: green;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
Imagine "container" is filled with hundreds of a's for testing purposes of padding.
Now, what I want to do is to make an area of whitespace between the edges of "container" and its content on the left and right hand sides. So I add:
padding-left: 50px;
padding-right: 50px;
Now from what I (thought) I understood, this would mean that if 100 a's fitted per line before, only 80 or so would fit now. In other words, "container" would remain the same width but grow downwards.
However, what I am seeing is that the size of "container" is increasing horizontally and not vertically.
How can I get "container" to grow down vertically and stay the same width horizontally?
You need to change the width to 800px and then add your padding. Padding is additive to the width.
W------W - original width
PW------WP - original width plus padding either side
PW----WP - smaller width plus padding either side
Box model courtesy of Can Berk Güder
What garry said, If youre using Chrome or Firebug plugin for Firefox you can right click and "inspect element" and see a visual representation of how your elemenent is being sized, really helps in these situations.
The affects of adding padding or margin to an element depend entirely on the browser you're viewing the page in. Padding and margin SHOULD be additive as Garry says but that's not the case with IE6 so you'll need to do some research around browser differences and how you can accommodate them in your style rules.
From what it looks like your doing you just want a padding to be applied to the whole page. You could do that by directly referencing body in your CSS. so you'll have -
body
{
padding:0 50 0 50;
}
You could also add a margin to anything inside the div:
<style type="text/css">
#container
{
margin: 0 auto;
width: 900px;
background: green;
}
#container *
{
margin-left: 50px;
margin-right: 50px;
}
</style>