The code I need to work on looks like this:
<p>
<a href="http://creativecommons.org/publicdomain/mark/1.0/" rel="license">
<img alt="Public Domain Mark" src="http://i.creativecommons.org/p/mark/1.0/88x31.png" style=""></a>
<br> This work is free of known copyright restrictions...
</p>
It displays an image and then some text after the image. I need neither to display.
This works fine to get rid of the image:
a[rel="license"] {display:none;}
However, I need a way to get rid of the text after the <br> (and its unclosed tag if possible) and can't lose the closing </p> tag.
I am grabbing the HTML from a remote site and have no control over the markup there.
Thanks in advance for your help!
There's no way to hide this text using CSS, without adding a tag aground it- depending on how you're grabbing the site, your best bet would be to attempt to find "This work is free of known copyright restrictions..." and replace it with the same text surrounded by <span></span>; or simply deleting it altogether.
I realize this is an old question, but I found it interesting. I'm wondering if it wouldn't work to fiddle with the box model of the <p> tag, so that you hide what you want to "get rid of", even though it's still there?
For instance, say I wanted to display the image, but not the non-element text following. (I realize you want to eliminate the image as well, but for demonstration purposes having some visible content inside the <p> is helpful.) Since I know the image is 31px tall, I might just go with something like:
p {
height: 31px;
overflow: hidden;
}
Et voilà. Whether or not that would work for your specific need, I feel like we don't have enough context to determine. What you're asking for is to be left with an empty paragraph containing an invisible link, which absent larger context has no obvious purpose.
Come to think of it, though… if I then wanted to also hide the image, I'd just use a slight modification of your style above, and append:
a[rel="license"] { visibility: hidden; }
(You don't want to use display: none, as that will affect the dimensions of the <p> CSS box.)
This certainly has unfortunate implications for screen readers and the like, but for certain quick-and-dirty display needs it might suffice.
Related
I often have an image that I wrap text around, and sometimes the texts wraps awkwardly, like so:
In the HTML, the image is floated to the left and the text simply follows:
<p><img style="float:left;" src="/images/[image]" /></p>
<p>This is my David Copperfield, <em>I was born</em> kind of bio. For a more concise one, please see the press kit.</p>
...
This mostly works, except when the text length just happens to run past the bottom of the image and flow back to the left margin, and when the amount of text isn't long enough to fill more than one line (in this case, it's only one word). When that happens, it looks really bad.
So, is there a way to control the text flow so that this doesn't happen?
What you could do is add overflow: hidden to the p tags where there is text. This will make it so any text that wraps after the image will be in line with the larger part. Now when you have large paragraphs this may look funny, however if your paragraphs are all fairly short this should help.
Example: http://jsfiddle.net/8ZsKy/2/
alternately you could just add a class rule and apply it to potential "problem" paragraphs.
p.wrap-inline {
overflow:hidden;
}
EDIT: updated jsfiddle (oops)
This question actually had me thinking although it is actually annoying sometimes, In the past i have fixed similar problems to this by adjusting the line height a little,
line-height:20px;
or adjusting the actual size of the image a little bigger or smaller,
<img style="float:left;" src="/images/[image]" width="100" height="200" />
or alter the tracking of the text
letter-spacing: 0.1em;
or use hyphenation (I don't like it or recommend it)
hyphens: auto;
However as far as my knowledge goes i do not know of any css rules to eliminate text orphans. There might be scripts but i have never heard of it and have doen a bit of research on it a while back. Hope it helped :)
This is how floating works. If you don’t want that, don’t use float; you can e.g. use positioning instead, so that the text appears as a block on the right of the image.
There’s unfortunately no way to use floating and request e.g. that the last line should not be short. You can prevent the very last word from appearing on a line of its own by using a no-break space between it and the preceding word, e.g. it will. And you could extend this to a group of short words. But this would just mean that the group appears on a line of its own and the preceding line is correspondingly shorter (and may therefore look odd).
If the text is just a little too long, you could modify its rendering to take less space vertically e.g. by removing empty lines between paragraphs, though this would be a major layout change (though perhaps a good one):
p { margin: 0 }
p + p { text-indent: 1.3em; }
<img style="float:left; clear="both" src="/images/[image]" />
What is the logic of the selection highlighting overflowing beyond the parent element?
In the attached screenshot, the top one is what I have currently, and the bottom one is a Photoshopped mockup of what I want to achieve.
To me it seems that the selection highlighting is almost largely random; I have not been able to find any definitive resources that explain what makes selection highlighting behave in which ways.
What should I keep in mind in terms of CSS and DOM when wanting to keep the selection highlighting reasonable?
Interestingly, I've wondered why SO doesn't have something like this so it's easier to copy code off an question/answer.
Actually, SO does have contained highlighting in the <code> blocks relying on overflow: auto;. <blockquotes> do not have contained highlighting.
Anyway, it appears there are a few ways to solve this problem (though, I'm sure there might be more). Use one of the following CSS rules to limit the highlighting of text to a specific element.
overflow: hidden; or overflow:auto;
position: relative;
float:left; or float:right;
The working example below shows all four methods at work. Some are easier to work with depending on your needs.
Working Example: http://jsfiddle.net/TFvYu/4/
Sources
CSS text selection color overflows outside box
HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome
I want to substitute a piece of text with an image (for example, the word "call" with a phone icon) along some other text in a web page. I want this to work for normal user, without penalizing people who disable css (or don't have css active) and blind people that cannot see images [addendum]. Which is the better solution between the following two ones?
1. <span title="call" class="s1"><span>
2. <span class="s1 s2">call<span>
with:
.s1 {
display:inline-block;
background: url("call.png") no-repeat scroll 0 0 transparent;
width:24px;
}
.s2 {
overflow:hidden;
text-indent: 30px;
}
P.S.: no <img> alternative, please.
Between the two alternatives given, 2 is evidently the right answer, i.e. it is clearly less detrimental to accessibility. When CSS is off, the element reduces to the word “call”, whereas alternative 1 reduces to the empty string. There is no guarantee that some software is able to announce the value of the title attribute. Consider, for example, the use of a normal graphic browser in purely visual mode, with no screen reader (with e.g. settings that override page CSS and enforce large enough font suitable for the user).
Even alternative 2 is bad for accessibility. When CSS is enabled, the word “call” is replaced by an icon. But there is no guarantee that the user can see it at all. And there is no way to specify alt text for a background image as you can do for content images. Moreover, what would you use as a phone icon? Most such icons are old-style, like ☎ or ✆, and there are more and more people who never used such a device.
SPAN is a very generic element, and should be used when no better markup element is suited for the purpose. In your case, the A (anchor) is just what you need, assuming your "call" element is something the user agent should distinguish from pure text. Even if you don't use href, it's still an anchor - just bind it to a mouse event with JavaScript.
Also, using background images here is misplaced. Background images are for backgrounds. In fact, user agents shouldn't even alow clicking on these as part of active user interface (only as a very secondary interaction) If it's a "Call" button you're after, use CSS content property instead. You are right about img though - that's for images that carry page content, not navigation. I.e. buttons, anchors and the like shouldn't use the img tag. You can also use input or button, depending on context (cannot tell from your question).
If you really want to make your pages accessible, you are on the right track, but I really think the following is a better alternative:
<a class="s1" title="Call the following number">Call</a>
.s1
{
content: url(call.png);
}
You can adjust the size of your anchor that is marked with the s1 class using CSS width and height. I would use an SVG instead though. If your graphic is vector, it is definitely a much better idea. Pixels are for photos and pixel-art :-)
If you want to add some text after your element, you can use CSS :after:
.s1:after
{
content: "Call";
}
My goal is to provide something like a "Read More" link next to a text block. It is automatically added before the content is sent to the client and the block that contains it should be adjacent to the prior text, just as if its part of this text. The problem is that the text block contents are authored using TinyMCE, thus the content will be packed up in a variety of tags (mainly the paragraph tag) - thus the following content will be pushed to the next line (or block).
So before going through the pain of deconstructing the content of the textblock serverside to decide where and how to attach the other block, i thought there might perhaps be a way to get this done using pure CSS. I have a feeling it won't be possible as i think it would require the adjacent block to sort of override properties of the prior block, but then again there might be a thing or two that i missed about all this CSS/inline business.
I created a JSFiddle here
Thank You for any constructive input on the matter!
see this fiddle: http://jsfiddle.net/D2RnS/5/
p + p, .adjacentBlock { float : left; }
I just floated left the second paragraph and the adjacentBlock. Doing so remember to also apply some kind of float clearing to the parent container (the <div> in your example)
You may use use pseudo-elements in css, by adding an ID to your previous tag:
#block:after {
content:"You will have this appended.";
}
You can see the effect here: http://jsfiddle.net/D2RnS/14/
The input text ("ooooooo's") you can see is continuing across the complete page and under the images. I would like it to stop inside the the area shaded red. How would I resolve this?
You can give any element a fixed width using the CSS width attribute. This will work whether you're allowing input text or just displaying text.
Examples:
div{
width:400px;
background-image:url("yourimage.png");
}
textarea{
width:400px;
background-image:url("yourimage.png");
}
Your text should be inside that element. If you're having problems with long words (like your example with the ooooooooo) you can set word-wrap: break-word
Try setting overflow: hidden in your CSS. Take a look here for more info.
Use a textarea for this element. It's built-in behavior is what you are looking for. You can style it with CSS to fit your layout.
I also suggest you get the Firebug plug-in for Firefox. When you see something you like on the web, it will allow you to right-click and see the html, JavaScript, css, etc., (anything client-side) in a box at the bottom of your browser. You can even edit the code and see the results of your experiments in real time. It is invaluable for those "just like so-and-so does it" situations.