Log in

No account? Create an account

Previous Entry | Next Entry


I need some help with my layout: I changed the order of the widgets and therefore had to change the width of #beta and #gamma.
I managed to place the sidebars where I wanted, but no matter what I do, #alpha doesn't change the width to the remaining place between the sidebars (is smaller). If anything changes at all, it's the position of the columns (for example, covering each other).

My journal is here; I'm using Opera, but it doesn't work in IE either.

body { width: 1425px; }
#container, #container-inner { width: 1425px; }
#page, #page-inner { width: 1425px; }
#header, #header-inner, #header-content, #header-content-inner {
     width: 1425px;
     margin left: 0px;
#content, #content-inner {
     width: 1425px;
     margin left: 0px;
#beta, #beta-inner { float: left; width: 420px; }
#alpha { width: 1425px; }
#alpha-inner { width: 1425px; margin-left: 240px; }
#gamma, #gamma-inner {float: right; width: 200px; }

#footer, #footer-inner { width: 1425px; }

My layout is here.

Any help greatly appreciated.


( 10 comments — Leave a comment )
May. 12th, 2007 07:54 pm (UTC)
Your layer isn't viewable. Instructions are linked in the community's sidebar. Why did changing order of the modules require changing the width?
May. 12th, 2007 08:01 pm (UTC)
Ooops, sorry, I accidentally made the theme instead of user layout viewable. All fixed now.

The custom text is wider than all the others, so I need something like 420px left, 200px right and the rest for the entries in the middle.
May. 12th, 2007 09:24 pm (UTC)
OK, well, a lot of that CSS you put in to change the widths won't do anything because it doesn't override the base stylesheet. There's some good information in this and this post, but I found I had to do a little more to get yours looking right:
#container-inner { width: 1425px; margin-left: 0px;}
#content-inner{width: 1425px;}
#content {margin-left: 0px;}
#header-inner {width: 1425px;}
#beta {width: 420px;}
#gamma {width: 200px;}
.layout-twt #alpha{width: 805px;left: 420px;}
.layout-twt #alpha-inner{width: 785px;}
.layout-twt #beta{left: -805px;}
I did this by basically overriding the base stylesheet one item at a time. I made #container-inner, #content-inner, and #header-inner the full page width and moved all the way to the left. #beta and #gamma's width get changed to what you wanted. 1425px-420px-200px leaves 805px for #alpha, less another 20px for the margins (width of #alpha-inner). Finally, shift #alpha 420px to the right (width of left sidebar) and #beta 805px to the left (negative value with relative positioning).

Got all that? ;)
May. 12th, 2007 09:35 pm (UTC)
umm, thanks, but either I'm too stupid to copy and paste or it doesn't work. Alpha and gamma are now all over the place and beta doesn't show at all... Any idea why?

The first link is only about header and the second one says "No such entry".
May. 12th, 2007 10:16 pm (UTC)
No, it's my fault; I didn't tell you to basically delete the section you posted and use what I wrote. They won't work together.
And I meant this post for the second one. Both are about headers, yes, but explain how to do layouts properly.
May. 12th, 2007 10:23 pm (UTC)
Hmm, I did exactly that: deleted mine and copied yours and got the result mentioned.
Maybe you will know why the final version I used worked..
Thanks for the other link!
May. 12th, 2007 10:12 pm (UTC)
I got it to work with Opera and Firefox, though I can't say I understand how. It still doesn't work with IE - the width is OK, but gamma lands at the bottom of the page.

Here the code:

body { width: 1425px; }
#container, #container-inner { width: 1425px; }
#page, #page-inner { width: 1425px; }
#content-inner{width: 1425px;}
#content {margin-left: 0px;}
#header, #header-inner, #header-content, #header-content-inner { width: 1425px; margin left: 0px; }
#content, #content-inner { width: 1425px; margin left: 0px; }
.layout-twt #beta { left: -775px; width: 410px; }
.layout-twt #alpha { width: 775px; left: 410px; }
.layout-twt #alpha-inner { width: 765px; }
.layout-twt #gamma {float: right; width: 220px; }
.layout-twt #gamma-inner {margin-right: 20px; width: 200px; }
#footer, #footer-inner { width: 1425px; }
May. 12th, 2007 11:05 pm (UTC)
We may have been "posting past each other" just then. I just checked in IE7 and it looks OK. However, there are a few extra statements in there, like body , #page, and #footer, that won't do anything; content-inner is in there twice, and it should be "margin-left", not "margin left".
May. 12th, 2007 11:11 pm (UTC)
Thanks, all fixed now - I guess I stared a few hours too long at the code LOL.
I have only IE 6, so maybe that's the reason.

Anyway, many thanks for your help!
May. 12th, 2007 11:48 pm (UTC)
You're welcome. I hope it turned out the way you wanted it.
( 10 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars