style_system | Feb. 17th, 2012

I'm working on two Tabula Rasa layouts -- one fixed, one fluid, with matching graphics -- and starting to hit the limit of what my understanding of CSS can handle. Help?

Here's the current state of the fixed-width layout, currently enabled at

punditfic:

/********************DO NOT REMOVE THIS********************
New York Skyline by sailorptah
Theme: Tabula Rasa
CSS inspiration: http://www.csszengarden.com/?cssfile=200/200.css
Image: http://commons.wikimedia.org/wiki/File:Upper_and_Middle_Manhattan.jpg
Layouts: http://sailorptah.dreamwidth.org/tag/layouts
*************************************************************/

/* Cleaned CSS: */

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

img {
    border: none;
}

hr {
    display: none;
}
.entry-content hr,
.comment-content hr {
    display: block;
    margin: 1em 10%;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/nyc-body.png) repeat-y top left;
	font-size:0.8em;
	color:#fff;
	font-weight:normal;
	margin:0;
	padding:0;    
}

html body {
    margin-left: 0em;
    margin-right: 0em;
}

a { 
	color:#a9e0ff;
	border-bottom:#a9e0ff dotted 1px;
        text-decoration: none;
 }
a:visited { 
	color:#fff;
	font-weight:normal;
	border-bottom:#a9e0ff dotted 1px;
	text-decoration:none;
 }
a:hover, a:active { 
	color:#fff;
	border-bottom:#fff dotted 1px;
        text-decoration: none;
 }

q { font-style: italic; }

.one-column #content { float: none; }
.two-columns-left #content,
.three-columns-sides #content {
    border-left: 15em solid transparent;
}
.two-columns-right #content,
.three-columns-sides #content {

}
.three-columns-left #content {
    border-left: 30em solid transparent;
}
.three-columns-right #content {
    border-right: 30em solid transparent;
}
.column-right #content {
    min-width: 15em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}

#header, #footer {
    margin: 0;
    clear: both;
    padding: .5em;
}

#header {
	position:absolute;
	top:20;
	left:0;
	background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/nyc-header-2.png) no-repeat top left;
	height:343px;
	width:100%;
}

h1#title span {
    position: absolute;
    top: 30px;
    left: 500px;
    font: 50px "Copperplate Gothic Light";
    text-transform: uppercase;
}

h2#subtitle span {
    position: absolute;
    top: 80px;
    left: 500px;
    font: 20px bold "Arial Narrow";
}
h2#pagetitle span {
    position: absolute;
    top: 100px;
    left: 500px;
    font: 20px "Arial Narrow";
}

#primary {
	position:relative;
	text-align:justify;
	width:400px;
	top:320px;
	left:140px;
	z-index:4;
}

.one-column #primary { float: none; }

#primary > .inner:first-child {
    padding: 1em;
}

.one-column #secondary { width: auto; }

.two-columns-left #secondary,
.three-columns-sides #secondary {
    float: left;
    width: 15em;
    margin-left: -15em;
}
.two-columns-right #secondary {
	position:absolute;
	top:385px;
	width:200px;
	text-align:center;
	left:611px;
	font-size:0.85em;
	background:transparent;
}
.three-columns-left #secondary {
    float: left;
    width: 15em;
    margin-left: -30em;
}
.three-columns-right #secondary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#secondary > .inner:first-child {
    padding: 1em;
}

.one-column #tertiary { width: auto; }

.two-columns-left #tertiary,
.two-columns-right #tertiary {
    clear: both;
}
.two-columns-left #tertiary { margin-left: -15em; }
.two-columns-right #tertiary { margin-right: -15em; }
.two-columns-left #tertiary .module,
.two-columns-right #tertiary .module {
    float: left;
    width: 15em;
}
.three-columns-left #tertiary {
    float: left;
    width: 15em;
    margin-left: -15em;
}
.three-columns-right #tertiary {
    float: right;
    width: 15em;
    margin-right: -30em;
    margin-left: 15em; /* so that #tertiary won't overlay #secondary in IE7 */
}
.three-columns-sides #tertiary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#tertiary > .inner:first-child {
    padding: 1em;
}

.topnav, #footer {
display: none;
}

.bottomnav {
	margin-top: 10px; 
	font-size:0.85em;
	letter-spacing: -0.07em;
	font-size: 1.2em;
	text-transform: uppercase;
}

.navigation ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
.noentries {
    padding: 0 .5em;
}

/* entries */

.entry {

}

.entry h3 {
   font: bold 18px "Copperplate Gothic Light";
}

.contents .userpic {
    background: transparent;
    float: right;
    padding: 5px;
    spacing: 5px;
}

.entry .entry-content {
   margin-top: 30px;
   margin-bottom: 30px;
}

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

.metadata ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.metadata li {
    margin-bottom: .5em;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 1em;
}

.tag ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.tag ul li {
    display: inline;
    padding: .25em;
} /* same for month view */

ul.entry-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

.entry-interaction-links a {  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

/* comments */

.comment-wrapper {
    padding: .5em 0;
}

.comment-wrapper-odd .header {
   background: #0D1A21;
   padding: 5px;
}

.comment-content {
   margin-top: 10px;
   margin-bottom: 10px;
   min-height: 100px;
   }

.comment-wrapper-even .header {
   background: #294A5D;
   padding: 5px;
}

.comment-title h4 {
    font: bold 18px "Copperplate Gothic Light";
    margin: 0;
    padding: 0;
}

ul.comment-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* archive */

.month {

}

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl .time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

.sorting-options ul {
    list-style: none;
    margin-left: 0;
}

.sorting-options ul li {
    display: inline;
}

.keywords ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}

.keywords ul li {
    display: inline;
    padding: .25em;
}

/* modules */

.module h2 {
    font: bold 18px "Copperplate Gothic Light";    
}

.module-content ul {
    list-style: outside;
    margin-left: 1em;
    padding-left: 0;
}
.module-content li {
    margin: .5em 0;
    list-style-type: none;
}

ul.userlite-interaction-links.icon-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 .20em;
}

ul.userlite-interaction-links.text-links {
    text-align: left;
}

.module-calendar .module-content {
    text-align: center;
}

.one-column .module-calendar .module-content {
    text-align: left;
}

.module-calendar table {
    margin: 0 auto;
}

.one-column .module-calendar table {
    margin: 0;
}

.module-calendar td {
    padding: 1px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}

.search-box {
    margin: .2em auto;
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}
.module-credit dt, .module-credit dd {
    display: inline;
    margin: 0;
    padding: 0;
}
.module-credit dt {
    font-weight: bold;
    margin-right: 0.5em;
}

.tags_cloud li, .module-tags_cloud li { display: inline;
    list-style-type: none; }

.module-syndicate .module-content {
    text-align: center;
}

.one-column .module-syndicate .module-content {
    text-align: left;
}

.module-time, .module-powered {
   width:200px;
   margin-left:631px;
   font-size:0.85em;
   clear:left;
}

And here's the fluid version, visible in action at

andthatstheword:

/*************DO NOT REMOVE THIS*************
New York Skyline (Fluid) by sailorptah
Theme: Tabula Rasa

CSS inspiration: http://visualwit.dreamwidth.org/28429.html
Image: http://commons.wikimedia.org/wiki/File:Upper_and_Middle_Manhattan.jpg
Layouts: http://sailorptah.dreamwidth.org/tag/layouts

********************************/

/*--- main ---*/

* {
	margin: 0px; 
	padding: 0px;
	}

BODY {
	font-family:Arial, Helvetica, sans-serif;
	background: #0E1920 url('http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-bg.png');
	color: #fff;
	font-size: .8em;
	margin: 30px 0px 0px 0px;
	}

a { 
	color:#a9e0ff;
	border-bottom:#a9e0ff dotted 1px;
        text-decoration: none;
	}

a:visited { 
	color:#fff;
	font-weight:normal;
	border-bottom:#a9e0ff dotted 1px;
	text-decoration:none;
	}

a:hover, a:active { 
	color:#fff;
	border-bottom:#fff dotted 1px;
        text-decoration: none;
	}

blockquote {
	background-color: #0D1A21;
	padding: 8px; 
	margin: 15px 55px 15px 15px; 
	text-align: justify;
	}

.contents .userpic {
	background: transparent;
	float: right;
	padding: 5px;
	spacing: 5px;
	}

hr {
	display: none;
	}

#primary { 
	text-align:justify;
	background-image: url('http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-modules.png')
	}

#secondary { 
	text-align:center;
	background-image: url('http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-modules.png'); 
	background-color: #7eadc8;
	}

/*--- header ---*/

#header { 
	height: 306px;
	background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-nyc.png) repeat-y top left;
	margin-top: -20px;
	}

