Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1048709-Using-display-block
Thread: Using display: block
2013.04.29 01:28
cheli
-->
<head>
<title>cheli - newsletter2</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
body {
padding:0;
margin:20px 0;
}
h2 {
font-size:1.25em;
font-weight:bold;
}
h3 {
font-size:1.1em;
font-weight:bold;
margin:.75em 0;
}
table {
border-spacing:0;
background-color:#eaf5ff;
}
.outer {
border:2px solid #ccc;
}
.donate,
.newsitem,
.director,
.feature,
.profile {
border-top:1px dotted #aaa;
}
.newsitem,
.feature {
border-right:1px dotted #aaa;
}
.teaser,
.donate,
.newsitem,
.director,
.feature,
.profile {
border-spacing:4px 4px;
}
td {
padding:0px;
}
img {
display:block;
background-color:#ddd;
border:0 none;
}
p {
line-height:1.2em;
margin:.2em 0;
}
.button {
display:inline-block;
background:#49A942;
padding-top:6px;
padding-right:10px;
padding-bottom:6px;
padding-left:10px;
color:#fff;
font-weight:bold;
text-decoration:none;
font-family:Helvetica, Arial, sans-serif;
cursor:pointer;
margin-top:4px;
}
.button.readmore {
display:none;
}
a {
display:inline-block;
}
@media only screen and (max-width:570px) {
.outer,
.newscol,
.newsitem,
.newshead,
.newstext,
.director,
.feature,
.profiles,
.profile {
width:100%;
}
.newsitem,
.feature {
border-right:0 none;
}
}
@media only screen and (max-width:400px) {
.button {
display:inline-block;
}
.newscol p,
.director p,
.feature p,
.profiles p {
display:none;
}
.button.readmore {
display:inline-block;
}
}
</style>
</head>
<body>
<table class="outer" align="center" width="554">
<tr>
<td>
<table class="teaser" width="100%">
<tr>
<td>
<p>Use this area to offer a short teaser of the newsletter content. Text here will show in the preview area of some email clients.</p>
<a class="button">Subscribe to future issues</a>
<a class="button">View online</a>
<a class="button">Download as .pdf</a>
</td>
</tr>
</table>
<table class="donate" width="100%">
<tr>
<td>
<p>Blurb about us and donation CTA.</p>
<a class="button">Donate now</a>
</td>
</tr>
</table>
<table class="newscol" style="float:left">
<tr>
<td>
<table class="newsitem">
<tr>
<td>
<table class="newshead" width="300">
<tr>
<td width="1">
<a href="#" target="_blank"><img src="http://placehold.it/120x100" alt="120 x 100" title="" width="120" height="100"></a>
</td>
<td>
<h2>Research News 1</h2>
</td>
</tr>
</table>
<table class="newstext" width="300">
<tr>
<td>
<a class="button readmore">Read more</a>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="newsitem">
<tr>
<td>
<table class="newshead" width="300">
<tr>
<td>
<h2>Community News 1</h2>
</td>
<td width="1">
<a href="#" target="_blank"><img src="http://placehold.it/120x100" alt="120 x 100" title="" width="120" height="100"></a>
</td>
</tr>
</table>
<table class="newstext" width="300">
<tr>
<td>
<a class="button readmore">Read more</a>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="director" width="240" style="float:left">
<tr>
<td>
<h3>From the Director</h3>
<a class="button readmore">Read more</a>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.</p>
</td>
</tr>
</table>
<table class="feature" width="310" style="clear:left;float:left">
<tr>
<td>
<a href="#" target="_blank"><img src="http://placehold.it/310x200" alt="310 x 200" title="" width="310" height="200"></a>
<h2>Feature Story</h2>
<a class="button readmore">Read more</a>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.</p>
</td>
</tr>
</table>
<table class="profiles" width="228" style="float:left;">
<tr>
<td>
<table class="profile">
<tr>
<td>
<a href="#" target="_blank"><img src="http://placehold.it/220x150" alt="220 x 150" title="" width="220" height="150"></a>
<h3>Staff profile 1</h3>
<a class="button readmore">Read more</a>
<p>At aut eum ut qui ates etur, quam ra quo tetur</p>
</td>
</tr>
</table>
<table class="profile last">
<tr>
<td>
<a href="#" target="_blank"><img src="http://placehold.it/220x150" alt="220 x 150" title="" width="220" height="150"></a>
<h3>Staff profile 1</h3>
<a class="button readmore">Read more</a>
<p>At aut eum ut qui ates etur, quam ra quo tetur</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Reply With Quote
I honestly think by biggest problem is that I'm learning and I don't have a coding background so I often try to bridge the gap between my understanding of basic concepts (like how a table works) and the application of that in a relatively complicated layout such as this by reading a lot, trying to copy and then experimenting till I stumble on what works. The mess above is what results :s
Originally Posted by ronpat
Bookmarks