Aligning main content with central header

Oct 23, 2011 01:30

Name of journal: gate_seven
Layout Style: Flexible Squares
Basic, Paid or Plus: Basic
Problem you are having: Since this is a community page, I'd like to make it look better on smaller screen resolutions by having the main content align with the right-hand side of the "header," rather than the right-hand side of the page. As it is, the entries get pushed "behind" the header in smaller resolutions. (Hopefully, this will also let me expand the width of the main content, since right now some images are getting cut off.) ETA: Also, is there any way to increase the font size of the links in the sidebar without increasing the size of the blurb text?


/* HEAVENLY VILLAGE */
/* Stylesheet by ruewort @trodain, please remember to credit! */

/*------------------------------------
DISABLED
------------------------------*/

.headerimage, .title, .subtitle, .sbarheader, .defaultuserpic, .currents strong, .currentgroups, .ljtags, .clearfoot, .clear, div#comments, .skiplinks, .separator, #lj_controlstrip {display: none;}

/*------------------------------------
BODY AND COLORS
------------------------------*/

html body

{padding-top: 0 !important;}

body {text-align: center; color: #2B2623; font-family: "Geneva", sans-serif; font-size: 11px; margin: 0px 100px; line-height: 180%; background: #A7C5BD;}

a, a:link, a:visited {color: #524656; text-decoration: none;}

b, i, u, strong {color: #ffffff; font-weight: normal;}

a:hover {color: #CF4647; text-decoration: none;}

p, td, blockquote {font-size: 11px;}

code, kbd, pre, tt {font-family: monospace;}

#content {margin: 0 auto;}

#maincontent {font-family: "Geneva", sans-serif; font-size: 11px; color: #2B2623; text-align: left; margin-left: 30px; margin-right: 0px; float: right;}

#sidebar {font-size: 11px;
font-family: "Geneva", sans-serif; color: #2B2623; width: 270px; float: left; text-align: right; background: transparent; margin-top: -15px;}

#header {width: 200px; padding: 0px; margin: 0px auto; text-align: left; font-family: "Georgia", serif; font-size: 11px; font-weight: normal;
background: #CF4647; background-image:url('http://i.imgur.com/b6221.png'); background-repeat:no-repeat; background-position:bottom; color: #fff; font-variant: small-caps; letter-spacing: 1px; display: block; position: fixed; left: 420px; min-height: 100%; top: 0px;}

#footer {z-index: 100; clear: both; width: 200px; padding: 0px; text-align: left; font-family: "Georgia", serif; font-size: 11px; font-weight: normal; background-color: #CF4647; color: #fff; font-variant: small-caps; letter-spacing: 1px; position: fixed; left: 420px; bottom: 0px; display: block;}

.userpic, .userpicfriends {margin:80px 0 10px 20px; position: relative;float:right;padding: 0;background-color: transparent !important;z-index: 15}
.userpicfriends {text-align: center;text-transform: uppercase;letter-spacing:-0.07em;font-size:.9em}

.userpicfriends img,.userpic {padding:5px 4px 0 0}

/*------------------------------------
HEADER AND FOOTER
------------------------------*/

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {color: #fff;}

div#header a:hover, div#footer a:hover {color: #fff; text-decoration: none;}

ul.navheader {padding: 0px; margin: 0px auto;}

ul.navheader li {display: block; padding: 10px; border-bottom: 1px solid #fff; margin: 0px auto; width: 180px; background: #E5DDCB;}

ul.navheader li+li {background: #EB7B59;}

ul.navheader li+li+li {background: #CF4647;}

ul.navheader li+li+li+li {background: #524656;}

ul.navheader li+li+li+li+li {background: #858277;}

ul.navfooter {padding: 0px; margin: 0px;}

ul.navfooter li {display: block; padding: 10px; border-bottom: 1px solid #fff; margin: 0px auto; width: 180px; background: #E5DDCB;}

ul.navfooter li+li {background: #EB7B59;}

ul.navfooter li+li+li {background: #CF4647;}

/*------------------------------------
SIDEBAR
------------------------------*/

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {color: #524656; font-variant: small-caps;}

div#sidebar a:hover {color: #CF4647; text-decoration: none;}

.sbarbody {padding: 5px 10px; width: 250px;}

.sbarbody2 {padding: 0px 10px; width: 250px;}

table.calendar {margin-right: auto; margin-left: auto;}

.sbarcalendar {border: #ededed 1px solid; text-align: center;font-family: "Geneva", sans-serif;font-size: 11px; width: 230px; padding: 3px;}

.sbarcalendarposts {border: #A7C5BD 1px solid; background-color: #A7C5BD; text-align: center; font-family: "Geneva", sans-serif; font-size: 11px; padding: 3px;}

ul.sbarlist {padding-left: 0px;margin-left: 0px; list-style: none;}

li.sbaritem {padding: 10px 0px; list-style: none; border-bottom: 1px solid #ededed; font-family: "Georgia", serif;}

li.sbartitle {color: #ffffff; font-family: "Georgia", serif; font-size: 20px; font-variant: small-caps; letter-spacing: 1px; padding: 20px 0px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;}

/*------------------------------------
MAINCONTENT
------------------------------*/

input, textarea, select {color: #2B2623; font-family: "Geneva", sans-serif; font-size: 11px; text-align: left;}

blockquote {padding: 10px; border: 1px solid #ededed; background: #f5f5f5;}

.subcontent {width: 500px; min-height: 150px; margin: 20px 0px;}

.entry {padding: 10px 0px; color: #2B2623; font-family: "Geneva", sans-serif; font-size: 11px; text-align: left; min-height: 120px;}

.entry_text {min-height: 120px; padding: 10px 0px; max-width: 500px; overflow: hidden;}

.entry_text img {max-width: 480px; border: 10px solid #f1f1f1; max-height: 300px; margin: 0 auto; opacity: .70;}

.entry_text img:hover {opacity: 1;}

.entry ul li{padding-left: 5px; margin-left: 15px;}

.entry ol li{padding-left: 5px; margin-left: 15px;}

.userpic a font, .userpicfriends a font, .userpic font, .userpicfriends font, .userpic a {display: none!important; color: #A7C5BD!important;}

.userpic img, .userpicfriends img {width: 80px; height: 80px; padding: 10px; background: #f4f4f4; }

.date {color: #2B2623; font-family: "Geneva", sans-serif; font-size: 11px; display: block; font-variant: small-caps; float: left; width: 120px; line-height: 150%; padding: 10px 0px; display: none;}

.subject {font-weight: normal; color: #2B2623; font-family: "Georgia", serif; font-size: 20px; font-variant: small-caps; letter-spacing: 1px; text-align: right; padding-left: 5px;}

.subject a, .subject a:link, .subject a:visited {color: #ffffff; padding-left: 5px;}

.subject a:hover {color: #524656;}

.datesubject {padding: 20px 0px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;}

.currents {padding: 10px 0px; text-transform: capitalize;}

.currentmood, .currentmusic, .currentlocation {padding: 2px 0px 2px 20px;}

.currentlocation {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/house.png); background-repeat: no-repeat; background-position: left center;}

.currentmusic {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Famfamfam/bell.png); background-repeat: no-repeat; background-position: left center;}

.currentmood {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/cup-2.png); background-repeat: no-repeat; background-position: left center;}

.currents, .currentmood, .currentmusic {font-family: "Geneva", sans-serif; font-size: 11px;}

.comments {font-family: "Georgia", serif; font-size: 15px; text-align: left; padding: 10px 0px; position: relative;
color: #A7C5BD; font-variant: small-caps; letter-spacing: 1px; border-top: 1px solid #ededed;}

div.comments a, div.comments a:link, div.comments a:visited {color: #EB7B59; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/pencil.png); background-repeat: no-repeat; background-position: left center; padding-left: 20px;}

div.comments a:hover {color: #524656;text-decoration: none;}

/*------------------------------------
MAINCONTENT- YEAR/ARCHIVE
------------------------------*/

ul.year {text-align: center; padding: 20px 0px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; margin-left: auto; margin-right: auto; width: 480px; letter-spacing: 1px; font-weight: normal;}

ul.year li {display: inline; font-family: "Georgia", serif; font-size: 20px; font-variant: small-caps;}

table.yeartable {margin-left: auto; margin-right: auto; width: 480px;}

table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #f1f1f1;}

table.yeartable td.yearday {background-color: #E5DDCB; text-align: center; color: #fff; font-family: "Georgia", serif; font-variant: small-caps;}

td.yearmonth {border-style: none;}

/* Misc */

.skiplinks {text-align: center;}

.separator {}

/*------------------------------------
Look of contextual Popup
------------------------------*/

div.ContextualPopup div.Inner {background: transparent!important; color: #2B2623!important; padding: 5px; width: 300px;
font-family: Georgia, serif; font-weight: normal!important; font-size: 11px;
border: none!important;}

div.ContextualPopup .Content {padding: 5px; margin-right: 80px; line-height: 180%; background: #A7C5BD!important; color: #2B2623!important;
border: none!important;}

div.ContextualPopup .Userpic {margin: 0px; padding: 9px; border: 1px solid #f1f1f1; background: #A7C5BD;}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important;
font-weight: normal; color: #524656!important;}

div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {text-decoration: none !important; font-weight:normal; color: #524656! important; font-variant: small-caps;}

div.ContextualPopup .Relation {margin-bottom: 5px; padding-bottom: 7px; padding-top: 7px; text-transform: capitalize; font-weight: normal!important; font-variant: small-caps; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; color: #524656! important;}

div.ContextualPopup .Content .OnlineStatus {font-weight: normal!important; color: #524656! important;}

/*------------------------------------
User images
------------------------------*/

img[src*="http://l-stat.livejournal.com/img/icon_protected.gif"], [src="http://l-stat.livejournal.com/img/icon_private.gif"], [src="http://l-stat.livejournal.com/img/icon_groups.gif"] {width: 0;height: 0;padding: 0 16px 16px 0;
background: url("http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/lock-6.png");}

img[src*="userinfo.gif"], img[src="http://livejournal.com/img/newyearpic_1.gif"], img[src="http://www.livejournal.com/stc/img/userinfo-support.gif"], img[src*="http://l-stat.livejournal.com/img/user_ontd.gif"] {width: 0; height: 0; padding: 16px 0 0 16px;
background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Famfamfam/cake.png); background-repeat: no-repeat; background-position: left center;}

img[src*="syndicated.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/feed.png);
background-repeat: no-repeat; background-position: left center; padding: 16px 0 0 16px; width: 0; height: 0;}

img[src*="newsinfo.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/hourglass.png);
background-repeat: no-repeat; background-position: left center; padding: 16px 0 0 16px; width: 0; height: 0;}

img[src*="community.gif"]
{width: 0; height: 0; padding: 16px 0 0 16px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/heart.png); background-repeat: no-repeat; background-position: left center;}

img[src*="btn_del.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"], img[src*="openid-profile.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="btn_edit.gif"], img[src*="http://l-stat.livejournal.com/img/facebook-profile.gif"], img[src*="anonymous.gif"], img[src*="http://l-stat.livejournal.com/img/twitter-profile.gif"] {background-repeat:no-repeat !important;
height: 0; padding: 16px 16px 0 0!important; width: 0; background-position: left center; display: none;}

/*------------------------------------
Tag list
------------------------------*/

.ljuser a b {font-weight: normal; font-family: "Georgia", serif; font-variant: small-caps; text-transform: capitalize; margin-left: 2px;}

h2 {text-align: left; padding: 20px 0px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; width: 500px; letter-spacing: 1px; font-weight: normal; color: #E5DDCB; font-family: "Georgia", serif; font-size: 20px; font-variant: small-caps;}

.ljtaglist {width: 500px; margin-left: -40px; margin-bottom: -10px;}

.ljtaglist li {padding: 10px 0px 10px 20px; list-style: none; border-bottom: 1px solid #ededed; font-family: "Georgia", serif; list-style: none; font-variant: small-caps; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/tag_yellow.png); background-repeat: no-repeat !important; background-position: left center;}

.ljtaglist li a {color: #E5DDCB;}

.ljcut-link {color: #A7C5BD; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Famfamfam/bug.png); background-repeat: no-repeat; background-position: left center; padding-left: 20px; font-family: "Georgia", serif; font-variant: small-caps;}

Note: this is a modified version of trodain's Heavenly Village layout, with the sidebar and the main content switched.

s2, sidebar

Previous post Next post
Up