In XSL-FO, it is possible to make a fo:block have a border that can be solid or dashed, etc. Is it possible to make border that consists of asterisks (*)?
*****************
* *
* some text *
* *
*****************
I have always done this with SVG images as backgrounds. You could vary the images evens for the corners, sides, top and bottom. Basically put down a table for the borders with one center cell and then inside the middle cell, whatever you wish. If your pattern may get cut off, you might need to adjust the inner cell a bit. Like this:
<fo:table>
<fo:table-column column-width="1pt"/>
<fo:table-column/>
<fo:table-column column-width="1pt"/>
<fo:table-body>
<!-- Put background behind this top row -->
<fo:table-row background-image="diamond.svg"
rx:background-content-height="scale-to-fit" background-repeat="repeat-x">
<fo:table-cell number-columns-spanned="3">
<fo:block line-height="1pt">
<fo:leader/>
</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row>
<!-- Put backround behind this left cell -->
<fo:table-cell background-image="diamond.svg"
rx:background-content-width="scale-to-fit"
background-repeat="repeat-y">
<fo:block>
<fo:leader/>
</fo:block>
</fo:table-cell>
<fo:table-cell>
<!-- Tweak height here -->
<fo:block-container margin-top="0.4pt" margin-bottom="0.4pt">
<fo:table text-align="center">
<fo:table-column column-width="100%"/>
<fo:table-body>
<fo:table-row>
<fo:table-cell text-align="center">
<fo:block margin="18pt"> Put all your content in
here. Put all your content in here. Put all your
content in here. Put all your content in here. Put
all your content in here. Put all your content in
here. Put all your content in here. Put all your
content in here. Put all your content in here. Put
all your content in here. Put all your content in
here. Put all your content in here. Put all your
content in here. Put all your content in here. Put
all your content in here. Put all your content in
here. Put all your content in here. Put all your
content in here. Put all your content in here. Put
all your content in here. Put all your content in
here. Put all your content in here. Put all your
content in here. Put all your content in here. Put
all your content in here. Put all your content in
here. Put all your content in here. Put all your
content in here. Put all your content in here. Put
all your content in here. Put all your content in
here. Put all your content in here. Put all your
content in here. Put all your content in here.
</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block-container>
</fo:table-cell>
<!-- Put backround behind this right cell -->
<fo:table-cell background-image="diamond.svg"
rx:background-content-width="scale-to-fit"
background-repeat="repeat-y">
<fo:block>
<fo:leader/>
</fo:block>
</fo:table-cell>
</fo:table-row>
<!-- Put background behind this bottom row -->
<fo:table-row background-image="diamond.svg"
rx:background-content-height="scale-to-fit" background-repeat="repeat-x">
<fo:table-cell number-columns-spanned="3">
<fo:block line-height="1pt">
<fo:leader/>
</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
Yielding something like this:
Related
On my website I have used v-cloak with css property [v-cloak] {display: none} to hide the content before the vue script is loaded. I want to hide the content only inside the div, however, all the content below the closing tag of the div is also hidden. Is there a way to fix that?
How my code looks:
<!-- Content I want to be displayed -->
<div class="..." v-cloak>
<!-- Content that I want to be hidden before the vue script is loaded -->
</div>
// Content I want to be displayed
<!-- Content I want to be displayed -->
I have a HTML page which has a fixed footer div. It should be horizontally centered and at the bottom of the page. My code works fine if there is no much text on the page. If there is more text and the fixed footer div gets out of the screen, it disappears. I do not know why is that happening.
So, this works fine:
<div style="border: 1px solid blue; white-space: nowrap;">
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
</div>
<div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;">
This is the footer
</div>
But when there is more text and the footer gets out of the screen, it disappears. How could I fix this? Please note that the text on my content div should not be wrapped.
<div style="border: 1px solid blue; white-space: nowrap;">
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
</div>
<div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;">
This is the footer
</div>
<div style="border: 1px solid blue;">
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
<p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p>
</div>
<div style="border: 1px solid red; text-align: center;">
This is the footer
</div>
I would like to get some advice on CSS. My goal is:
3-column layout - left sidebar, main content, right sidebar
Sidebars have flexible height based on the content column height.
For SEO purposes, I need the PHP files with contents to be called in this order.
Main content file
Left sidebar file
Right sidebar file
So the divs have to be order this way:
<div id="columns-container">
<div id="content-bar">
<!-- PHP include of the content (middle bar) -->
</div>
<div id="left-sidebar">
<!-- PHP include of the leftbar navigation -->
</div>
<div id="right-sidebar">
<!-- PHP include of the rightbar with ads and stuff -->
</div>
</div>
If I were to call the files in order "left bar - content - right bar", that would be easy even for me. But this is a tall order for me.
So far, I have been able to create sidebars with minumum height, but I don't know how to extend them.
I got lost in the CSS and I think my solution is wrong, so I'd appreciate if somebody helped me build it from scratch and better.
You can use one of the most popular "ready-to-use" layouts: Holy Grail. It has everything that you asked for.
How would I achieve the below shown design using html and css?
The sidebar should be on top of all other items such as logo and menu and content. The menu should be behind wrap the sidebar. The content are is in 'L' shape. The content area should go up to sidebar and the come below the sidebar. The sidebar length is less than the total content area.
Here is a good rough draft to get you started.
(http://jsfiddle.net/tech0925/Sm8HB/)
Cheers!
For a lot of you this is easy but it's making me mad:
I have a webpage (black area) where div (red area) contains some content which I don't know how much is.
If the content is less then it needs to reach the logo, the logo should stay positionend in that point of my div, it shouldn't go up.
If the content is more, it shuld go down (keeping a fixed distance from text)
How to achieve this?
The min-height CSS property:
div { min-height:400px; }
http://jsbin.com/oxodak/2/
You want a "sticky footer", but contained inside a div instead of the whole page.
Tweak the method shown here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/