?

Log in

No account? Create an account

Previous Entry | Next Entry

Hi!

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.

Comments

( 10 comments — Leave a comment )
av8rmike
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?
mygothangel
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.
av8rmike
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? ;)
mygothangel
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".
av8rmike
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.
mygothangel
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!
mygothangel
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; }
av8rmike
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".
mygothangel
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!
av8rmike
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
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars