#css struggles (April 7 – 14)

Accomplishments for the week: Fixed the navigation bar, as suggested in class, and jumped in on building the templates for the recipe pages.

Fun fact: some coding is not as straight-forward as it should be. At first, I was reluctant to have a horizontal navigational bar. Not because I thought the original vertical was better – I knew it added a lot of additional white (purple?) space that I wasn’t fond of myself – but because I didn’t know how easy it’d be to make it centered. Centering horizontal bars was something never really covered in my web design class, and W3Schools didn’t provide a clear answer this time. Luckily, I found Picnic Website Code Tutorials with not one, but six different ways to get around this obstacle. I ended up going with method number 4 – and then had to eyeball what center actually was when setting the navigation width, because that part wasn’t a simple 800 px like the container the navigation existed in. After a bunch of fine tuning, I found 765 px to be my magic number.

Which meant I could get to the most important thing: figuring out how the heck I wanted my recipe pages to look. Last semester for Interactive Multimedia, I did a cooking site hosted on WordPress. Each recipe page (stuffed tomatoes, for example) had the same format: a little intro blurb, broken up by a photograph, the ingredients list, a video, written out instructions underneath the video, and extra tips or comments. This format worked because the video and the words could exist without each other – everything that I describe in text is in the video. However, because the videos for this project depend on the text, it didn’t feel right putting the videos before the written instructions. That would imply that all the information needed to cook the recipe was already given by that point, which is not the case.

Therefore, I settled on this format: an even shorter intro blurb, a horizontal division line, and then a section that would have the ingredients, steps, and then the video or photo slideshow following and recipe credits after that. This does mean it takes more scrolling to reach the multimedia content, but logistically it makes sense to me. The section with the recipe information will be a lighter color than the rest of the page, but I haven’t yet settled on what that will look like – that will develop over time, though, as I put in something other than a placeholder for the video/slideshow.

Goals for next week: hammer out the rest of the recipe pages, now that I have a template.


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s