Avatar

Odd Layout When Doing Image Left / Right When You Have A Sig (Bugs)

by Magma @, Monday, August 09, 2021, 20:14 (50 days ago)

When you upload an image then choose to have it left/right or left thumbnail/right thumbnail

the layout looks odd if you have a signature as demonstrated with the image below. The signature does not stay below the post. Also when you preview it the content is not in the red dotted box.


[image]

--
I like this forum

Avatar

Odd Layout When Doing Image Left / Right When You Have A Sig

by Auge ⌂ @, Wednesday, August 11, 2021, 14:11 (48 days ago) @ Magma

Hello

When you upload an image then choose to have it left/right or left thumbnail/right thumbnail

the layout looks odd if you have a signature as demonstrated with the image below. The signature does not stay below the post. Also when you preview it the content is not in the red dotted box.

[image]

That's because the layout methods, that was used back in 2007 when the default theme was created, are imperfect and have therefore their special pitfalls as you can see. The images get positioned left or right with the help of the CSS property float. That's so far correct. Because your entry has not much content and the images floating area is what it is, the signature slides to the side, below the entry text and beside the right positioned image. In this posting you can see, how it works with a not so short text, that floats around the image. Works as intended, but in your case not as expected.

There will be no solution for this without changing the HTML-structure of the entry and it's surrounding elements.

Current structure is, as shown here (shortened), a more or less flat structure. The heading with the subject, the avatar (if present) and the meta informations (author and create time of the entry) are located in the same parent element (div.posting) and nesting level as the paragraphs of the posting itself and the signature.

<div id="content">
 <div class="posting">
  <img /><!-- avatar -->
  <h1>subject</h1>
  <p class="author">meta data</p>
  <p>Entrys paragraph 1</p>
  <p>Entrys paragraph 1</p>
  <p><br />
  <img src="the image in question" class="right" /></p>
 
  <p class="signature">--<br />
   Signature
  </p>
 </div>
 reply link, feature links
</div>

With a structure like the following, one would be able to select the parts of the entry independent from the subject and meta information and the signature. Attention: it's only a quick typed prototype! Take account of the new div elements with the classes .postingheader, .postingcontent and .postingsignature.

<div id="content">
 <div class="posting">
  <div class="postingheader">
   <img /><!-- avatar -->
   <h1>subject</h1>
   <p class="author">meta data</p>
  </div>
  <div class="postingcontent">
   <p>Entrys paragraph 1</p>
   <p>Entrys paragraph 1</p>
   <p><br />
   <img src="the image in question" class="right" /></p>
  </div>
  <div class="postingsignature">
   <p class="signature">--<br />
    Signature
   </p>
  </div>
 </div>
 reply link, feature links
</div>

In this structure you can give a dedicated floating context to the element div.postingcontent via a CSS rule (i.e. with overflow: hidden;) and because of that the signature would stay below the entry content in every case.

In my own theme I preferred a HTML5-based structure. Most of my proposal above is realised but as you can see below, I also didn't take your scenario into account. :-/

<main><-- equivalent of div#content -->
 <article class="posting">
  <header>
   <img /><!-- avatar -->
   <h2>subject</h2>
   <p class="author">meta data</p>
  </header>
  <div class="body">
   <p>Entrys paragraph 1</p>
   <p>Entrys paragraph 1</p>
   <p><br />
   <img src="the image in question" class="right" /></p>
   <p class="signature">--<br />
    Signature
   </p>
   </div>
  reply link, feature links
 </article>
</main>

I will see, if I can build a lightweight update within a short time. A "problem" is a big, long running project at work, that currently consumes all my time and motivation. I will see.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

RSS Feed of thread

powered by my little forum