Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Inherited width of img within a p tag

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #45172
    galaakk
    Member

    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 :)

    #137260
    galaakk
    Member
    #137261
    Paulie_D
    Member

    >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.

    #137262
    Paulie_D
    Member

    However, if you must: http://codepen.io/Paulie-D/pen/xquCk

    #137263
    wolfcry911
    Participant

    > 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.

    #137265
    Paulie_D
    Member

    @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.

    #137267
    Paulie_D
    Member

    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.

    #137268
    Paulie_D
    Member

    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.

    #137271
    galaakk
    Member

    @gcyrillus Wow that’s exactly what I meant. Thank you. :)


    @Paulie_D
    I don’t have access to the templates generating the HTML on this project.

    Thank you guys !

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.