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.

Creating image box below each other.

Discussion in 'HTML & Website Design' started by Soupi, May 19, 2020.

  1. #1
    How can i create something like this, where the image on is on the left and i can add text, and then the next image is on the right, and so on
    rsz_1capture (1).png
    SEMrush
     
    Soupi, May 19, 2020 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,327
    Likes Received:
    1,821
    Best Answers:
    244
    Trophy Points:
    515
    #2
    
    <div class="alternatingPlates">
      <img src="test.png" alt="describe the image, alt is not optional">
      <p>
        Sample text
      </p>
      <img src="test.png" alt="describe the image, alt is not optional">
      <p>
        Even More Sample text
      </p>
    <!-- .alternatingPlates --></div>
    
    Code (markup):
    
    .alternatingPlates > img {
      clear:both;
    }
    .alternatingPlates > img:nth-of-type(even) {
      float:left;
      margin:0 1em 1em 0;
    }
    .alternatingPlates > img:nth-of-type(odd) {
      float:right;
      margin:0 0 1em 1em; 
    }
    
    Code (markup):
    Give or take. Beware, nth-of-type doesn't exist in IE8/earlier if you still care and are still trying to send style to said outdated browsers. MY advice, stop caring about -- and stop sending style to -- outdated browsers. Let them eat vanilla markup.

    nth-of-type is a relatively new CSS property (if a decade can be called "new") that can save you a lot of excess "classes for nothing" in your markup.

    -- edit -- Oh, and if you don't want the content next to the images to slip under said images? Add some div:

    <div class="alternatingPlates">
      <img src="test.png" alt="describe the image, alt is not optional">
      <div>
        <p>
          Sample text
        </p>
      </div>
      <img src="test.png" alt="describe the image, alt is not optional">
      <div>
        <p>
          Even More Sample text
        </p>
      </div>
    <!-- .alternatingPlates --></div>
    Code (markup):
    and then set those inner DIV to overflow:hidden.

    
    .alternatingPlates > div  {
      overflow:hidden;
    }
    
    Code (markup):
    Which makes the entire container obey the floats, not just the inline child elements.

    You could also use flex, but that COULD involve needing extra containers depending on how you go about coding it. Sometimes good old float is easier, sometimes it isn't.
     
    deathshadow, May 19, 2020 IP
  3. Soupi

    Soupi Greenhorn

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    Thank you, but I am using this instance for the image, because it is openseadragon plugin via wordpress.
    How would I replace ur test.png with this
    [gallery openseadragon="true" width="700" height="500" ids="7816"]
     
    Soupi, May 19, 2020 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,327
    Likes Received:
    1,821
    Best Answers:
    244
    Trophy Points:
    515
    #4
    No clue, you couldn't pay me enough $$$ at this point to work with the steaming pile of ignorant incompetent inept BULL that is turdpress, much less some dipshit garbage plugin for it. Particularly when such mentally enfeebled trash plugins are most always written by people who have ZERO business writing a single damned line of HTML or CSS.

    But let me tell you what I really think...

    That said, what's it vomiting up for HTML? That it's dealing with fixed width and height declarations in their idiotic template crap certainly doesn't help, but at the end of the day that bekaptah chazerie has to be turned into markup... so "view source" and see what it's actually outputting.
     
    deathshadow, May 19, 2020 IP