Page margins/padding at page break
I'm trying to create a full-width two column layout pdf using WkhtmlToPdf. Normally not a problem at all. But in my case I have a sidebar with a background color. The issue that occurs is that the sidebar has it's own padding. When the page breaks the content breaks just as expected but without the padding. This is the expected behaviour (as seen in Example A). My question is how one could achieve this 'cloned' padding when breaking the content (desired result example B).
After some searching I thought of the box-decoration-break css property. But from what I could find only Prince partially supports this property for table elements Prince box-decoration-break example and from what it seems only for the border property.
But hey I could make that work, setting a transparent border for the top and bottom should give me the same effect as padding. But as you may know buying a Prince license is a pretty costly bussiness (at least for my current project it's not an option). And it's not the best solution with the need of extra html markup as only table elements are supported.
Related
I have created a layout using DIVs/CSS. I have attached an example image and links below which shows how I would like things to be organized. Within the header, there is a logo and a menu which are cumulatively 1000px in width. The feature, content, and footer sections are also to be 1000px in width. However, the actual background images for ALL sections are 100% in width and are repeated horizontally.
Below is an example of what I want to do:
What I have actually put together so far (in terms of the design) can be viewed here: http://ohachem.com/2/. This is what I would like to follow. The CSS can be viewed here: http://ohachem.com/2/style.css
What is the best way to accomplish this? As you can see, the text in the "feature" section does not align completely in the centre. I've tried using clear:both, overflow:hidden, and several other methods, with no luck.
The "misalignment" of the "featured" text is caused by the floating logo. Because the float hasn't been cleared and extends outside of your header, it is causing that text to flow around it. Adding overflow: hidden to your #header element will correct it, but there's other ways to clear floats without adding extra markup.
Alternately, you could just make your logo the same height as the header. Right now the height property is set to the same value, but the logo has some extra padding, which is causing the overflow.
The website you're pointing to uses a liquid layout, here's a bunch of examples: http://www.dynamicdrive.com/style/layouts/category/C13/ .
One note, on your example, there's no positioning attributes that I can discern, a large part of making a layout responsive is ensuring it looks consistent across all browsers & screens.
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
I have a layout in which two divs appear stacked vertically inside a parent div which will be a specific height (due to containing a left hand menu). I wish the two divs to take up all the available vertical space. However, they must resize depending on their content. The easiest way to explain is with a diagram:
Reading the diagrams from top to bottom, this is the scenario:
both divs take up 50% of available height as this is sufficient to contain their content (this is the default).
there is a lot of content in top div and less content in bottom div. Top div expands to fit content and squashes bottom div.
reverse situation of (2).
both divs must expand to fit their content. Containing div must expand to accomadate.
I think I could figure out how to do this with a table, see the example here which is almost correct (in chrome anyway) except the outer div doesn't expand properly.
Is there a better CSS solution to this without using a table?
I cannot use JavaScript and solution must work in all browsers... including IE6 :(
.
This can be done using CSS, with a feature called the flexible box model. It's an extension to the box model that's been in use in CSS since the begining, and allows you to do stuff like vertical stacking, etc, which wasn't possible before.
You would start off with display: flexbox;, and then use other related styles to define the characteristics of the layout you want. It is very powerful. You can read the full W3C spec for it here: http://www.w3.org/TR/css3-flexbox/
Now the bad news: It's a very recent addition to CSS. It actually has reasonably good browser support (albeit with vendor prefixes), but the problem you'll always hit is that it isn't supported in IE, not even IE9 (though it is planned for IE10)
Other browsers require vendor prefixes, so even for supported browsers you'll need to write your styles in four or five versions.
In addition - and this is the real killer - there isn't a good fall-back solution for browsers that don't support it. If you design your page using flexbox layouts, and load it into a browser that doesn't support them, it will be a disaster.
For this reason, it is hasn't really seen much use in the real world yet. It's time will come, but as long as IE9 and earlier are in use, it won't become mainstream.
You can see a full browser compatibility chart for the feature here: http://caniuse.com/#search=Flexible%20Box%20Layout%20Module
In the meanwhile, you're going to have to use a Javascript solution.
My recommendation is the JQuery Masonry plugin. I think this will be your best solution for now.
You could fake it using a 100% height wrapping div and a white border like so:
http://jsfiddle.net/cBV88/2/
You can also remove the fixed height and it will still work.
SuperStretch might get you part of the way there.
I understand this question is redundant but I was unable to locate an answer from my searches on here and other online forums. Here is my situation.
http://www.ci.fayetteville.nc.us/CityCommon/port/contact.html
On that page I have a 'separator' line that is to extend to the bottom of the page. Now, I have thrown in plenty of break tags to stretch the page. This shows that the background image (used as a footer images in a way) stretches to the bottom of the page fine. (That image is contained within div#content.
My question is how can I additionally get my div#rightContent to stretch just the same way?
I have my html, body and container heights all specific at 100% as well as another container div called #content. I am pretty stumped.
At the link you can view my source and hopefully point me in a good direction to achieve this. Any help would be greatly appreciated. Thanks.
Make one background image that contains both the outer borders and the right-column divider. This technique is called "faux columns".
See: http://www.alistapart.com/articles/fauxcolumns/ and
http://en.wikipedia.org/wiki/Faux_columns
There are various CSS hacks to get equal column heights. The only one (IMHO) that feels 'standard' is to use display: table, but that doesn't work in IE (of course) so makes it less ideal.
As such, I find the solution that works best is a bit of JavaScript. You are already using jQuery so that'll make it even easier. Here's one example solution:
http://www.cssnewbie.com/equal-height-columns-with-jquery/
So, for a website I've been trying to get a specific layout to work across the IE browsers (FF + Chrome are a plus if they work, but usually they do).
Below you can see the layout I'm trying to achieve;
alt text http://dl.dropbox.com/u/2199846/layout.png
As you can see, this is just a slight variation of a multi-column layout that you can see around the internet. Just with some added extra's.
- no div should ever exceed the page height, if they do, they should just overflow (but normally that will only happen for the middle part)
- the "toggle" link should toggle the div below visible/invisible (got the jquery code and all, no issues there), but that toggle should offcourse expand/decrease the width of the middle div.
I'm at the end of my possibility's here, and tried changing to a full table layout, but that had the problem of always expanding when content got too much...
If any of you CSS heroes out there know how to make this layout, I'll be very grateful!!
EDIT:
What I forgot to add is that certain parts of this design should be fixed width/height. The top part should be 60px height, right and left side should be 200px width. And the small bar (+ toggle bar) should be 30px high.
Of course I'll try to work from the example posted below, but I thought I'd add this edit just in case someone finds it challenging to make (I know I find it challenging, yet I'm not so good yet in CSS for now)
http://jsfiddle.net/YGgTx/1/
this is a mock up of what you are trying to do I believe. As it indicated by the other posters you may want to use hide() to handle the menu effect. If there is anything wrong with this mockup let me know, I do not have IE6 installed but it works on 8.
I'm working now on a page that has a column of boxes styled with sexy shadows and corners and whatnot using the example here. I have to admit, I don't fully understand how that CSS works, but it looks great.
Inside the topmost box is a text-type input used for searching. That search box is wired up to a YUI autocomplete widget.
Everything works fine in Firefox3 on Mac, FF2 on Windows, Safari on Mac. In IE7 on WinXP, the autocomplete suggestions render underneath the round-cornered boxes, making all but the first one unreadable (although you can still see enough peeking out between boxes that I'm comfortable IE7 really is getting more than one suggestion).
Where could I start looking to correct the problem?
Here's what success looks like in FF2 on WinXP:
And here's what failure looks like in IE7:
Jeremy,
Sorry for this being so late, but hopefully the answer will be of use to you in a future project.
The problem here is that IE creates a new stacking order anytime there is an element with position:relative, meaning that z-index itself is not the only controlling factor. You can read more about this here:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
To solve the problem, if I'm understanding your problem correctly, apply position:relative to the container that wraps your whole autocomplete implementation (and then position:absolute to your results container). That should create an independent stacking order in IE for those elements that allows them to float over the other position:relative stacks that appear later in the page.
Regards,
Eric
The working solution I finally implemented was based on reading this explanation over and over again.
In the underlying HTML, all of the blue rounded corner elements are DIVs, and they're all siblings (all children of the same DIV).
The z-index of the autocomplete div itself (which is the great-great-grandchild of the rounded corner container div) can be arbitrarily high, and it won't fix this issue, because IE was essentially rendering the entire contents of the search box below the entire contents of the "Vital Stats" box, because both had default z-index, and Vital Stats was later in the HTML.
The trick was to give each of these sibling DIVs (the blue rounded corner containers) descending z-indexes, and mark all of them position:relative. So the blue div that contains the search box is z-index:60, the "Vital Stats" box is z-index:50, "Tags" is z-index:40, and so on.
So, more generally, find the common ancestor of both the element that is getting overlapped and the element that is overlapping. On the immediate children of the common ancestor, apply z-indexes in the order you want content to show up.
I'm not totally understanding the setup that's leading to the problem, but you might want to explore the useIFrame property of the YUI Autocomplete object -- it layers an iframe object beneath the autocomplete field, which allows the field to then float above the objects that are obscuring it in IE's buggy layout.
http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame
But the docs say that this matters in 5.5 < IE < 7, so this might not be the issue you're experiencing. So again, without totally understanding the setup you're working with, you might also want to try to experiment with various z-index values for the autocomplete field and the surrounding block-level elements.
Make sure the z-index of the auto-complete div is a larger number than the divs that constitute the rounded corner box. Microsoft puts the z-index of the top elements to 20000 or 100000 I believe. Might be wise to do the same.
I had a similar problem to this, I fixed it by basically just changing z-index for the different divs. Just setting higher number for each div in the order it should display.