h1#title, h2#subtitle, h2#pagetitle {
	color: #fff;
	text-align: right;
	margin-right: 10%;
	}

h1#title {
	font: 50px "Copperplate Gothic Light";
	font-size: 3em;
	}

h2#subtitle { 
	font-size: 1.5em;
	font: 20px bold "Arial Narrow";
	}

h2#pagetitle { 
	font-size: 1.5em;
	font: 20px "Arial Narrow";
	}

/*--- sidebar options ---*/

.two-columns-left #primary {
	float: right;
	margin-right: 8%;
	margin-top: -2px;
	padding: 2%;
	width: 56%;
	}

.two-columns-left #secondary { 
	float: left; 
	width: 19%; 
	margin-left: 8%; 
	margin-top: -2px;
	padding: 1%;
	}

.two-columns-right #primary {
	float: left;
	margin-left: 8%;
	margin-top: -2px;
	padding: 2%;
	width: 56%;
	}

.two-columns-right #secondary { 
	float: right; 
	width: 19%; 
	margin-right: 8%; 
	margin-top: -2px;
	padding: 1%;
	}

.two-columns-right #tertiary, .two-colums.left #tertiary { 
	clear: both; 
	}

.two-columns-right #tertiary .module, .two-colums.left #tertiary .module { 
	float: left; 
	}

/*--- sidebar ---*/

.module { 	
	text-align: center;
	}

.module-content { 
	padding: 10px; 
	font-size: .85em;
	}

.module-content ul {
	list-style: outside;
	margin-left: 1em;
	padding-left: 0;
	}

.module-content li {
	margin: .5em 0;
	list-style-type: none;
	}

.module-active, .module-search, .module-cuttagcontrols, .module-userprofile, .module-customtext, .module-typelist, .module-tags_list, .module-pagesummary, .module-calendar, .module-syndicate { 
	}

.module-powered, .module-time { 
	font-size:0.85em;
	}

.module h2 {
	font: bold 1.5em "Copperplate Gothic Light";
	color: #fff; 
	text-align: center;
	}

ul.userlite-interaction-links.icon-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

ul.userlite-interaction-links.icon-links li {
	display: inline;
	padding: 0 .20em;
	}

ul.userlite-interaction-links.text-links {
	text-align: left;
	}

div.manage-tags-link { 
	margin: 10px 0px 0px 0px;
	text-transform: uppercase; 
	text-align: right; 
	}

.module-calendar .module-content {
	text-align: center;
	}

.one-column .module-calendar .module-content {
	text-align: left;
	}

.module-calendar table {
	margin: 0 auto;
	}

.one-column .module-calendar table {
	margin: 0;
	}

.module-calendar td {
	padding: 1px;
	}

.module-calendar td a {
	display: block;
	padding: 2px;
	}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
	white-space: normal !important;
	}

.module-pagesummary .module-content {
	word-wrap: break-word;
	}

.module-credit dt, .module-credit dd {
	display: inline;
	margin: 0;
	padding: 0;
	}

.module-credit dt {
	font-weight: bold;
	margin-right: 0.5em;
	}

.tags_cloud li, .module-tags_cloud li { display: inline;
    list-style-type: none; }

.module-syndicate .module-content {
    text-align: center;
}

/*--- navigation (for entries) ---*/

.navigation { 
	color: #fff;  
	text-align: center; 
	padding: 5px; 
	margin: 0px 0px 0px 0px; 	
	letter-spacing: -0.07em;
	font-size: 1.2em;
	text-transform: uppercase;
	}

.topnav, #footer { 
	display: none; 	
	}

.bottomnav { 
	margin-top: 10px; 
	font-size:0.85em;
	}

.page-separator { 
	padding: 10px; 
	}

div.navigation ul { 
	display: inline; 
	}

div.navigation li { 
	display: inline; 
	list-style: none; 
	}

li.page-back, li.page-forward {
	display: inline; 
	list-style: none; 
	}

/*--- entries ---*/

div.entry { 
	margin: 0px 0px 15px 0px;
	}

div.entry-content { 
	padding: 10px; 
	min-height: 100px; 
	margin: 20px 0px 20px 0px;
	}

div.entry div.header { 
	padding: 5px 10px 5px 10px; 
	margin: 0px 0px -10px 0px; 
	margin-right: 0px; 
	text-align: left;
	font-weight: lighter;
	}

.entry h3 {
	font: bold 1.4em "Copperplate Gothic Light";
	}

