[Pmwiki-users] CSS layout in pmwiki-0.6

John Rankin john.rankin
Sun Jan 18 20:47:11 CST 2004


> So I don't understand how to define once "this is how wide the body is,
> this is how wide the side menu is" and have it change all the affected
> layout elements. Of course, that's what styles are for, I just can't see
> how to do it right now.

Oh.  Well, I'll start with a few CSS lines and examples from the new layout 
scheme and we can work to more difficult questions from there.  To set 
the overall width of the HTML layout (formerly in $BodyWidth), one just 
sets the width of the <body> tag:
   body { width:760px; }

The left side menu is held in a table cell called 'wikileft', and we can
set its width directly.
   #wikileft { width:120px; }

The table cell that contains the wikititle and wikitext is called 'wikibody',
and it's pretty well constrained to take up the remaining horizontal space,
so its width is automatically determined (640px in this case).  However, we 
probably don't want the page text to run right up against the left menu, 
so we can add margin or some padding on the left side
   #wikibody { padding-left:10px; }

and, of course, we can explicitly set the width of #wikibody 
having it computed automatically isn't working
   #wikibody { width:640px; }

That's really all there is to it--everything else appears to pretty
much work after that, at least from the various tests I've run.
But I bet there are still lots of skeletons in the CSS closet, so I'm
hoping people will help me find where things don't seem to work right.

===
Ah, but...

I'd like a page where the header and footer left columns are also the width 
of wikileft, so there is vertical alignment of page elements.

At the moment, I do this with a $SideWidth = 120; statement. If I change
this, all the places that use it of course adjust themselves.

So I guess the answer is to change the above to

   .wikileft { width: 120px; }

and use the .wikileft class wherever I need to. 

JR
===

Pm

--
Pmwiki-users mailing list
Pmwiki-users at pmichaud.com
http://pmichaud.com/mailman/listinfo/pmwiki-users_pmichaud.com






More information about the pmwiki-users mailing list