Making sub-headers/bylines

I was trying have block of text go below my main on header on my home page (a sub-header, if you will), but I kept encountering problems in terms of styling this block so that it was aesthetically pleasing (or at the very least not disturbingly hideous). I played around with various tags (<div>,<h2>,etc) to find something that worked but to no avail.  Below is what one of the best of the worst iterations I was able to put together looked like (unfortunately, I did not think take screen shots of the really bad ones) :

Screen Shot 2014-02-22 at 10.40.35 AM

I then found out about a class of <div> called “byline.” I edited my html to include a “byline” div within my “header” div so that my code looked like this:

Screen Shot 2014-02-22 at 10.48.42 AM

The results looked like this when I previewed them.

Screen Shot 2014-02-22 at 10.33.35 AM

Although I liked this, I wanted to further distinguish the byline from the header, to I added an <hr> tag to the code (which inserted a line between the two blocks of text):

Screen Shot 2014-02-22 at 10.46.49 AM

The resulting page looked like this:

Screen Shot 2014-02-22 at 10.38.30 AM

While this is still pretty ugly, the “byline” div, combined with the <hr> tag gave me a better point from which to start making the whole thing look nicer.

Sam Rodd


~ by sam rodd on February 22, 2014.

3 Responses to “Making sub-headers/bylines”

  1. This is the best voice because you are very colloquial and honest with the reader when you say comments like, “while this is still very ugly” and “I was trying to do…”. These quotes are important because you show that your trick is a stepping stone for progress. Your voice is very established in that you are helping someone learn a trick that you stumbled upon. You were honest with your situation and a reader would admire you for that.


  2. Hi Sam! I think the blogger voice you use in your post is fantastic. Seriously, you had me at “(or at the very least not disturbingly hideous).” Very relatable especially for a beginner blog where we’re really using this space to learn new things and share that knowledge. I look forward to reading more!

  3. I thought you had a great use of voice in this post. You shared your frustration (especially in the first few lines) with the reader which helps to build a relationship between you and your readers.

Comments are closed.

%d bloggers like this: