- This topic is empty.
June 1, 2013 at 10:18 am #45172
Hi, I’m not sure to understand something.
I have a page with img tags within p tags and I can’t modify HTML, just write CSS.
long long text
I would like the paragraphs to be 70% wide AND the img within the p tags to be 100% wide.
But I don’t know how to do that without modifying the HTML…
Thanks :)June 1, 2013 at 10:19 am #137260June 1, 2013 at 10:45 am #137261
>But I don’t know how to do that without modifying the HTML
Is there a reason why you can’t change the html?
A paragraph is a block of text it shouldn’t (IMO) have an image in the middle of it.
An image **between** paragraphs by all means but there is no reason why it should be inside one.June 1, 2013 at 10:52 am #137262June 1, 2013 at 11:29 am #137263wolfcry911Participant
> A paragraph is a block of text it shouldn’t (IMO) have an image in the middle of it.
I definitely don’t agree with this. Images are inline by default and are meant to be within a block level element. Did you know the body element is not supposed to have an inline element as a direct child? Not many do, but it’s right there in the spec. The float property came about because of images in paragraphs.June 1, 2013 at 11:42 am #137265
@wolfcry911 I get what you are saying but a paragraph is a paragraph and an image is an image.
I’m not talking about block level context or anything like that.
An image should be separate from a block of text (not a ‘paragraph’ that’s just what we use) not **part** of one.
Would you put an image like this **inside** a single line of text? It’s still a paragraph, just a small one?
In this case specifically, the image isn’t part of the text block..it’s the end of one. We’re just solving a problem created by poor HTML structure in the first place.June 1, 2013 at 12:10 pm #137267
I’m not saying it **can’t** be done at all, it clearly can.
Stop thinking in terms of HTML & CSS…think first in terms of text and images.
If you have a block of text you don’t see an image (like this) in the middle of it.
The image is always separate from the text…indeed we put margins/padding around the image to separate it from the text.
Now, when we move to HTML we separate the text and images with floats etc. (again using margins &/or padding).
In this case, the image is inside a paragraph for no good reason so that’s the problem we are trying to solve.
> an image needs to be wrapped in a block level
Yes, but do we really think this paragraph is just sitting there in the body? No, I’ll lay dollars to donuts that it’s in a div/article or whatever that **is** a block element. So, again, the image could be moved outside the paragraph.
As I said, we’re solving a problem created by poor HMTL structure. I’m not saying we can’t do it…just that we’re papering over the cracks.June 1, 2013 at 12:12 pm #137268
On another point, there are occasions where images are put inside text but they’re usually very small and are more for styling purposes than anything else.June 1, 2013 at 12:40 pm #137271
- The forum ‘CSS’ is closed to new topics and replies.