My test site is at: http://www.stagecraft.org/msi/
On the third "page" (Portfolio) I have three images that flip around and show text on the "back". I have two problems:
I can't get the text where the architect, owner, and GC are listed to change. I have tried creating a class of .spinbody but when I apply it, the text doesn't change. I need a different text styling/size here.
The images aren't fitting their rectangular regions exactly. They seem to be shifted "down" a bit. The images are 300px x 500px and the regions are as well. But the images are offset from the regions.
Any ideas where my mistakes are? I am pretty much a novice and have been piecing this code together.
Thanks in advance for any assistance!
Steve
What style are you trying to aply to this text? There are already
css rules that style it and you may have some CSS overrides that
block your changes. You could add !important at the end of your
new rules but it isn't the best solution. The best solution would be
to inspect your CSS with some browser developper tools (ex: firebug
for firefox) and see how you can itegrate your new CSS rules to the
existing code.
For the second problem, there is a top-margin aplied to the images
so they are shifted down. the margin is aplied on #section1 img
line 173 of msi_style.css you could delete it but be sure it
won't change the other images too.
EDIT
The text size on the back of the flip card comes from .intro p on line 190 of msi_style.css
Check on to the firebug where exactly your css rules collapsing and try to make your this rule more specific using element and id combination...
Or for time being you can fix it by using !important at the end of your new rules but it isn't the best solution....
Related
Last 24 hours I spent on figuring out how to control widows/orphans but without using widows and orphans selectors in my CSS. Believe it or not, but Kindle Oasis and Paperwhite for that matter (though I don't have this device at hand) use AZW3 files that do not support either widows:2 or orphans:2 or even break-after:avoid. My text has subheads that, if viewed on Kindle, get left behind at the bottom of the pages. I tried KFX, yes, and it is better in terms of layout (widows/orphans and breaks are supported) but KFX has another problem which is a deal-breaker for me - it underlines every link whether you specify text-decoration:none or not. I have about 2000 links in the text that I don't need underlined. Back to the problem - AZW3 doesn't have support for widows/orphans and page breaks. Can someone suggest how to go about accomplishing this:
p {
widows:2;
orphans:2:
}
or
p {
break-inside:avoid;
}
without the above CSS in order to control where text breaks on Kindle devices.
Thank you.
The only way I found how to force the lines to stay together, i.e. to imitate the break-inside:avoid; behavior, is to put an html element such as img which doesn't break across pages behind my text. Example:
<img src="transparent.png" style="height:3em;width:auto;"/>
<h style="margin-top:-2.5em">this is my header</h>
<p>this is my paragraph</p>
Notice that my PNG is called "transparent" - because that is all it is - a transparent square. My margin-top is slightly less than the height of the image thus still leaving some space above the header. Spacing can be modified with regular margins. Interestingly, this works well on Kindle Fire and Kindle Oasis where <h> and <p> text is forced to go to next page together because of the height of the image. Pending a better implementation of page-break and widow/orphan control on Kindles, this is probably the only way to control this behavior.
I'm having a hard time figuring out the most efficient way to resize text for mobile. I know per the documentation, making the text size responsive to the screen is fairly straightforward, simply add the is-size-*-mobile class to an element to reset the text size to the value of * (1-7) for mobile devices. What elements are the best place to do this? For example, I would like to be able to have all the text on screen change to size 7 on mobile, but so far I've had to add the is-size-7-mobile class to almost every text container on the page. While it's not impossible to do, it seems to be defeating the purpose of having such a class available through CSS.
Any tips would be greatly appreciated.
Although they lack a specific example, those Typography helpers are meant to be added to the element that holds the content you want to modify.
For example, if you want to modify the whole document consider adding it right to the body element:
<body class="is-size-7-mobile layout-documentation page-helpers">
The above example works on their documentation page you liked in your question. Just hit F12, add the modifier, and voilà, all the page changes text size.
Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.
Here's some examples of fonts designed to be used this way.
http://www.myfonts.com/fonts/matchandkerosene/duotone/
http://www.myfonts.com/fonts/scrowleyfonts/stomp/
I was sort of able to get this to work using CSS like this:
http://jsfiddle.net/6SakC/2/
This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.
However, this doesn't seem ideal to me. Two problems:
I don't want to duplicate the text in the html.
I have to guesstimate the top-margin by trial and error.
If the text wraps, this doesn't work anymore.
Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.
Thanks!
You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle: http://jsfiddle.net/6SakC/4/
That also solves the problem with the text wrapping.
To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: http://jsfiddle.net/6SakC/5/ (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)
In other topics I've found that IE/FF doesn't print background images by default. Now that's a shame, because background images add some possibilities that are very difficult to reproduce with classical <img> tags:
You can align them both horizontally and vertically
You can crop them if they are larger than the target element (which also enables the idea of CSS sprites)
Now, it's not impossible to do, but it will require me to have different HTML layouts for printing and normal page, and the printing layout will be quite overcomplicated (since I'll have to use <table>s to achieve vertical alignment). Also, the benefits of CSS sprites will be lost.
Is there any hope? I gather that #media print doesn't help, but isn't there something else, maybe browser-specific, that would allow one to say: "Yes, this isn't a normal background, it really needs to be there even in print view"?
Not possible. You would have to some how convert your background images to img or use Canvas. Of course using canvas depends on which IE you supporting.
Its a browser setting which restricts the printing of background images. I think the logic behind it was that the vendors wanted to give the users the option of printing background images and ensure that the web developer could not alter these settings through some sort of script.
As a general rule, background images should be reserved for adding to the page design but aren't essential to understanding the content. Therefore it shouldn't matter if they are missing when the page is printed. If something (such as a product shot) is important, then it should be included as an actual image (which has the added bonus of being more accessible).
Could you look at including the image, then hiding it using CSS and duplicating is as a background image (perhaps dynamically using JS)? That way, you can ensure the image itself shows in your print stylesheet, and you get the benefits that having a background image brings. I've created a very simple example here.
I recently got a few designs made and am trying to slice and code them to get better at CSS. On my first design, I ran into some issues.
First, do I have too many divs? I have a wrapper around each section to allow the expandable background section on the left and right of the content to be a different color than the content itself. I also had to use a conditional style to get IE to position the ul correctly. Is there a better way to do that?
Second, would I make a div for each colored block in the content section? That would give me a white, blue, white, gray, and blue div all stacked onto each other. The main issue with that is going to be the parrot and the great price $199 emblem that breaks out of the div.
Here's what I got:
http://www.astigmaproductions.com/
Here's what it should look like:
http://www.astigmaproductions.com/ap.jpg
You're not using a reset css, which will lead to crossbrowser issues. Consider adding one. You will run into IE issues and in this case a conditional style is the way to go. But adding a reset will lead to less IE problems.
Since the parot breaks out of its div you shouldn't break everything into multiple divs. There is a gradient that is non-linear and lots of graphics going on in this header. Just grab the image and make it a big background (blue bg + grey line + parrot) and it should work. Add the skype and co. icons on top of that as well as the text.
If you want the text to be anti-aliased, try using sIFR or add the text to the main background.
That's pretty much it from what I see, you just need to start working and see if you run into issues.