Difference between revisions of "Dream Garden layout"

From Dreamwidth Notes
Jump to: navigation, search
(syntax highlighting)
m
 
(28 intermediate revisions by 9 users not shown)
Line 8: Line 8:
 
** titles -- contains page titles
 
** titles -- contains page titles
 
** journal-nav -- contains menu navigation for the journal
 
** journal-nav -- contains menu navigation for the journal
−
* main -- contains the content and sidebar(s)
+
* body -- contains the content and sidebar(s)
 
** content -- contains content, whether entries or other
 
** content -- contains content, whether entries or other
−
*** top-pagination -- pagination before entries
+
*** content-header -- pagination before entries
−
*** entries -- contains all the entries
+
*** content-main -- contains all the entries
−
*** bottom-pagination -- pagination after entries
+
*** content-footer -- pagination after entries
−
** sidebar -- sidebar...thingies
+
** modules -- contains modules, usually to the side
 
* footer -- what goes here anyway?
 
* footer -- what goes here anyway?
  
Line 21: Line 21:
 
<div id="header">
 
<div id="header">
 
   <div id="titles">
 
   <div id="titles">
−
     <h1 id="maintitle"></h1><!-- journal main title -->
+
     <div id="maintitle"><h1>TITLE</h1></div><!-- journal main title -->
−
     <h2 id="subtitle"></h2><!-- journal subtitle -->
+
     <div id="subtitle"><h2>SUBTITLE</h2></div><!-- journal subtitle -->
−
     <h2 id="pagetitle"></h2><!-- title of the page we are viewing -->
+
     <div id="pagetitle"><h2>PAGETITLE</h2></div><!-- title of the page we are viewing -->
 +
<!-- Why are the titles in divs? Why not just assign the ids to the h* elements? -->
 
   </div><!-- END CLASS title -->
 
   </div><!-- END CLASS title -->
 
   <div id="journal-nav">
 
   <div id="journal-nav">
 
     <ul>
 
     <ul>
 +
      <!-- Should these be IDs or classes?  Can we expect more than one? -->
 +
      <li id="profile-nav">PROFILE</li>
 
       <li id="recent-nav" class="active">RECENT</li>
 
       <li id="recent-nav" class="active">RECENT</li>
 
       <li id="read-nav">READING</li>
 
       <li id="read-nav">READING</li>
Line 32: Line 35:
 
       <li id="tag-nav">TAG PAGE? OR SHOULD THIS BE IN SIDEBAR WITH TAGS?</li>
 
       <li id="tag-nav">TAG PAGE? OR SHOULD THIS BE IN SIDEBAR WITH TAGS?</li>
 
       <li id="website-nav">WEBSITE</li>
 
       <li id="website-nav">WEBSITE</li>
 +
      <li id="bookmark-nav">BOOKMARKS</li>
 +
      <li id="gallery-nav">GALLERY</li>
 +
      <li id="guestbook-nav">GUESTBOOK</li>
 
     </ul>
 
     </ul>
 
   </div><!-- END CLASS journal-nav -->
 
   </div><!-- END CLASS journal-nav -->
Line 37: Line 43:
 
</source>
 
</source>
  
−
=== Content and Sidebar ===
+
: Re the divs around the headers, I find it easier to style a div than a header tag, and since headers are block elements too it doesn't have an impact on the flow of position; but perhaps an -inner or -header ID could be added to the headers themselves for those who design opposite.  The IDs on the list items also seem like they should, perhaps, have both?  Some of those links look like things that should/would appear in the sidebar as well, so having a class common to both would let someone style similar destinations all alike.  But other people will want to style the header links in a particular way, so keeping IDs attached to those seems wise. [[User:Branchandroot|branchandroot]] 20:14, 16 February 2009 (UTC)
 +
 
 +
:: I don't quite understand what you mean about it being easier to style a div than a header. They're both block-level elements, and having one block level element inside another block level element, to me, just increases the chance of messing up the border/padding/margin logic. I also question making the element class'd as journal-nav a div, rather than the UL which is all the div contains. (Unless the journal-nav class might be reapplied on the sidebar, with something other than a UL?) --[[User:Zvi-likes-tv|Zvi-likes-tv]] 05:55, 17 February 2009 (UTC)
 +
 
 +
::: It's a designer-specific preference in approach.  Personally, I really prefer to have a div around things like headers and uls, especially if I'm playing with backgrounds for them.  Other people prefer to work the other way around.  Since an unused div makes no difference, I don't see any drawback to supplying the wherewithal for both kinds of designers to work to their preferences. [[User:Branchandroot|branchandroot]] 03:46, 18 February 2009 (UTC)
 +
 
 +
