1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Possible in pure CSS?

Discussion in 'CSS' started by KewL, Jan 28, 2015.

  1. #1
    Here's what I'd like to accomplish without the use of JavaScript, I can't figure it out maybe you can.
    SEMrush
    So I've got an unordered list, each LI contains a <img> and a <p> tag. The P tag overlay's the <img>. The LI's width are set a percentage, the images width are always 100% of the LI's width. All the images are uniform in size 480x260px, so we know the aspect ratio.

    Is there a way the P block will always be the same size as the image at any particular size?

    
    <ul>
      <li>
        <img src="" />
        <p></p>
      </li>
      <li>
        <img src="" />
        <p></p>
      </li>
    </ul>
    
    Code (markup):
    
    li {
        list-style: none;
        max-width: 480px;
        width: 25%;
        position: relative;
    }
    
    li p {
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%;
    }
    
    Code (markup):
     
    KewL, Jan 28, 2015 IP
    SEMrush
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    The p will size to its contents. As the image is a sibling, there is no relationship between the size of the image and the dimensions of the p tag which is not part of the normal flow because of the absolute positioning. You will have to script it because there is no way for the dimensions of the p to respond to the size of the image without the scripting.
     
    COBOLdinosaur, Jan 29, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #3
    When you say "same size" what exactly do you mean? The question doesn't even make sense. Why do you need it bigger/smaller and/or what exactly are you trying to accomplish layout-wise?

    Much less are you sure those are even actually grammatical paragraphs? Seems unlikely in your usage scenario.

    Without seeing visually what you are trying to accomplish AND the content that markup is for, very hard to give you a proper answer... though images that large in a list does reeks slightly of "layout concepts that have no business on websites in the first place."
     
    deathshadow, Jan 31, 2015 IP