Why is this page (http://calvoter.org/issues/votereng/votebymail/study/findings.html) so wide. The table with the white background has a 750px image at the top but the page is wider than needed. I made a copy and deleted all the images/tables in the content and the page remained wider than it needs to be. The text was copied from a Word doc to textwrangler then Dreamweaver
The finding.html page is from the same template as http://calvoter.org/issues/votereng/votebymail/study/ocprofile.html which does not have the extra width issue. Thanks for any help.
The page was made with Dreamweaver CS5.5
Your table is 970 pixels wide. It is stretching to accommodate an image you have in one of the table cells. The image is
<img src="graphics/uncounted_ballots.png" width="690" height="253" hspace="100">
This accounts for 890 pixels of width. This is inside a blockquote with a margin of 40 on both sides. Add is all up and you get 970 pixels. The difficulty in figuring this out is why we try to use better coding practices. Your HTML is a maze of nested tables and block quote, which makes it almost impossible to decipher.
basically, it comes from bad coding practices. You have enclosed everything inside block quotes, so you have two paths here: just add this to your stylesheet
blockquote{margin:0;}
the problem here is you will actually lose the blockquote formatting, but if you don't care about it, it will solve your issues at once. You can also add margin:5px or something like that.
The best approach is to simply "kill" those blockquote elements, and use then ONLY when they are intended to be used. The easiest way is to open your source code with a raw text editor (like Notepad, NOT WORD!) and replace any occurrence of <blockquote> and </blockquote>. Or even better: replace <blockquote> with <div> and </blockquote> with </div> (do a backup first!). That will solve it for you.
because you are not set the main part:<blockquote>'s width,and it's width will change and enlarge <table>'s width.
first,set <blockquote>'s width to inherit in main.css line 134:
div#main blockquote {
font-family: sans-serif;
font-style: normal;
width:inherit; /* add this to control blockquote's width */
}
then,change some title and img,they are the main reason that blockquote become too large,like these:
there is no need to have two nesting <blockquote> here,delete them.
finally,give a reasonable position of your <img> ,like this:
set hspace is not a good habit,you can simply change it or set a compatible css style.and you can delete this attribute here
If this has any help,please let me know.
UPDATE:
actually,If you control elements well in <blockquote>,you needn't to set it's width.but if you want to reach your expectation,you'd better do this.
Related
I've researched similar questions and tried using display:table-cell; inline-block; vertical-align:middle all over the place, but I can't get this to work. In this sample Genesis theme page (please look), it demos the use of columns using 'one-half' and 'first' CSS classes. Using DevTools/Inspector you can go in and add <img src="http://placehold.it/140x240"> before the paragraph like I've shown below. Maybe there's something in the Genesis columns that's making this harder than it should be, or more likely I'm missing the obvious.
In that first column I need the img to appear to the left of the text, while the text is vertically aligned. I can't seem to find out the combination that will do it. NB I do know the height of the image - it's not dynamic. I could use spans if easier in stead of P.
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>
The key here is declaration of the widths. p by default will have 100% width even if you set the display to inline-block, so you need to set it up with something like this:
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
</p>
</div>
Note the classes added to the children, with the CSS now applied:
.OneHalfItem {
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
}
.OneHalfText {
width:calc(100% - 140px);
padding:10px;
}
Now it lines up nice and dandy, with the use of calc. Couple of things:
This works easily because the picture is a fixed width; if the imgsize is variable, you need to declare it's width as well (a percentage or something), then calculate the p size based on that
I eliminated the white space between the end of the img tag and the beginning of the p tag, because by default inline-block will add in a 4px margin to the right of each element. By removing the white space between the tags, it eliminates that empty margin.
Note that this will only work for IE9+ (and real browsers, of course), so if you need to support IE8- then you'll need to do the same kind of width calculation via JS, but easily done.
Here is a jsFiddle to show it working.
This is fairly simple, so I'm sure I'm just missing something obvious.
Say I have this example code:
<main>
<header>Header</header>
<section>
Content
</section>
<section>
Content
</section>
<section>
Content
</section>
</main>
And initial CSS of:
main{text-align:center;}
section{display:inline-block;width:33%;}
So I have three columns taking up more or less a third of the page each. Now, because of the way the code is written, there will be white space on the page. My preferred method of dealing with this is to set *{font-size:small}, and then add body>main{font-size:0;}.
Of course, thats fine on a simple page, where the font is the same. However, with different sized fonts and header tags here and there, this doesn't work well.
I think I just misunderstood what it is that the > selector does, but what I'm trying to look for is a selector that styles an element, without applying said style to children elements. In this case, I want to style my main element, but I don't want the style affecting the header or section elements.
What is the right way to do this?
And before anyone suggests it, no, I do not wish to use the other methods for removing white space (HTML comments, moving the final part of the closing tag onto the next line, etc.), as they look ugly and I prefer my code to look as presentable as my page.
First off: I'm not exactly sure if this works and not able to thoroughly test right now. This should have been a comment but I'm lacking the reputation to do so. sorry.
The problem is that the font size is one of the properties that is inheritet from it's parent and values like "small" don't set absolute sizes, but relative to the inherited size. so I would try to reset the size right after your main layer, using an absolute value instead of a relative one
body>main>*{font-size:18px;}
The important part is obviously not using a relative size, however, I have no idea how this holds up to user-specified default font-sizes. also, you would have to ensure that any text that has a non-medium font-size (so in your case any and all text) is at the very least a grandchild of main since the font-size for all direct children will be overwritten.
hope this will help you; bw
I'm trying to limit the number of characters in a paragraph to a specific number. If the text is less than this then I want to pad it with whitespace and if it's longer then I will truncate is with an ellipsis. I want all containers that contain paragraphs to be the same size.
I'm using a responsive grid and so my container will resize dynamically to the length of the paragraph. I've tried added pre-wrap to the p element but my divs won't resize. It seems to be still ignoring the added whitespace.
p
{
white-space:pre-wrap;
}
Here is a JSFiddle showing my situation: http://jsfiddle.net/RFBza/4/
Omg. But in case you for some reason wish to do it exactly so, try adding a bunch of codes divided by spaces. So, where you added five spaces, now add .
But of course that is still terrible idea.
white-space is not meant to "lengthen" any divs or add padding to fill in space. It is merely meant to determine how the wording wraps in the containing div. If you wanted that text to overflow the div, for example, you could with white-space
http://www.w3schools.com/cssref/pr_text_white-space.asp
Now, if you're trying to accomplish that they all look similar, the quick, dirty way is to add a minimum height to the containing divs.
http://jsfiddle.net/RFBza/6/
The problem with this is that you're wording will constantly change, so the actual height may change (and like you said, it's responsive so as you resize this will no longer work either)
There are several other techniques to get this desired effect, but they all require either some JQuery, some markup changes, or even PHP (for if you want a string to only be so many characters, otherwise show ellipsis) etc...
You could even go as far as adding that to the p selector in your CSS, but be careful because that would apply to every single paragraph. Maybe you can use a few more selectors to get specific.
p
{
white-space:pre-wrap;
min-height:192px
}
http://jsfiddle.net/RFBza/7/
Also, use PHP to determine a length and show an ellipsis if it exceeds that. In this case, 50 characters.
echo mb_strimwidth("Your paragraph goes here", 0, 50, '...');
For an iPhone ebook application I need to break arbitrarily long HTML documents up into pages which fit exactly on one screen. If I simply use UIWebView for this, the bottom-most lines tend to get displayed only partly: the rest disappears off the edge of the view.
So I assume I would need to know how many complete lines (or characters) would be displayed by the UIWebView, given the source HTML, and then feed it exactly the right amount of data. This probably involves lots of calculation, and the user also needs to be able to change fonts and sizes.
I have no idea if this is even possible, although apps like Stanza take HTML (epub) files and paginate them nicely. It's a long time since I looked at JavaScript, would that be an option worth looking at?
Any suggestions very much appreciated!
update
So I've hit upon a possible solution, using JavaScript to annotate the DOM-tree with sizes and positions of each element. It should then be possible to restructure the tree (using built-in XSLT or JavaScript), cutting it up in pages which fit exactly on the screen.
Remaining problem here is that this always breaks the page on paragraph-boundaries, since there is no access to the text at a lower level than the P-element. Perhaps this can be remedied by parsing the text into words, encapsulating each word in a SPAN-tag, repeating the measurement procedure above, and then only displaying the SPAN elements that fit onto the screen, inserting the remaining ones at the front of the next page.
All this sounds rather complicated. Am I talking any sense? Is there a simpler way?
You should look at the PagedMedia CSS module: http://www.w3.org/TR/css3-page/
CSS3 also support multicolumn layouts (google for "css3-multicol". I don't have enough Karma to include a second link here :-)
About your update: how about doing the layout of one single page, then use a DIV with overflow:hidden for the text part. Next thing would be to overlay a transparent item on top of that, that would programmatically scroll the inner content of the DIV PAGE_HEIGHT pixels up or down according to some navigation controls (or gestures).
The other option is to have a parent <div> with multiple css3 columns: link1, link2.
This works on Android:
<style type='text/css'>
div {
width: 1024px; // calculated
-webkit-column-gap: 0px;
-webkit-column-width: 320px; // calculated
}
p {
text-align: justify;
padding:10px;
}
</style>
The CSS multicol suggestions are very interesting! However, and I hope it's ok to respond with another question: how would you go from splitting one or more long <p> elements into columns to having one particular of these columns being rendered in a WebView? The DOM hasn't changed, so you can't pick out an element and render it. What am I missing?
Okay, this is a weird one to me. Here's the HTML element I'm working with:
LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png
A photo with a caption. Ideally, I'd like it to look like this, through pure CSS:
alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png
The width of the image's parent element needs to be dependent on the image's size.
I can change the markup all I need to. (The text isn't currently in its own div, but it can be if necessary.) Is there any way in CSS to accomplish this? I get the impression that I need to "force" the text to wrap as much as possible (which doesn't seem achievable), or make the whole element's width dependent on just one element and ignore the other (which I've never heard of before).
Is there a real way? Or do I need to use magical Javascript instead? (The JS solution is fairly simple, but fairly lame...)
Check out this great article on the best ways of handling the image-with-a-caption scenario.
Personally this is one of those cases where you gotta suck it up and go with that works.
Make the container a table with table-layout:fixed and put the image in the top row. You can also do this with pure CSS using the display:table-* properties (and the IE7-js library for IE6 compatibility).
What table-layout:fixed does is make the table drawing algorithm lock the width of each table column once the width of the first cell in that column is known. The caption will have nowhere to expand to so it will wrap to the width of the image (the first cell).
Alright, it looks like there's no simple solution that I can pull off. Thanks for helping me work that out :)
I think that, given how I'll be storing those images, accessing width won't involve constant recalculation. I may just use that server-side magic instead.
Thanks!
Here's a solution that probably does not work for you even though it does produce the layout you requested:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.a {float: left;
position:relative;}
div.b {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: center;
background-color:gray;}
</style>
</head>
<body>
<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>
</body>
</html>
You see the reason why it is unsatisfactory if you place some content below the div a. It will overlap with the caption, because the absolutely positioned caption did not extend the parent div vertically. It still may work for you if you have enough white space below anyway or you are willing to reserve it.
I came up with a working and fairly clean solution.
The solution uses a table (or div with display:table if you prefer) and adds a second column to "push" the first cell into the minimum space it really needs. The table can be set to 1px width to stop it growing across the page. I've put together a demo to show this in action:
http://test.dev.arc.net.au/caption-layout.html
Tested and working in IE8, Firefox and Safari/Win
The table answer would work. Easily. I can't encourage its use but ease-of-use does have merit. I was going to suggest using the clip: CSS property, but I can't get it to work on my local machine (for some reason, though it renders the example at cssplay.co.uk perfectly).
The downside of this is that it probably only works if you define fixed-widths for the containers. I'm sure there must be a way, though. I'll keep looking.