PROJECT REDSTAR: SITE DEVELOPMENT (CATEGORY HEADERS)

I felt that the category headers looked a bit plain and isolated, so I decided to play around with adding the red star from the logo to each header.  I decided to try to add this through CSS as a background image to the div containing the category titles so that I could keep the actual titles in HTML rather than have the text of the titles as part of the imported image (as I assume this will be beneficial with regards to SEO).

First I created an image of just the star, and added opacity.  When saving for web, I noticed that PNG-8 converts the opacitated (not a real word – but should be!) image to the flat colour equivalent, whereas saving as PNG-24 keeps the opacity.  This is interesting and will no doubt be relevant to future projects.  However, in this instance the image will be sitting behind the HTML text and therefore the converted image will be fine:

Image

 

I set the star image to show as a background to the actual containing div:

background-image:url(../images/title_bg_star.png);
background-position:center;
background-repeat:no-repeat;

Image

I was pleased with the effect on the titles that are made up of a single word, but the central star makes multiple worded titles look off centre:

Image

I decided to try manually adjusting each necessary h2 tag individually with a margin-left setting, 

Image

However, this still doesn’t look good, so I have decided to try out having the star show to the left hand side rather than centrally.

Image

  This looks too sparse so I try moving aligning the titles to the left also:

Image

Image

…hmmm, I still don’t like the overall balance so I have decided to go back to square one.

I decided to change all of the category titles to one word only (which matches the titles in the nav bar), then add the additional words to an <h3> tag:

Image

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s