Difference between revisions of "Dream Garden layout"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) m |
Foxfirefey (Talk | contribs) (syntax highlighting) |
||
Line 18: | Line 18: | ||
=== Header === | === Header === | ||
− | < | + | <source lang="html4strict"> |
<div id="header"> | <div id="header"> | ||
<div id="titles"> | <div id="titles"> | ||
Line 35: | Line 35: | ||
</div><!-- END CLASS journal-nav --> | </div><!-- END CLASS journal-nav --> | ||
</div><!-- END CLASS header --> | </div><!-- END CLASS header --> | ||
− | </ | + | </source> |
=== Content and Sidebar === | === Content and Sidebar === | ||
− | < | + | <source lang="html4strict"> |
<div id="main"> | <div id="main"> | ||
<div id="content"> | <div id="content"> | ||
Line 47: | Line 47: | ||
SEE SIDEBAR PSUEDOCODE | SEE SIDEBAR PSUEDOCODE | ||
</div><!-- END CLASS sidebar --> | </div><!-- END CLASS sidebar --> | ||
− | </ | + | </source> |
=== Entries === | === Entries === | ||
Line 56: | Line 56: | ||
* guestbook-entry | * guestbook-entry | ||
− | < | + | <source lang="html4strict"> |
<div id="top-pagination" class="pagination"> | <div id="top-pagination" class="pagination"> | ||
<ul> | <ul> | ||
Line 101: | Line 101: | ||
</ul> | </ul> | ||
</div><!-- END CLASS bottom-pagination --> | </div><!-- END CLASS bottom-pagination --> | ||
− | </ | + | </source> |
=== Sidebar === | === Sidebar === | ||
+ | |||
+ | NOTE: Need to rename this, this will not always be to the side. | ||
Possible sidebar-box additional classes: | Possible sidebar-box additional classes: | ||
Line 115: | Line 117: | ||
* middle-sidebox | * middle-sidebox | ||
− | < | + | <source lang="html4strict"> |
<div id="sidebar"> | <div id="sidebar"> | ||
<div class="sidebar-box"> | <div class="sidebar-box"> | ||
Line 122: | Line 124: | ||
</div><!-- END CLASS sidebar-box --> | </div><!-- END CLASS sidebar-box --> | ||
</div><!-- END CLASS sidebar --> | </div><!-- END CLASS sidebar --> | ||
− | </ | + | </source> |
=== Footer === | === Footer === | ||
− | < | + | <source lang="html4strict"> |
<div id="footer"> | <div id="footer"> | ||
WHAT GOES HERE ANYWAY? | WHAT GOES HERE ANYWAY? | ||
</div> | </div> | ||
− | </ | + | </source> |
Revision as of 22:07, 19 June 2008
Designing the HTML CSS ids/classes for a very customizable CSS layout.
Contents
Pseudo-HTML
List of ID classes
- header -- top of the page
- titles -- contains page titles
- journal-nav -- contains menu navigation for the journal
- main -- contains the content and sidebar(s)
- content -- contains content, whether entries or other
- top-pagination -- pagination before entries
- entries -- contains all the entries
- bottom-pagination -- pagination after entries
- sidebar -- sidebar...thingies
- content -- contains content, whether entries or other
- footer -- what goes here anyway?
Header
<div id="header"> <div id="titles"> <h1 id="maintitle"></h1><!-- journal main title --> <h2 id="subtitle"></h2><!-- journal subtitle --> <h2 id="pagetitle"></h2><!-- title of the page we are viewing --> </div><!-- END CLASS title --> <div id="journal-nav"> <ul> <li id="recent-nav" class="active">RECENT</li> <li id="read-nav">READING</li> <li id="archive-nav">ARCHIVE</li> <li id="tag-nav">TAG PAGE? OR SHOULD THIS BE IN SIDEBAR WITH TAGS?</li> <li id="website-nav">WEBSITE</li> </ul> </div><!-- END CLASS journal-nav --> </div><!-- END CLASS header -->
Content and Sidebar
<div id="main"> <div id="content"> CONTAINS CONTENT, WHETHER ENTRIES OR OTHER </div><!-- END CLASS content --> <div id="sidebar"> SEE SIDEBAR PSUEDOCODE </div><!-- END CLASS sidebar -->
Entries
Possible entry classes:
- latest-entry
- guestbook-entry
<div id="top-pagination" class="pagination"> <ul> <li class="page-back">BACK</li> <li class="to-bottom">BOTTOM</li> <li class="page-forward">FORWARD</li> </ul> </div><!-- END CLASS top-pagination --> <div id="entries"> <div class="entry"> <div class="entry-label"> <div class="entry-title"></div> <div class="entry-date"></div> </div><!-- END CLASS entry-label --> <div class="entry-poster"> <div class-"entry-poster-info"> <div class="entry-poster-icon"></div> <div class="entry-poster-name"></div> </div><!-- END CLASS entry-poster-info --> <div class="entry-comm-info"> <div class="entry-comm-icon"></div> <div class="entry-comm-name"></div> </div><!-- END CLASS entry-comm-info --> </div><!-- END CLASS entry-poster --> <div class="entry-content"> ENTRY CONTENT GOES HERE </div><!-- END CLASS entry-content --> <div class="entry-meta"> </div><!-- END CLASS entry-meta --> <div class="entry-tags"> </div><!-- END CLASS entry-tags --> <div class="entry-actions"> <ul> <li class="edit-entry"></li> </ul> </div><!-- END CLASS entry-actions --> </div><!-- END CLASS entry --> </div><!-- END CLASS entries --> <div id="bottom-pagination" class="pagination"> <ul> <li class="page-back">BACK</li> <li class="to-top">TOP</li> <li class="page-forward">FORWARD</li> </ul> </div><!-- END CLASS bottom-pagination -->
Sidebar
NOTE: Need to rename this, this will not always be to the side.
Possible sidebar-box additional classes:
- calendar
- free-text
- link-list
- tag-box
- first-sidebox (since some browsers do not do selectors well)
- last-sidebox
- middle-sidebox
<div id="sidebar"> <div class="sidebar-box"> <h3 class="sidebar-box-title"> <div class="sidebar-box-contents"></div> </div><!-- END CLASS sidebar-box --> </div><!-- END CLASS sidebar -->
<div id="footer"> WHAT GOES HERE ANYWAY? </div>