How to align image with cells

Hello, I’ve found this online template: https://codepen.io/tjoen/pen/vCHfu

I did some edits in my template, but for this example, I removed all the non-important stuff:

This is how looks:

But I want to make it looks like this (did it with image editor):

Is this possible?
Thanks.

Hi, yes it’s possible.
I would move the span with the image from the header to the article with the table.
Bring that span first in the html before the table and float it right.

    <header>
    	<h1>REPORT</h1>
    </header>
    <article>
			<h1>Recipient</h1>
      <span><img alt="" src="https://s3.amazonaws.com/appforest_uf/f1538843538357x222297661006450660/asdw.jpg"></span>
      <table class="meta">
      	<tr>
      		<th><span>ID#</span></th>
      		<td><span>101138</span></td>
      	</tr>
      	<tr>
      		<th><span>Date</span></th>
      		<td><span>January 1, 2012</span></td>
      	</tr>
      	<tr>
      		<th><span>Location</span></th>
      		<td><span>Germany</span></td>
      	</tr>
      	<tr>
      		<th><span>User</span></th>
      		<td><span>Me</span></td>
      	</tr>
      </table>

Then adjust your css from header span to article span

/*header span { margin: 0 0 1em 1em; max-height: 25%; max-width: 60%; position: relative; }  move to article */
header img { max-height: 100%; max-width: 100%; }
header input { cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; }

/* article */
article span { margin: 0 0 1em 1em; float:right; } /* added this*/
article, article address, table.meta, table.inventory { margin: 0 0 3em; }
article:after { clear: both; content: ""; display: table; }
article h1 { clip: rect(0 0 0 0); position: absolute; }

Hi there Raiikou,

I would strip out all surplus HTML and change the background-color
of the h1 element to make it accessibly safe…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

#header {
    overflow: hidden;
 }

h1 {
    padding: 0.25em 0;
    margin: 0 0 1em;
    background-color: #195d8a;
    font-size: 1.25em;
    font-weight: normal;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
 }

#header table {
    float: left;
    margin-left: 1em;
 }

#header img {
    float: right;
    margin-right: 1em;
 }

#header th, #header td {
    padding: 0 0.5em;
    border: 1px solid #999;
    border-radius: 0.25em;
    background-color: #ededed;
    font-weight: normal;
    text-align: left;
 }

#header td { 
    background-color: #fff; 
 }
  
</style>

</head>
<body> 

 <div id="header">

  <h1>Report</h1>
  <table>
   <tr>
    <th>ID#</th>
    <td>101138</td>
   </tr><tr>
    <th>Date</th>
    <td>January 1, 2012</td>
   </tr><tr>
    <th>Location</th>
    <td>Germany</td>
   </tr><tr>
    <th>User</th>
    <td>Me</td>
   </tr>
  </table>

  <img src="https://s3.amazonaws.com/appforest_uf/f1538843538357x222297661006450660/asdw.jpg" width="129" height="109" alt="">
 
</div>

</body>
</html>

Further reading;-

Color Contrast Checker

coothead

1 Like

Hello @coothead , not sure that i’m understanding your answer.
Where is the rest of the css code?

How i can use that? I should copy-paste in my style or …?
Your style tag is very small compared with all the stuff is using the template.

Thanks.

Hi there Raiikou,

I just coded it in a manner which seemed
appropriate for the image that you posted, :winky:

Would you prefer large swathes of code
instead of minimal amounts?

coothead

Hello, yes please if possible show me all the code because 1- it will helps me to see the difference between your changes and the normal one and try to understand how it works the changes.

And it will also help me to add it.
Thanks!

Hi there Raiikou,

my post showed all the HTML and CSS code
required to recreate the image that you posted.

The only change to the HTML would be to
remove the internal CSS to an external file.

Further HTML would be positioned after the
‘id=“header” div’ and before the closing ‘body tag’,
and the CSS for it, in the newly created CSS file.

coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.