.entry-title a { 
	padding: 3px 5px 5px 5px;
	color: #efefef; 
	}

.datetime {  
	font-size: .85em;
	color: #fff; 
	padding-bottom: 5px;
	}

.entry-poster, .comment-poster { 
	padding: 7px 5px 5px 5px;
	}

/*--- currents and tags ---*/

.metadata { 
	font-size: 0.7em; 
	padding: 10px 15px 5px 15px; 
	margin: 0px;  
	text-transform: uppercase; 
	margin-right: 0px; 
	}

.metadata ul {
	display: inline;
	list-style: none;
	margin-left: .5em;
	padding-left: 0;
	}

.metadata li {
	margin-bottom: .5em;
	}

.metadata.top-metadata ul {
	margin: 0;
	}

.metadata.top-metadata {
	margin-bottom: 1em;
	}

.tag ul {
	display: inline;
	list-style: none;
	margin-left: .5em;
	padding-left: 0;
	}

.tag ul li {
	display: inline;
	padding: .25em;
} /* same for month view */

ul.entry-management-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

ul.entry-management-links li {
	display: inline;
	padding: 0 .25em;
	}

ul.entry-interaction-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	text-align: right;
	}

.entry-interaction-links a {  }

ul.entry-interaction-links li {
	display: inline;
	padding: 0 .25em;
	}

.tags-container ul {

/*--- archive page ---*/

table.month {
	margin: 0 auto;
	border-collapse: collapse;
	}

table.month td {
	height: 3.25em;
	}

table.month td, table.month th {
	border: 1px solid; /* ? */
	padding: 3px;
	}

table.month td p {
	margin: 0;
	padding: 3px;
	}

.month dl dt {
	font-weight: bold;
	}

.month dl .time {
	padding-right: .5em;
	}

.month dl h3 {
	display: inline;
	font-size: medium;
	}

.page-month .month .entry-poster {
	margin-right: .5em;
	}

.month dl .tag ul {
	margin-top: 0;
	}

/*--- comments ---*/

.comment { 
	margin: 0px 0px 20px 0px;	
	}

.comment-content {
	margin-top: 10px;
	margin-bottom: 10px;
	min-height: 100px;
	}

.comment-wrapper {
	padding: .5em 0;
	}

.comment-wrapper-odd .header {
	background: #0D1A21;
	padding: 5px;
	}

.comment-wrapper-even .header {
	background: #294A5D;
	padding: 5px;
	}

.comment-title h4 {
	font: bold 18px "Copperplate Gothic Light";
	margin: 0;
	padding: 0;
	}

ul.comment-management-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	text-align: right;
	}

ul.comment-management-links li {
	display: inline;
	list-style: none;
	padding: 0 .25em;
	}

ul.comment-interaction-links {
	display: inline;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

ul.comment-interaction-links li {
	display: inline;
	padding: 0 .25em;
	}

.multiform-checkbox {
	padding-top: 20px;
	}

Issues in the fixed-width layout:

~~When the page isn't tall enough, module-content and module-powered show up in the middle of the sidebar.~~ Avoided!

In the main entry view, how can I get usernames to display reliably under the userpic? The best I got (through messing with margins) was "it'll appear there, but entry text will overlap it." (Also a problem in the fluid version.) Solved in both!

New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #primary.

Things in the fluid layout that I can't get to match the fixed-width layout:

~~On the calendar-by-month view, the entry information isn't indented with respect to the date.~~ Prettied up!

~~Similarly, the bulleted list on the tags page isn't indented.~~ Solved!

~~Information in the entries on the main page is all squished together (title overlapping with date/time, tags overlapping with entry tools).~~ Solved!

~~Everything to do with comment display just isn't happening. The tools won't display inline, there's no space around comment-content, the header has no background...~~ Solved!

Other issues with the fluid layout:

Can I make the #primary and #secondary divs extend to the bottom of the page (to extend the background) without covering the header?

Looks like I need to do something with module-content and module-powered here too. When the sidebar is on the left, they try to squeeze into the gap between #secondary and #primary. This isn't a problem when the sidebar is on the right (or at least, it hasn't been at my resolution). Solved!

Anyone who can point me in the right direction on any of these points would be greatly appreciated!

Dreamwidth style system discussion

Feb. 17th, 2012

Feb. 17th, 2012

Layout help, fixed & fluid (Tabula Rasa)

Profile

April 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags