I'm doing print layouts with HTML and CSS with AntennaHouse renderer.
A box in my content should have a left margin of 20pt on left pages and 10pt on right pages.
/* on left hand pages */
margin-left: 20pt;
margin-right: 10pt;
/* on right hand pages */
margin-left: 10pt;
margin-right: 20pt;
So the outside margin of the box should be 20pt and the inside margin 10pt.
Basically I'm looking for a syntax like this (which doesn't exist):
/* pseudo code */
margin-outside: 20pt;
margin-inside: 10pt;
Does anyone have an idea how to do that?
And if yes, is there an equivalent for padding inside/outside?
XSL-FO solutions are welcome as well, as AntennaHouse has equivalent functions for FO and CSS rendering...
If you use PrinceXML, it definitely supports margin-inside and margin-outside. I used it for laying out a novel:
#page {
size: 6in 9in;
margin-inside: 0.75in;
margin-outside: 0.625in;
margin-top: 1in;
margin-bottom: 1in
}
Related
Problem = Text overflowing container with Zooming (CMD +).
Before zooming =
After zooming =
The following solves it, but I am very reluctant to accept ViewPort units because of their lack of full support by all current Browsers, not to mention the legacy Browsers:
html {
font-size: 16px;
font-size: 2.4vw;
}
Another much more serious problem with ViewPort units is that they obviously scale with window size and I do not wish to do that.
I wish:
(1) nothing to happen to the font-size with window resizing.
(2) ... but I do wish the font-size to decrease such that the above container overflow does not happen with zooming.
(3) avoid Javascript and CSS #media Queries if possible.
Here's the appropriate code:
HTML -
<div id="roundedTextCorners" class="centerBlockContents">
<div class="headerText">
MY VERY OWN GUARDIAN ANGEL!<p>
MY LOVE SONG FOREVER!!
</div>
</div>
CSS -
#roundedTextCorners {
border: 0.3125em #994c00 solid;
border-radius: 0.625em;
padding: 1.0em 1.0em 1.0em 1.0em;
background-color: #994c00;
color: #fff;
}
.centerBlockContents {
text-align: center;
}
.headerText {
font-family: Georgia, Helvetica;
font-size: 1.60em; /* at the top level */
color: #fff;
padding: 1.0em 1.0em 1.0em 1.0em;
}
Any ideas ??
First and foremost, thanks Mr. Lister, for sticking with me on this challenge.
I finally I decided on a "solution" I was happy with. Inevitably, I decided a max-width had to go somewhere, either in the <body> or in #media. I chose #media because I concluded I despised horizontal scroll bars more than the jerkiness inherent to #media.
A webpage I'm working on for a client www.afterthemagic.com (slightly NSFW) looks OK in Firefox & IE but I can't for the life of me make it look properly in Chrome or Safari. I'm trying to mess with different variables the following element in style.css, but can't seem to get it to go.
#banner-text .left span {
font-size: 96px;
font-style: normal;
text-transform: uppercase;
position: static;
}
Any pointers on how to get the "THE" text to look fine in Chrome or Safari?? Thanks!
I would argue that you're going about this layout incorrectly.
Semantically speaking, you shouldn't be combining your H1 heading with the 'begin reading' link.
Your heading, 'begin reading' and author subsections should be floated and styled independently. Otherwise, I'm not sure what you mean by 'look properly'. Your h1 heading has a font-size of 200px, and your h1 .left span has a font-size of 96px. If you're referring to the text alignment, try:
#banner-text h1 .left span {
display:inline-block;
margin:0 0 10px 0;
font-size: 96px;
font-style: normal;
text-transform: uppercase;
}
Play with the margins until you get the alignment you're looking for.
This is a good resource to better understand the CSS 'display' property:
http://css-tricks.com/almanac/properties/d/display/
I am trying to create a pre-styled button using a div with a class of .red-button. Some buttons need to have a littel magnifying glass on them so I am thinking I can use the CONTENT property to display this on those buttons that need it by simply adding "features" to the class.
<div class="red-button features">Find a Home</div>
CSS looks like this:
.red-button {
background: none repeat scroll 0 0 #A20335;
color: #FFFFFF;
font-size: 70%;
font-weight: normal;
padding-left: 10px;
text-transform: uppercase;
width: 193px;
}
.red-button.features, .red-button.floor-plans {
margin-right:20px;
content:url("http://www.abc.com/popeye/wp-content/uploads/construct/icon-magnifier.png");
}
So why is my magnifying glass not showing up?
I know the link is right because when I add ":before" to the css it shows up.
.red-button.features:before
Here is the page I am working on: http://splitlightdesigns.com/megatel/?page_id=379
Many thanks,
Houston
content can only be used with the ::before and ::after pseudo-elements. https://developer.mozilla.org/en-US/docs/Web/CSS/content
In a website menu, I have implemented some wishes of my customer concerning typography in CSS. She needs a different tracking on the font, no problem. But, she wants the active link to be underlined. As I have not implemented the code to target the active link, I just underlined them all to see how it would look. The CSS is as follows:
.main-navigation a {
display: block;
color: black;
font-weight: bold;
letter-spacing: 0.45em;
line-height: 4.5em;
text-decoration: underline;
text-transform: uppercase;
}
And this is the result:
The problem is that the letter spacing kind of messes up the underlining. I've drawn some vote magnets freehand circles to indicate the problem. The line starts nicely at the left side but is extended with the value of letter-spacing to the right.
Screenshot is from Firefox 25. Jsfiddle to see for yourself.
I could solve this using borders and using margins instead of line height, but is this fixable otherwise?
CSS Text underlining too long when letter-spacing is applied?
http://jsfiddle.net/isherwood/JWcGh/2
.main-navigation a:after {
/* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */
position: absolute;
/* the same width as our letter-spacing property on the h1 element */
width: 0.45em;
/* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */
height: 200%;
/* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */
background-color: #fff;
/* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
content: ".";
/* hide the dynamic text you've just added off the screen somewhere */
text-indent: -9999em;
/* this is the magic part - pull the mask off the left and hide the underline beneath */
margin-left: -.40em;
}
I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter