html - Two Column Layout with heavy technical restrictions -

-

i have work cms not have access stylesheets. internal css commands in sense of style="width:200px" being filtered cms , hence cannot used, neither.

the editor not allow add align="left" images. neither can add manually through source code view.

what want achieve: 2 column design - images left, text right (see wireframe). enter image description here

given restrictions above, option see achieving using tables image , text positioning. problem is: (for me not editable) theme has following css attributes img tag:

max-width: 100%; height: auto;

causing images shrink in safari depending on amount of text in adjacent cells... firefox works fine.

does have clue do?

i suppose removing max-width: 100%; easiest solution. there solution avoid changes stylesheet (since not have access it)?

if have absolutely no other choice

old school table layout obsolete attributes

disclaimer: in no way endorse tables layouts; meant tabular data. answer purely given purposes of demonstrating work around within limitations laid out in question.

styling table

basically, go mdn documentation on <table> , use obsolete attributes tells not use:

  • valign - vertical alignment in cells
  • cellpadding - padding in cells
  • cellspacing - gaps between cells
  • bgcolor - background color
  • width
  • height
  • border

(this feels dirty, many memories)

the <colgroup> , <col> elements help. still in current html spec well, nice :)

hell, let's go crazy , center <center> (eww!). need work have.

reset image width

so discussed in comments, found archaic cms allows style attribute on image element. use max-width value override 100% value set in stylesheet: 

style="max-width: 1000px; width: 134px;"

let's kick old school!

img {    max-width: 100%;    height: auto;  }
<center>    <table cellpadding="5">      <tr>        <td>          <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;">        </td>        <td>          <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in faucibus gravida venenatis. nam nisl sem, fringilla vel tempor id, congue erat. fusce venenatis dapibus purus ac hendrerit. morbi in ullamcorper ligula, in varius lorem.          </p>          <p>donec consectetur faucibus vehicula. nulla semper facilisis nisi vel faucibus. sed posuere id nibh eu finibus. in id nunc non diam laoreet efficitur vel vel ligula. nam vitae sollicitudin mi. phasellus dapibus sem non nisl volutpat, vitae euismod            quam ullamcorper.</p>        </td>      </tr>        <tr>        <td>          <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;">        </td>        <td>          <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in faucibus gravida venenatis. nam nisl sem, fringilla vel tempor id, congue erat. fusce venenatis dapibus purus ac hendrerit. morbi in ullamcorper ligula, in varius lorem.          </p>          <p>donec consectetur faucibus vehicula. nulla semper facilisis nisi vel faucibus. sed posuere id nibh eu finibus. in id nunc non diam laoreet efficitur vel vel ligula. nam vitae sollicitudin mi. phasellus dapibus sem non nisl volutpat, vitae euismod            quam ullamcorper.</p>        </td>      </tr>    </table>  </center>

so how can give table width?

did spacer.gif?!

yes! in 2002!

this horrible, might work right combination of css width / max-width

img {    max-width: 100%;    height: auto;  }
<img src="http://www.placehold.it/500/ffffff" style="max-width: 500px;width: 20%; height: 1000px; float: right;" />  <img src="http://www.placehold.it/500/ffffff" style="max-width: 500px;width: 20%; height: 1000px; float: left;" />    <table cellpadding="5">      <tr>        <td>          <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;">        </td>        <td>          <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in faucibus gravida venenatis. nam nisl sem, fringilla vel tempor id, congue erat. fusce venenatis dapibus purus ac hendrerit. morbi in ullamcorper ligula, in varius lorem.          </p>          <p>donec consectetur faucibus vehicula. nulla semper facilisis nisi vel faucibus. sed posuere id nibh eu finibus. in id nunc non diam laoreet efficitur vel vel ligula. nam vitae sollicitudin mi. phasellus dapibus sem non nisl volutpat, vitae euismod            quam ullamcorper.</p>        </td>      </tr>        <tr>        <td>          <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;">        </td>        <td>          <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in faucibus gravida venenatis. nam nisl sem, fringilla vel tempor id, congue erat. fusce venenatis dapibus purus ac hendrerit. morbi in ullamcorper ligula, in varius lorem.          </p>          <p>donec consectetur faucibus vehicula. nulla semper facilisis nisi vel faucibus. sed posuere id nibh eu finibus. in id nunc non diam laoreet efficitur vel vel ligula. nam vitae sollicitudin mi. phasellus dapibus sem non nisl volutpat, vitae euismod            quam ullamcorper.</p>        </td>      </tr>    </table>


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more