Styles Page

THIS ENTIRE PAGE NEEDS TO BE CONVERTED TO CSS (ALL ELEMENTS) – NOTES BELOW:

NOTES:

None of the styles below should be dependent on being in a particular DIV, they should work in all scenarios, regardless of DIV wrapper. Any inline CSS on this page should be move to a style sheet. Antiquated ways of doing things like manual centering should be moved to style sheets as well.

The rest of the page elements (header, footer, sidebar, etc) need to be converted to CSS out of the tables they are in. Header, navigation and footer flow full screen while the main content area is fixed and centered. The navigation should have a CSS element that adds the tiny arrow under the appropriate navigation element (currently under beer blog). There is already a CSS file for the site that handles mostly text elements you can build off, located here (feel free to update any of my antiquated, hacked ways of doing things to more modern code):

http://www.thebeerfathers.com/wp-content/themes/thebeerfathers/style.css

I want to get the entire site away from nested tables. The only table should be the data table below marked “Real Table.”

There are spots for Google AdSense ads under the header and above the footer that should remain there ready for me to paste in their embed code.

The “Beers Reviewed” box on the right of the page under the beer glass photo will be continually updated based on the number of posts – so that middle number is variable.

If you have any questions email me at johneklund@gmail.com

END NOTES

H1 Linked

H1 Not Linked

H2 Text

Byline (# of Comments)

Normal paragraph text – link style vegan cray jean shorts, high life +1 narwhal ethnic sartorial shoreditch locavore hoodie salvia. Bushwick cosby sweater yr, polaroid +1 portland you probably haven’t heard of them butcher tofu. Pinterest stumptown keffiyeh squid american apparel. Single-origin coffee craft beer mustache, art party Austin direct trade locavore aesthetic pop-up bicycle rights vinyl VHS swag. Helvetica lo-fi vice, narwhal bicycle rights you probably haven’t heard of them brunch pinterest cred odd future. Cray hella food truck, yr single-origin coffee aesthetic messenger bag pork belly tofu retro ethnic. Readymade cardigan aesthetic, kale chips skateboard irony DIY mcsweeney’s artisan shoreditch ennui butcher lo-fi.

Beer LoveImage right aligned here. Vegan cray jean shorts, high life +1 narwhal ethnic sartorial shoreditch locavore hoodie salvia. Bushwick cosby sweater yr, polaroid +1 portland you probably haven’t heard of them butcher tofu. Pinterest stumptown keffiyeh squid american apparel. Single-origin coffee craft beer mustache, art party Austin direct trade locavore aesthetic pop-up bicycle rights vinyl VHS swag. Helvetica lo-fi vice, narwhal bicycle rights you probably haven’t heard of them brunch pinterest cred odd future. Cray hella food truck, yr single-origin coffee aesthetic messenger bag pork belly tofu retro ethnic. Readymade cardigan aesthetic, kale chips skateboard irony DIY mcsweeney’s artisan shoreditch ennui butcher lo-fi.

Vegan cray jean shorts, high life +1 narwhal ethnic sartorial shoreditch locavore hoodie salvia. Bushwick cosby sweater yr, polaroid +1 portland you probably haven’t heard of them butcher tofu. Pinterest stumptown keffiyeh squid american apparel. Single-origin coffee craft beer mustache, art party Austin direct trade locavore aesthetic pop-up bicycle rights vinyl VHS swag. Helvetica lo-fi vice, narwhal bicycle rights you probably haven’t heard of them brunch pinterest cred odd future. Cray hella food truck, yr single-origin coffee aesthetic messenger bag pork belly tofu retro ethnic. Readymade cardigan aesthetic, kale chips skateboard irony DIY mcsweeney’s artisan shoreditch ennui butcher lo-fi.

Beer LoveImage left aligned here. Vegan cray jean shorts, high life +1 narwhal ethnic sartorial shoreditch locavore hoodie salvia. Bushwick cosby sweater yr, polaroid +1 portland you probably haven’t heard of them butcher tofu. Pinterest stumptown keffiyeh squid american apparel. Single-origin coffee craft beer mustache, art party Austin direct trade locavore aesthetic pop-up bicycle rights vinyl VHS swag. Helvetica lo-fi vice, narwhal bicycle rights you probably haven’t heard of them brunch pinterest cred odd future. Cray hella food truck, yr single-origin coffee aesthetic messenger bag pork belly tofu retro ethnic. Readymade cardigan aesthetic, kale chips skateboard irony DIY mcsweeney’s artisan shoreditch ennui butcher lo-fi.

Blockquote style – Vice ethnic cardigan artisan, quinoa jean shorts bicycle rights odd future you probably haven’t heard of them food truck wolf tumblr. Etsy raw denim post-ironic, +1 forage aesthetic Austin four loko gastropub sriracha. Austin before they sold out locavore tofu, squid lo-fi ethical hoodie direct trade. Master cleanse locavore pour-over, mumblecore occupy fanny pack leggings vegan thundercats four loko fixie pop-up high life. Bespoke VHS pinterest vegan four loko, street art butcher brooklyn locavore put a bird on it readymade sartorial helvetica tattooed. Cred wes anderson small batch, tumblr bushwick viral flexitarian PBR mustache. Pour-over cardigan viral forage godard, freegan biodiesel skateboard sustainable portland.

Bolded Text Here:

  1. Regular OL/LI listings…
  2. Regular OL/LI listings bolded…

Bold Italic Text Here:

  • Regular UL/LI listings…
  • Regular UL/LI listings bolded…

Italic text here

  • Text Link – Blockquote inside a UL/LI below:

    XX xxxxx
    XX xxxxx
    XX xxxxx

## Comments (Add Your Comments)

  1. The man with 33 fingers says:

    You have to give it some points just for the 5%.

  2. The man with no name says:

    I agree wholeheartedly that Coors Banquet was made to be drunk out of the can itself- bottles and glasses just will not suffice. While it certainly may not be the “best” beer in the world, it is nonetheless my beer of choice; and I will continue to purchase this legendary beer that everyone else seemingly ignores as the black sheep of beer, until the production of Coors Banquet is stifled altogether.

Add Your Comments






(Note: You need to have both JavaScript and cookies enabled on your web browser to post a comment. Sorry, but it cuts way down on spam!)

Centered Video Embed:

Real Table That Should Remain a Table:

#Xxxxxx XxxxxxXxxxxx XxxxxxXxxxxx XxxxxxXxxxxx Xxxxxx
##Xxxxxx XxxxxxXxxxxx XxxxxxXxxxxx XxxxxxXxxxxx Xxxxxx
##Xxxxxx XxxxxxXxxxxx XxxxxxXxxxxx XxxxxxXxxxxx Xxxxxx
##Xxxxxx XxxxxxXxxxxx XxxxxxXxxxxx XxxxxxXxxxxx Xxxxxx
##Xxxxxx XxxxxxXxxxxx XxxxxxXxxxxx XxxxxxXxxxxx Xxxxxx

Edit link for authors

Summary H2 Statement: # out of ## (?)

Comment, interact, socialize link…

Beer ratings table blocks below – this is currently done with nested tables but needs to be CSS. The large number in each category is variable based on how many posts are in that category. I’d like each of the entire blocks clickable. Styles should be move to stylesheet.

 
 
 

What do the
ratings mean?

This is a centered dropdown:

Beer Styles dropdown:

This is a table now, but should be CSS instead:

It will have a title in this orange box.
And a variable amount of text in this box. We need to accommodate a variety of different lengths of text here. This part should expand/constrict with the text flow.

Here is a special DIV below:

Intro Text Style Here in DIV…
Helper text here in SPAN (still in DIV)…

Centered image below:

Beer Review Form

The BeerFathers Sample Beer Rating Sheet

Download the Beer Review Form (PDF – 44KB)

Another centered image:

The BeerFathers Ratings Distribution

Another image with call out box around it:

Beer Float

Getting ready for the beer floats with Blue Bell Homemade Vanilla ice cream

Looking for more? Visit the Beer Blog Archives.

Page Links: