Difference between revisions of "Dream Garden layout"

From Dreamwidth Notes
Jump to: navigation, search
m (→‎Header)
m
 
(11 intermediate revisions by 8 users not shown)
Line 24: Line 24:
 
     <div id="subtitle"><h2>SUBTITLE</h2></div><!-- journal subtitle -->
 
     <div id="subtitle"><h2>SUBTITLE</h2></div><!-- journal subtitle -->
 
     <div id="pagetitle"><h2>PAGETITLE</h2></div><!-- 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">
Line 41: Line 42:
 
</div><!-- END CLASS header -->
 
</div><!-- END CLASS header -->
 
</source>
 
</source>
 +
 +
: 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 ===
 
=== Content and Modules ===
Line 50: Line 57:
 
   </div><!-- END CLASS content -->
 
   </div><!-- END CLASS content -->
 
   <div id="modules">
 
   <div id="modules">
−
     <!-- SEE MODULES PSUEDOCODE -->
+
     <!-- SEE MODULES PSEUDOCODE -->
 
   </div><!-- END CLASS modules -->
 
   </div><!-- END CLASS modules -->
 
</source>
 
</source>
Line 80: Line 87:
 
     </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 93: 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">
Line 192: Line 200:
 
* Fun quote or saying?
 
* Fun quote or saying?
 
* When the page was loaded for the viewer (like in Smooth Sailing)?
 
* 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">
Line 198: Line 208:
 
</div><!-- END CLASS footer -->
 
</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"