Revision [8692]

This is an old revision of WikkaSkinOptimization made by JavaWoman on 2005-05-29 12:19:41.

 

A new layout for Wikka?

Last edited by JavaWoman:
adding category
Sun, 29 May 2005 12:19 UTC [diff]


Related pages:
 


For several reasons the HTML output produced by Wikka does not allow optimal control on the layout.
Before installing skins, I'd like to discuss some ideas for a better template. Proposed modification are highlighted, feel free to add your comments and/or other proposals.

<html>
<body>
<div id="page"> (new wrapper, was called container in previous draft)
<div id="header"> (id instead of class)
<h2> PageTitle </h2>
<ul id="main_menu"> (WikkaMenus *)
<li>menu item</li>
</ul>
</div>
<div id="content"> (currently called page, id instead of class)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog (main content)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
</div>
<div id="comments"> (new wrapper)
</div>
<div id="commentsheader"> (id instead of class)
</div>
<div class="comment">
</div>
<div class="comment">
</div>
...
</div>
<div id="commentform"> (id instead of class)
</div>
</div>
<div id="footer"> (id instead of class)
<ul id="footer_menu"> (WikkaMenus *)
<li>menu item</li>
</ul>
<div class="smallprint">
</div>
<div id="microtime"> (new class for formatting (or masking) the microtime information)
</div>
</div>
</div>
</body>
</html>



Your ideas?

-- DarTar

A different "view"
Taking your code, and annotating it a bit, to try and explain to myself how it's structured and what might be in which (partial) "template". (Doing that, I also found an extra </div> which I've removed.)

<!-- BEGIN doc open -->
<!DOCTYPE....>
<html>
<!-- END doc open -->
<!-- BEGIN head (only head section) -->
<head>
    <!-- head elements here -->
</head>
<!-- END head -->
<!-- BEGIN body (whole body section) -->
<body>
<!-- BEGIN page header -->
    <div id="page"> <!--new wrapper, was called //container// in previous draft-->
        <div id="header"> <!--//id// instead of //class//-->
            <h1 id="hn_main">PageTitle</h1>
            <ul id="main_menu">' <!--[[WikkaMenus *]]-->
                <li>menu item</li>
                ...
            </ul>
        </div><!-- end div "header" -->
<!-- END page header -->
<!-- BEGIN page content -->    
        <div id="content"> <!--currently called //page//, //id// instead of //class//-->
        The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog  (main content)
        The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog
        </div><!-- end div "content" -->
        <div id="comments"> <!--new wrapper-->
            <div id="commentheader"> <!--//id// instead of //class//-->
            </div>
            <div id="commentlist">
                <div class="comment">
                </div>
                <div class="comment">
                </div>
                ...
            </div><!-- end div "commentlist" -->
            <div id="commentform"> <!--//id// instead of //class//-->
                <!-- (form here) -->
            </div><!-- end div "commentform" -->
        </div><!-- end div "comments" -->
<!-- END page content -->
<!-- BEGIN page footer -->
        <div id="footer"> <!--//id// instead of //class//-->
            <ul id="extra_menu"> <!--[[WikkaMenus *]]--><!--name should not suggest position-->
                <li>menu item</li>
                ...
            </ul>
            <div class="smallprint">
            </div>
            <div id="microtime"> <!--new id for formatting (or masking) the microtime information-->
            </div>
        </div><!-- end div "footer" -->
    </div><!-- end div "page" -->
<!-- END page footer -->
</body>
<!-- END body -->
<!-- BEGIN doc close -->
</html>
<!-- END doc close -->


Hope it's clear what I'm trying to do... if not, let me know. We definitely should move to a better structure, both in generated code as well as in which parts of PHP code do the generating. More later... --JavaWoman

Small tweak: wrapped comments in a div as well which may help in styling. And main heading properly a h1, with id. Small id name changes. --JavaWoman


CategoryDevelopmentDiscussion CategoryLayout
There are 18 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki