Two column links and text
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="collin grasley - http://www.modetwentythree.com" />
<meta name="Keywords" content="key, words" />
<meta name="Distribution" content="Global" />
<meta name="Robots" content="index,follow" />
<style type='text/css'>
/* blog style template - collin grasley - modetwentythree.com - this work is public domain, enjoy! */
/* main styles ----------------------------*/
* {
margin: 0;
padding: 0;
}
*
body {
padding: 0;
margin: 0;
font: 0.69em Arial, Verdana, sans-serif;
line-height: 1.64em;
background: url(Blog-Style-images/bodybg.gif) repeat;
color: #555;
}
a {
color: #222;
background: inherit;
text-decoration: none;
}
a:hover {
color: #ff3399;
background: none;
text-decoration: none;
border-bottom: 1px dashed;
}
p {
padding: 5px 0 5px 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: 0;
}
.clear {
clear: both;
margin-top: 1px;
}
#wrapper {
margin: 0px auto;
width: 900px;
padding: 0 20px 0 20px;
background: #fffbf4;
}
/* top ----------------------------*/
#topnav {
height: 42px;
background: #333;
width: 100%;
}
#menu {
float: right;
height: 23px;
margin: 8px 8px 0 0;
}
#menu a {
display: block;
color: #999;
background: inherit;
text-decoration: none;
margin-right: 4px;
line-height: 23px;
font-weight: bold;
}
#menu a:hover {
color: #ff3399;
background: inherit;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin: 0 0 0 5px;
}
/* header ----------------------------*/
#header {
background: url(Blog-Style-images/header.jpg) no-repeat;
height: 180px;
padding: 0;
margin: 0 0 10px 0;
clear: both;
}
#title {
float: left;
width: 340px;
padding: 50px 0 10px 0;
margin: 0 0 0 180px;
}
#header h1 {
font-size: 3.9em;
margin: 0 0 4px 20px;
}
#header h2 {
font: 0.9em Arial, Sans-Serif;
letter-spacing: 0;
color: #868686;
margin: 15px 0 0 20px;
padding: 0;
}
.t1 {
font-family: 'Impact';
color: #ff3399;
}
.t2 {
font-family: 'Impact';
color: #333;
}
/* The left column ----------------------------*/
#left {
width: 190px;
float: left;
margin-right: 20px;
padding: 0 5px 5px 5px;
background: inherit;
}
#left ul {
padding: 3px 0 12px 5px;
}
#left li {
line-height: 18px;
background: inherit;
list-style: disc;
margin-left: 16px;
color: #ff3399;
}
#left li a {
background: inherit;
text-decoration: none;
}
#left li a:hover {
text-decoration: none;
}
/* The linkbar column ----------------------------*/
#linkbar {
float: left;
width: 190px;
padding: 0 5px 5px 5px;
margin-right: 20px;
background: inherit;
}
#linkbar ul {
padding: 3px 0 12px 5px;
}
#linkbar li {
line-height: 18px;
background: inherit;
list-style: disc;
margin-left: 8px;
color: #ff3399;
}
#linkbar a {
background: inherit;
text-decoration: none;
}
#linkbar a:hover {
text-decoration: none;
}
/* The Right Side ----------------------------*/
#right {
float: right;
padding: 0;
background: inherit;
margin-bottom: 10px;
width: 460px;
}
.content {
padding: 10px 0 0 0;
}
#right img {
float: left;
padding: 0 10px 5px 0;
}
.comment_box {
clear: both;
padding: 7px 35px 0 0;
margin: 10px 0 10px 0;
text-align: right;
background: url(Blog-Style-images/comment_box_bg.gif) no-repeat top
right;
height: 32px;
}
.comment_box a {
font: bold 1.2em Arial, Sans-Serif;
color: #ff3399;
background: transparent;
}
/* The CSS for the Article headlines ----------------------------*/
.headline_one {
font-size: 3.50em;
line-height: .8em;
color: #333;
font-family: 'Impact';
}
.headline_two {
font-size: 3.50em;
line-height: .8em;
color: #333;
font-family: 'Impact';
border-bottom: 4px solid #ff3399;
}
.headline_three {
font-size: 1.3em;
font-weight: bold;
color: #333;
text-transform: uppercase;
border-bottom: #ff3399 2px solid;
}
.number {
font-family: 'Impact';
float: left;
line-height: 1em;
color: #ff3399;
font-size: 4.0em;
margin-right: 8px;
}
.headline_url {
text-decoration: none;
color: #999;
font-weight: bold;
font-size: 1.48em;
line-height: 1.5em;
text-transform: uppercase;
padding-bottom: 3px;
}
.small_caps {
color: #333;
font-size: .7em;
text-transform: uppercase;
letter-spacing: 6px;
padding-top: 1px;
}
/* The CSS for the blockquote, this is XHTML valid --------------------------------------*/
q {
float: left;
width: 14em;
display: block;
margin: 0.75em 0.75em 0 0;
padding: 0.3em;
border: 1px double #CCC;
border-width: 2px 0;
color: #333;
background: none;
text-align: left;
font: italic 1.6em/1.7em Georgia;
}
/* footer ----------------------------*/
#footer {
clear: both;
width: 900px;
margin: 0;
padding: 10px 0 5px 0;
border-top: 1px solid #333;
background: inherit;
}
</style>
<title>BlogStyle</title>
</head>
<body>
<div id="wrapper">
<div id="topnav">
<div id="menu">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Articles">Articles</a></li>
<li><a href="#" title="Connect">Connect</a></li>
<li><a href="#" title="Affiliates">Links</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<li><a href="#" title="Archives">Archives</a></li>
</ul>
</div>
</div>
<div id="header">
<div id="title">
<h1><a href="#" title=""><span class="t1">Blog</span> <span class="t2">Style</span></a></h1>
<h2>Tempor cum soluta nobis eleifend</h2>
</div>
</div>
<div class="clear"></div>
<div id="linkbar"><span class="headline_three">consectetuer elit</span><br />
<span class="small_caps">legunt saepius</span>
<ul>
<li><a href="#" title="tempor cum soluta nobis eleifend">tempor cum soluta nobis eleifend</a></li>
<li><a href="#" title="demonstraverunt lectores">demonstraverunt lectores</a></li>
<li><a href="#" title="Typi non habent claritatem">Typi non habent claritatem</a></li>
<li><a href="#" title="consectetuer adipiscing elit">consectetuer adipiscing elit</a></li>
<li><a href="#" title="tempor cum soluta nobis eleifend">tempor cum soluta nobis eleifend</a></li>
<li><a href="#" title="demonstraverunt lectores">demonstraverunt lectores</a></li>
<li><a href="#" title="Typi non habent claritatem">Typi non habent claritatem</a></li>
<li><a href="#" title="consectetuer adipiscing elit">consectetuer adipiscing elit</a></li>
</ul>
<span class="headline_three">Lorem dolor sit amet</span><br />
<span class="small_caps">demonstraverunt</span>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur <a href="#">mutationem consuetudium lectorum</a>. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas.</p>
<span class="headline_three">CSS Resources</span><br />
<span class="small_caps">legunt saepius</span>
<ul>
<li><a href="#" title="tempor cum soluta nobis eleifend">tempor cum soluta nobis eleifend</a></li>
<li><a href="#" title="demonstraverunt lectores">demonstraverunt lectores</a></li>
<li><a href="#" title="Typi non habent claritatem">Typi non habent claritatem</a></li>
<li><a href="#" title="consectetuer adipiscing elit">consectetuer adipiscing elit</a></li>
<li><a href="#" title="tempor cum soluta nobis eleifend">tempor cum soluta nobis eleifend</a></li>
<li><a href="#" title="demonstraverunt lectores">demonstraverunt lectores</a></li>
<li><a href="#" title="Typi non habent claritatem">Typi non habent claritatem</a></li>
<li><a href="#" title="consectetuer adipiscing elit">consectetuer adipiscing elit</a></li>
</ul>
<span class="headline_three">Lorem dolor sit amet</span><br />
<span class="small_caps">demonstraverunt</span>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur <a href="#">mutationem consuetudium lectorum</a>. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas.</p>
</div>
<div id="left"><span class="headline_three">Blogs in my network</span><br />
<span class="small_caps">In random order</span>
<ul>
<li><a href="http://fullahead.org/" title="Full Ahead">Full Ahead</a></li>
<li><a href="http://www.caperweb.com/08/" title="Caperweb Interactive">Caperweb Interactive</a></li>
<li><a href="http://jason-cole.com/" title="Jason Cole">Jason Cole</a></li>
<li><a href="http://me.mywebsight.ws/" title="Lobster man">Lobster man</a></li>
<li><a href="http://karenblundell.com/" title="Karen Blundell">Karen Blundell</a></li>
<li><a href="http://writeside.net/" title="Writeside">Writeside</a></li>
<li><a href="http://www.idunzo.com/" title="idunzo">idunzo</a></li>
<li><a href="http://www.attackr.com/" title="Attackr">Attackr</a></li>
<li><a href="http://www.growldesign.co.uk/" title="Growl design">Growl design</a></li>
<li><a href="http://www.edg3.co.uk/" title="Edg3">Edg3</a></li>
</ul>
<span class="headline_three">Lorem dolor sit amet</span><br />
<span class="small_caps">demonstraverunt</span>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur <a href="#">mutationem consuetudium lectorum</a>. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas.</p>
<span class="headline_three">consectetuer elit</span><br />
<span class="small_caps">legunt saepius</span>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</p>
<span class="headline_three">Lorem dolor sit amet</span><br />
<span class="small_caps">Mirum est notare</span>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur <a href="#">mutationem consuetudium lectorum</a>. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas.</p>
<span class="headline_three">consectetuer elit</span><br />
<span class="small_caps">Mirum est notare</span>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</p>
</div>
<div id="right">
<div class="content">
<span class="headline_one">Stop being fooled</span><br />
<span class="headline_two">by all the splashy headlines.</span><br />
<br />
<span class="number">.01 |</span> <a href="#" class="headline_url">Claritas est
etiam processus</a><br />
<span class="small_caps">Claritas est etiam processus</span>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet doloremagna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<q>Most people will read the information you have inside a pull quote... See, told ya so</q>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<div class="comment_box"><a href="#" title="#">Comments (9)</a>
</div>
</div>
<div class="content"><span class="headline_one">Mirum est notare quam</span><br />
<span class="headline_two"><em>tempor cum soluta nobis.</em></span><br />
<br />
<span class="number">.02 |</span> <a href="#" class="headline_url">putamus parum
claram</a><br />
<span class="small_caps">Mirum est notare quam</span>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet doloremagna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<q>Most people will read the information you have inside a pull quote... See, told ya so</q>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<div class="comment_box"><a href="#" title="#">Comments (21)</a></div>
</div>
</div>
<div id="footer">
<p><a href="#">home</a> | <a href="#">articles</a> | <a href="#">news</a> | <a href="#">connect</a> | <a href="#">links</a> | <a href="#">contact</a> | <a href="#">rss</a> | <a href="#">xhtml</a> | <a href="#">css</a></p>
<p><a href="http://www.modetwentythree.com" title="collin grasley">designed for the public domain by modetwentythree</a>
| <a href="http://www.cssportal.com">CSS Portal</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category