=== Content and Modules ===
  
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<div id="main">
+
<div id="body">
 
   <div id="content">
 
   <div id="content">
−
     CONTAINS CONTENT, WHETHER ENTRIES OR OTHER
+
     <!-- CONTAINS CONTENT, WHETHER ENTRIES OR OTHER -->
 
   </div><!-- END CLASS content -->
 
   </div><!-- END CLASS content -->
−
   <div id="sidebar">
+
   <div id="modules">
−
     SEE SIDEBAR PSUEDOCODE
+
     <!-- SEE MODULES PSEUDOCODE -->
−
   </div><!-- END CLASS sidebar -->
+
   </div><!-- END CLASS modules -->
 
</source>
 
</source>
  
 
=== Entries ===
 
=== Entries ===
 +
 +
Can be used for the recent post page, the reading page, and day views.
  
 
Possible entry classes:
 
Possible entry classes:
Line 57: Line 71:
  
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<div id="top-pagination" class="pagination">
+
<div id="content-header" class="pagination">
 
   <ul>
 
   <ul>
 
     <li class="page-back">BACK</li>
 
     <li class="page-back">BACK</li>
Line 64: Line 78:
 
   </ul>
 
   </ul>
 
</div><!-- END CLASS top-pagination -->
 
</div><!-- END CLASS top-pagination -->
−
<div id="entries">
+
<div id="content-main" class="entries">
 
   <div class="entry">
 
   <div class="entry">
 
     <div class="entry-label">
 
     <div class="entry-label">
−
       <div class="entry-title"></div>
+
       <div class="entry-filter"><!-- Security icons/text goes here --></div>
 
       <div class="entry-date"></div>
 
       <div class="entry-date"></div>
 +
      <div class="entry-subject"></div>
 +
      <div class="entry-groups"></div>
 
     </div><!-- END CLASS entry-label -->
 
     </div><!-- END CLASS entry-label -->
 
     <div class="entry-poster">
 
     <div class="entry-poster">
−
       <div class-"entry-poster-info">
+
       <div class="entry-poster-info">
 
         <div class="entry-poster-icon"></div>
 
         <div class="entry-poster-icon"></div>
 
         <div class="entry-poster-name"></div>
 
         <div class="entry-poster-name"></div>
Line 84: Line 100:
 
     </div><!-- END CLASS entry-content -->
 
     </div><!-- END CLASS entry-content -->
 
     <div class="entry-meta">
 
     <div class="entry-meta">
 +
      <!-- preferably mood, music, custom groups are broken in list items -->
 
     </div><!-- END CLASS entry-meta -->
 
     </div><!-- END CLASS entry-meta -->
 
     <div class="entry-tags">
 
     <div class="entry-tags">
 
     </div><!-- END CLASS entry-tags -->
 
     </div><!-- END CLASS entry-tags -->
 
     <div class="entry-actions">
 
     <div class="entry-actions">
 +
      <!-- NOTE: Which of these actions will be relevant? -->
 
       <ul>
 
       <ul>
 +
        <li class="numcomments-entry"></li>
 +
        <li class="comment-entry"></li>
 +
        <li class="link-entry"></li>
 
         <li class="edit-entry"></li>
 
         <li class="edit-entry"></li>
 +
        <li class="tag-entry"></li>
 +
        <li class="bookmark-entry"></li>
 +
        <li class="track-entry"></li>
 +
        <li class="tell-entry"></li>
 +
        <li class="flag-entry"></li>
 
       </ul>
 
       </ul>
 
     </div><!-- END CLASS entry-actions -->
 
     </div><!-- END CLASS entry-actions -->
 
   </div><!-- END CLASS entry -->
 
   </div><!-- END CLASS entry -->
 +
<div class="entry-separator"></div><!-- for usefulness -->
 
</div><!-- END CLASS entries -->
 
</div><!-- END CLASS entries -->
−
<div id="bottom-pagination" class="pagination">
+
<div id="content-footer" class="pagination">
 
   <ul>
 
   <ul>
 
     <li class="page-back">BACK</li>
 
     <li class="page-back">BACK</li>
Line 103: Line 130:
 
</source>
 
</source>
  
−
=== Sidebar ===
+
=== Entry/Comments ===
  
−
NOTE: Need to rename this, this will not always be to the side.
+
<source lang="html4strict">
 +
<div class="single-entry">
 +
  <div class="entry">
 +
    <!-- see above -->
 +
  </div>
 +
</div><!-- END CLASS single-entry -->
 +
<div class="entry-comments">
 +
  <div class="comment comment-toplevel">
 +
    <div class="comment-info">
 +
      <div class="comment-subject"></div>
 +
      <div class="comment-date"></div>
 +
      <div class="comment-poster">
 +
        <div class="comment-poster-icon"></div>
 +
        <div class="comment-poster-name"></div>
 +
        <div class="comment-poster-ip"></div>
 +
      </div><!-- END CLASS comment-poster -->
 +
      <div class="comment-status">
 +
        <!-- Contains all the screen, delete, etc. -->
 +
      </div><!-- END CLASS comment-status -->
 +
    </div>
 +
    <div class="comment-content">
 +
    </div><!-- END CLASS comment-content -->
 +
    <div class="comment-threads">
 +
      <!-- Contains reply, thread, expand -->
 +
    </div><!-- END CLASS comment-threads -->
 +
    <div class="comment comment-evenlevel">
 +
      ...
 +
      <div class="comment comment-oddlevel">
 +
        ...
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="comment-select-links"></div>
 +
</div>
 +
</source>
  
−
Possible sidebar-box additional classes:  
+
=== Archive ===
 +
 
 +
=== Tags ===
 +
 
 +
=== Modules ===
 +
 
 +
Possible module-box additional classes:  
  
 
* calendar
 
* calendar
Line 118: Line 185:
  
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<div id="sidebar">
+
<div id="modules">
−
   <div class="sidebar-box">
+
   <div class="modbox">
−
     <h3 class="sidebar-box-title">
+
     <h3 class="modbox-title"></h3>
−
     <div class="sidebar-box-contents"></div>
+
     <div class="modbox-contents"></div>
−
   </div><!-- END CLASS sidebar-box -->
+
   </div><!-- END CLASS modbox -->
−
</div><!-- END CLASS sidebar -->
+
</div><!-- END CLASS modules -->
 
</source>
 
</source>
  
 
=== Footer ===
 
=== Footer ===
 +
 +
What to put here?
 +
 +
* Design credits?
 +
* Fun quote or saying?
 +
* When the page was loaded for the viewer (like in Smooth Sailing)?
 +
* Name of style/variant (would this help support people?)
 +
