?

Log in

No account? Create an account

Previous Entry | Next Entry

Sidebar position help

  • Sep. 4th, 2007 at 11:42 AM
I have a basic account and this is what I've done so far off of a this as a starting point.  The issue is the sidebars, I choose the TWT layout but can't get the beta and gamma into that orientation.  They are stacked one on top of the other (A, B, G) even when I provide enough space for them on the sides of the alpha.   I'm guess it's because I lack some declaration of layout-twt, but I'm not sure how to use it.  I'm also new to CSS.  I'll paste the code for what I've done below.  I'd really appreciate some help. 

/*
general formatting
page structure
page banner header
header nav styles
headers
hover edit (sticky post header in LJ)
widget styling
asset styling
pager
utitlity code
*/

/* general formatting --------------------------------------------------- */
body {
font-family:Arial, Verdana, Lucida Sans Unicode, sans-serif;
color:#FFFFFF;
background: url(http://farm2.static.flickr.com/1147/1315636413_c618deb041.jpg?v=0)repeat fixed #000000;

}

a {
font-weight: bold;
text-decoration: none;
color: #A70000;
}

a:hover {
text-decoration: blink;
}

/* page structure ----------------------------------------------------------- */
#page {
width: 800px;
margin: 15px 104px 5px 104px;
background-color: #000000;
}

#page-inner {
width: 790px;
margin: 0px 5px 0px 5px;
background-color: #c6aaaa;
}

#content-inner {
padding-top: 15px;
padding-right: 7;
margin: 7;
}

#alpha{
width: 500px;
margin: 0px 25px 20px 25px;
}

#beta {
width: 150px;
padding: 0px 200px 25px 10px; margin: 0;
}

#gamma {
width: 150px;
}


/* page banner header ----------------------------------------------------------- */

.page-header1 { font-size: 28px; }
.page-header2 { font-size: 22px; }
.page-header3 { font-size: 18px; }
.page-header4 { font-size: 14px; }

#header-text,
.page-header1,
.page-header2,
.page-header3,
.widget-header {
font-family:Arial, Verdana, Lucida Sans Unicode, sans-serif;
}

#header {
position: static; /* fixes positioning issue on IE where header content displays outside #header-content */
background-color: #000000;
}

#header-inner {
margin: 10px 10px 10px 10px
position: static; /* fixes positioning issue on IE where header content displays outside #header-content */
background-position: left bottom;
background-repeat: no repeat;
background-color: #000000;
}

#header-content-inner {
margin: 20px 15px 5px 20px;
padding-bottom: 60px;
}

#header-text {
float: left;
margin-top: 10px;
width: 635px;
}


#header-name {
padding-top:5px;
font-size: 34px;
text-transform: lowercase;
color:a70000;
}

#header-name,
#header-name a {
color: #a70000;
text-decoration: none;
}

#header-name a:hover {
font-style: italic;
}

#header-description {
font-size: 16px;
}

#header-description,
#header-description a {
color: #ffffff;
}



/* header nav styles ------------------------------------------------- */
.nav,
.nav a {
color: #ccccc8;
}
.nav .item {
border-color: #b6cc7c;
}
.nav .current a {
text-decoration:none;
}

/* headers and captions -------------------------------------------- */

.asset-name { font-weight: bold; }

.asset-name,
.asset-name a,
.page-header1,
.page-header2,
.page-header3 {
color: #444444;
}


/*hover edit --------------------------------------------------*/
/*in LJ, this is the sticky post header*/
.asset-name-hover {
background-color: #f6f8f2;
}

/* widget styling --------------------------------------------------*/

.widget-header {
padding: 10px 15px;
font-size: 13px;
font-weight: bold;
background-color:#280000;
height:14px;

}

.widget .widget-header a:hover {
text-decoration: blink;
}


.archive-widget ul.widget-list .item,
.widget a { text-decoration: underline; }

.widget .widget-header, /*extra class keeps rule above from overwriting in variants*/
.widget .widget-header a {
text-decoration: none;
}


.widget-content {
padding: 0 15px;
font-size: 11px;
color:#000000;
}

.widget .widget-header {
}

.widget-header .edit a {
border-left-color: #fff;
font-size: 10px;
}

.widget ul, .widget ol, .widget dl { margin-bottom: 0; }

.widget-footer {
font-size: 11px;
}

.widget-footer p {
line-height: 1;
margin: 0;
padding: 0;
}

* html .widget-footer a {
/* Win IE < 7 */
padding: 0 15px;
word-wrap: break-word;
}


/* widget styling --------------------------------------------------*/


.widget-header {
background-image:url(widget-header-beta.gif);
background-repeat:no-repeat;
}

.archive-widget ul.widget-list .item,
.widget a { color: #dddddd; }



/* asset styling --------------------------------------------------*/

.asset-content blockquote {
background-image: url(blockquote.gif);
background-position: top left;
background-repeat:no-repeat;
padding: 10px;
font-size: 12px;
background-color:#b7b7b7;
}
/* Win IE < 7 */
* html .asset-content ol { margin-left: 25px;}

.asset-stream-list .post-asset .asset-name { margin-top: 0; }

.asset-tags-list {
font-size: 12px;
}

.asset-tags-header { font-size: 12px; font-weight:bold;}

.asset-stream-grid .asset-inner {
background-color: #eff3f7;
padding: 0;
}

.asset .asset-meta dd a {
color: #333333;
}

.asset-meta-list .datetime {
color:#343434;
}

#alpha .asset-meta-list a {
color:#555555;
}

.asset-meta-list .item {
border-color: #444444;
}

.asset-footer {
height:20px;
}


.asset-tags-list a:hover {
background-color:#CCCCCC;
color:#555555;
}

#comments .comment-even,
.comment-error {
background-color: #b7b7b7;
padding:2px;
}

#comments .comment-odd {
background-color: #a7a7a7;
padding:2px;
}

#comments input, #comments textarea {
border: 1px solid #7f7f7f;
}


.asset-detail .asset-containers,
.comment-even,
.comment-error {
border-width: 0px;
border-style: solid;
border-color: #d9ecc7;
}

#comment-form textarea {
border: 1px solid #979797;
border-right-color: #e5e4e4;
border-bottom-color: #e5e4e4;
}

.comment-form-footer input { border: 1px #a9a9a9 solid; }

.recent-activity-posts .post-asset,
.asset-containers .post-asset {
background-position: 0 4px;
}

/* Pager ------------------------------------------------------------------ */
.pager a,
.pager .current a { color: #478bb6; }


/* Utility Code --------------------------------------------------- */

/* clear floats, inspired by positioniseverything.net/easyclearing.html */
.comment-body:after,
#page-inner:after,
#header-inner:after,
#header-photo:after,
#content-inner:after,
#alpha-inner:after,
#beta-inner:after,
#gamma-inner:after,
#delta-inner:after,
#footer-inner:after,
.widget .user-pic:after {
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0.1px;
}

/* float in post bodies around enclosures */
#content-inner,
.asset-body {
height: 1%;
}

/* Win IE < 7 */
* html #header-name a { word-wrap: break-word; }

Comments

( 3 comments — Leave a comment )
av8rmike
Sep. 4th, 2007 07:48 pm (UTC)
I haven't gone through that stylesheet in great detail, but the first thing I notice from your journal source is that it's definitely not using the three-column layout. Go to the Journal Display->Custom Options page and select "Three column (Content in middle)" first.
If your columns, including margins, don't fit horizontally in the container, they'll stack vertically.
datruthndatrail
Sep. 6th, 2007 03:39 am (UTC)
You were right about it not being set to a 3-colunm layout and I switch it and asjusted the sizes of all the columns and they still stack vertically. BTW thanks and your icon is tite--I love Futurama.
av8rmike
Sep. 6th, 2007 03:00 pm (UTC)
I think the "starter stylesheets" that have been posted here still require the base stylesheet, which contains a lot of the "structural"-type stuff. Go back to the Journal Display area->Custom CSS page and change "Use layout's 'Base Weblog' stylesheet" to "yes", remove the width and margin stuff in your stylesheet, and hit "Save Changes". If you you still want to edit the widths, there are a few posts here under the layout tag that might help with that.
( 3 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars