View Single Post
Old 06-21-2010, 12:19 AM   #108
HamsterRage
Evangelist
HamsterRage can name that song in three notesHamsterRage can name that song in three notesHamsterRage can name that song in three notesHamsterRage can name that song in three notesHamsterRage can name that song in three notesHamsterRage can name that song in three notesHamsterRage can name that song in three notesHamsterRage can name that song in three notesHamsterRage can name that song in three notesHamsterRage can name that song in three notesHamsterRage can name that song in three notes
 
HamsterRage's Avatar
 
Posts: 435
Karma: 24326
Join Date: Jun 2010
Device: Kobo
Pretty Chapter Heading

I won't claim to have thought this up myself. It draws a nice box around the header, with a big number and a subtitle for the chapter:

Code:
.chapterHeader {
  height:60px;
  border:1px solid #000;
  display:block;
  margin-bottom:20px;
  background-color:#FFF;}
  
.chapterHeader .translation {
  float:left;
  font-weight: normal;
  margin-top:38px;
  margin-left: -8px;
  margin-bottom: 0px;
  padding-right: 16px;
  padding-left: 5px ;
  padding-bottom: 0px;
  padding-top: 0px;
  font-size:26px;
  background-color:#FFF;}
                             
.chapterHeader .count {
  line-height: 100%;
  font-style:normal;
  font-weight: normal;
  text-transform:uppercase;
  font-size:94px;
  margin-right:18px;
  margin-top:-14px;
  margin-bottom: -20px;
  float:left;
  padding:0px;
  background-color:#FFF;}
And here's the the markup for the header itself:

Code:
  <div class="body chapter" id="chapter">
    <h2 id="heading_id_2"><span class="chapterHeader"><span class="translation">Chapter</span> <span class="count">1</span></span> Chapter Subtitle</h2>
HamsterRage is offline   Reply With Quote