I have this epub that is made in indesign.
The main text flows just fine and wraps just as it is supposed to.
The problem is with the footnotes.
Long footnotes will not wrap but extend past the right side of the screen.
It does wrap in iBooks but not in Adobe Digital Editions or Bluefire reader.
Is there a way to force wrapping of long lines through css?
Here is a link to one of the xhtml files:
http://dl.dropbox.com/u/22417556/text.xhtml
and here is a link to the css:
http://dl.dropbox.com/u/22417556/styling.css
(indesign is doing a great job of putting a lot of extra junk in here so maybe that's the problem.)
Ok I just found the a solution! My "a" tags were styled with "white-space: pre;" When I commented out that line I got the footnotes wrapping as they were supposed to. Now I just wonder if removing that line may cause something else to misbehave.
Edit: changed it from pre to pre-wrap. It also works.
Related
Hoping someone who is familiar with YUI's CSS templates can help me debug a CSS problem. I'm using a free html resume template I found on the net, and I want to print it on paper via the browser's print function. I am not publishing this on the web. My problem is that there's about a 75-pixel gap between the top of the first div and the browser's display area that I can't figure out how to get rid of. Looking at the image below, there is a red arrow that points it out.
YUI CSS gap between top of screen and div
The template can be found hosted at this location.
What I've done:
Open the element inspector in the browser. Looks like the gap is between the <body> and first <div>.
Downloaded the YUI CSS file to look at. Checked out all the div selectors, nothing interesting.
Looked at the .yui-t7 class, nothing interesting there either.
My suspicion is that some of the float and clear are adding up and causing the space, but this is outside my expertise.
I was looking for height values or padding that would clue me in on how to change it, but honestly I don't see heights anywhere in either css file. I admit that I am not strong in CSS at all. I'm open to other solutions too, just enough to get the thing printed so I can send it out!
This BR Adds a little space
The margin on this div adds the rest of the space
I have a h2 on a slider being populated from a Wordpress post title. Part of that title is a trademark, so I want that to be all on one line, with Welcome to on the line above.
Currently I have...
Welcome to The Happy Foundation
I want...
Welcome to
The Happy Foundation
Using max-width in css I can achieve...
Welcome to The
Happy Foundation
or
Welcome to
The Happy
Foundation
Is there a way to set a max-width for each line, or otherwise get a line break after Welcome to using css?
I have tried a few tricks out there like making the text transparent and adding it back in with content. But this creates all sorts of issues with alignment and also resizing on mobile browser. I don't want to over think it.
Edit: As mentioned above, the text on the slider originates from a Wordpress post title. I can't edit the original text/html markup without changing the post title. Even if I did I can't add selectors.
Edit 2: Adding a (With Option+Shift+Space on OSX) worked but threw out the alignment of my text-align center. I need the text to be centered. Or it just looks skewed anyway and is no good to anyone.
Did you try with a <br/> after Welcome to ?
You can use unbreakable spaces inside The Happy Foundation: http://jsfiddle.net/nusa3y03/
Edit: you don't even have to know max-width if you add an unbreakable space between Welcome and to: http://jsfiddle.net/nusa3y03/1/
Yes it is possible using the max-width property
h2{max-width:236px; color:red}
<h2 id="p1">Welcome to The Happy Foundation</h2>
CSS has the ability to break lines based on the width of the containing element - without wrapping the text you want to treat differently within a different element, such as a span tag, it's hard to specify how those sections of your content should be treated.
The easiest solution IMO for your case is to manually add a line break to the title. However, if you'd like to try using non-breaking spaces [http://blog.liveeditorcms.com/html-tip-keeping-some-words-together/][1] to keep the title of the foundation together, try giving this a shot:
`Welcome to The Happy Foundation`
This will treat your foundation's title as if it's one word, preventing it from being broken up onto different lines. This might cause issues in the future depending on how you display on smaller screens.
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
I had a page setup the way I wanted, with a logo absolutely positioned in the lower right:
http://testing.wizbury.com/onlinegamepage2.php?id=6
Then I added the following entry to the css, so that when a line of text in the box ran too long it wouldn't add so much extra space:
.ogfeatures li span {
vertical-align:middle;
display:inline-block;
line-height:1em;
}
That addition causes the logo to sit in the upper left of the content area (under the flash game). I can only post to links, but it is the same link as above, using onlinegamepage.php
The page dynamically generates a lot of content from a db, so Dreamweaver's preview doesn't work well. I decided to throw the code into fiddler and hard code things so I could play with the layout...and it works fine in fiddler, even with the spans added in.
http://jsfiddle.net/wrX8g/
So now I am completely befuddled. I'm sure there is something simple going on that I am missing, but I can't figure it out. I'd greatly appreciate any insight.
Thanks,
Doug
I'm not sure if StackOverflow is doing it or if it's in your original code, but when I copy your CSS into another file, after the closing }, there is a Zero-Width Space character, which isn't valid in CSS and, I believe, causing the declaration to be thrown out by the browser. I speculate that in whichever browser ytou're using, it's also throwing out all subsequent declarations, and that you've put that bit of CSS code right above the CSS declaration that positions the logo, thus preventing that declaration from taking affect and putting the logo where it would be without any applied CSS.
The fix is to simply remove the offending character, which you can probably do by putting your caret to the send of the line with the } in it, and backspacing. The caret shouldn't move, which tells you it removed an invisible character. If that doesn't work to remove it, you could also do it in a hex editor.
I'm trying to get familiar with CSS but some of things that are happening seem rather arbitrary.
For example:
http://jsfiddle.net/stapiagutierrez/48yGU/24/
Why is only the first and second divs displayed (playerinformation and centerad), but not the third one? I thought divs were stacked vertically unless told otherwise via floats or what have you.
Any suggestions?.
I just want three div, organized horizontally within the middle vertical div called middle.
My guess is #rightad is being removed by Adblock, or an equivalent. That's what's happening for me. If you disable your adblocked, I bet it will show up.
All worked for me (in Firefox), then installed AdBlock and the #rightad disappeared. Disabled adblock for the page and it reappeared again.
Alternative quick test would be to try your jsfiddle in a different browser and see if its all there.