* Graphic?  (If it's floatable maybe some sort of foreground image e.g. a skyline or landscape)
  
 
<source lang="html4strict">
 
<source lang="html4strict">
 
<div id="footer">
 
<div id="footer">
 
WHAT GOES HERE ANYWAY?
 
WHAT GOES HERE ANYWAY?
−
</div>
+
</div><!-- END CLASS footer -->
 
</source>
 
</source>
 +
 +
[[Category: Obsolete]]

Latest revision as of 03:34, 4 May 2009

Designing the HTML CSS ids/classes for a very customizable CSS layout.

Pseudo-HTML

List of ID classes

  • header -- top of the page
    • titles -- contains page titles
    • journal-nav -- contains menu navigation for the journal
  • body -- contains the content and sidebar(s)
    • content -- contains content, whether entries or other
      • content-header -- pagination before entries
      • content-main -- contains all the entries
      • content-footer -- pagination after entries
    • modules -- contains modules, usually to the side
  • footer -- what goes here anyway?

Header

<div id="header">
  <div id="titles">
    <div id="maintitle"><h1>TITLE</h1></div><!-- journal main title -->
    <div id="subtitle"><h2>SUBTITLE</h2></div><!-- journal subtitle -->
    <div id="pagetitle"><h2>PAGETITLE</h2></div><!-- title of the page we are viewing -->
<!-- Why are the titles in divs? Why not just assign the ids to the h* elements? -->
  </div><!-- END CLASS title -->
  <div id="journal-nav">
    <ul>
      <!-- Should these be IDs or classes?  Can we expect more than one? -->
      <li id="profile-nav">PROFILE</li>
      <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>
      <li id="bookmark-nav">BOOKMARKS</li>
      <li id="gallery-nav">GALLERY</li>
      <li id="guestbook-nav">GUESTBOOK</li>
    </ul>
  </div><!-- END CLASS journal-nav -->
</div><!-- END CLASS header -->
Re the divs around the headers, I find it easier to style a div than a header tag, and since headers are block elements too it doesn't have an impact on the flow of position; but perhaps an -inner or -header ID could be added to the headers themselves for those who design opposite. The IDs on the list items also seem like they should, perhaps, have both? Some of those links look like things that should/would appear in the sidebar as well, so having a class common to both would let someone style similar destinations all alike. But other people will want to style the header links in a particular way, so keeping IDs attached to those seems wise. branchandroot 20:14, 16 February 2009 (UTC)
I don't quite understand what you mean about it being easier to style a div than a header. They're both block-level elements, and having one block level element inside another block level element, to me, just increases the chance of messing up the border/padding/margin logic. I also question making the element class'd as journal-nav a div, rather than the UL which is all the div contains. (Unless the journal-nav class might be reapplied on the sidebar, with something other than a UL?) --Zvi-likes-tv 05:55, 17 February 2009 (UTC)
It's a designer-specific preference in approach. Personally, I really prefer to have a div around things like headers and uls, especially if I'm playing with backgrounds for them. Other people prefer to work the other way around. Since an unused div makes no difference, I don't see any drawback to supplying the wherewithal for both kinds of designers to work to their preferences. branchandroot 03:46, 18 February 2009 (UTC)

Content and Modules

<div id="body">
  <div id="content">
    <!-- CONTAINS CONTENT, WHETHER ENTRIES OR OTHER -->
  </div><!-- END CLASS content -->
  <div id="modules">
     <!-- SEE MODULES PSEUDOCODE -->
  </div><!-- END CLASS modules -->

Entries

Can be used for the recent post page, the reading page, and day views.

Possible entry classes:

  • latest-entry
  • guestbook-entry 
<div id="content-header" 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="content-main" class="entries">
  <div class="entry">
    <div class="entry-label">
      <div class="entry-filter"><!-- Security icons/text goes here --></div>
      <div class="entry-date"></div>
      <div class="entry-subject"></div>
      <div class="entry-groups"></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">
      <!-- preferably mood, music, custom groups are broken in list items -->
    </div><!-- END CLASS entry-meta -->
    <div class="entry-tags">
    </div><!-- END CLASS entry-tags -->
    <div class="entry-actions">
      <!-- NOTE: Which of these actions will be relevant? -->
      <ul>
        <li class="numcomments-entry"></li>
        <li class="comment-entry"></li>
        <li class="link-entry"></li>
        <li class="edit-entry"></li>
        <li class="tag-entry"></li>
        <li class="bookmark-entry"></li>
        <li class="track-entry"></li>
        <li class="tell-entry"></li>
        <li class="flag-entry"></li>
      </ul>
    </div><!-- END CLASS entry-actions -->
  </div><!-- END CLASS entry -->
<div class="entry-separator"></div><!-- for usefulness -->
</div><!-- END CLASS entries -->
<div id="content-footer" 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 -->

Entry/Comments

<div class="single-entry">
  <div class="entry">
    <!-- see above -->
  </div>
</div><!-- END CLASS single-entry -->
<div class="entry-comments">
  <div class="comment comment-toplevel">
    <div class="comment-info">
      <div class="comment-subject"></div>
      <div class="comment-date"></div>
      <div class="comment-poster">
        <div class="comment-poster-icon"></div>
        <div class="comment-poster-name"></div>
        <div class="comment-poster-ip"></div>
      </div><!-- END CLASS comment-poster -->
      <div class="comment-status">
        <!-- Contains all the screen, delete, etc. -->
      </div><!-- END CLASS comment-status -->
    </div>
    <div class="comment-content">
    </div><!-- END CLASS comment-content -->
    <div class="comment-threads">
      <!-- Contains reply, thread, expand -->
    </div><!-- END CLASS comment-threads -->
    <div class="comment comment-evenlevel">
      ...
      <div class="comment comment-oddlevel">
        ...
      </div>
    </div>
  </div>
  <div class="comment-select-links"></div>
</div>

Archive

Tags

Modules

Possible module-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="modules">
  <div class="modbox">
    <h3 class="modbox-title"></h3>
    <div class="modbox-contents"></div>
  </div><!-- END CLASS modbox -->
</div><!-- END CLASS modules -->

Footer

What to put here?

  • Design credits?
  • Fun quote or saying?
  • When the page was loaded for the viewer (like in Smooth Sailing)?
  • Name of style/variant (would this help support people?)
  • Graphic? (If it's floatable maybe some sort of foreground image e.g. a skyline or landscape) 
<div id="footer">
WHAT GOES HERE ANYWAY?
</div><!-- END CLASS footer -->
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=Dream_Garden_layout&oldid=4796"