12: Float:left like a butterfly

I’ve managed to progress my website a bit further since my last blog but it feels like it’s progressing at a snail’s pace. Each tiny correction takes me hours to work out and I’ll often find I’ve broken something else in the process. I’ve found some answers and assistance on Stack Overflow and WebPlatform.org, like adding a CSS wrapper and floating elements to the left, which has helped to fix the gaps and alignment issues. I was using ‘position:relative;’ a lot before and that wasn’t working for me. Sometimes just knowing what to search for is the hardest part of solving a problem like this. Christmas in the middle of all this has obviously slowed me down a bit too.

I’ve added more CSS classes as well, which has sorted a few issues out. I was using a lot of IDs before for things that could apply to more than one element so I’ve fixed that up to tidy up the code. I’ve also nested more classes inside each other which I think has helped to work more in harmony with the CSS box model.

Here’s where I’m at so far:

Screenshot of the site I am building at the next stage of evolution
Bit uneven in the middle section but not too shabby (much like myself?).

I went to css-tricks.com to figure out how to set the background image as opaque. There’s obviously still plenty of work to be done, particularly in the My Work section. I need to work on the functionality of what happens when you click on the work examples. I’m not quite sure how to add the videos or make the other docs pop-up or open on click so I need to do some more research on that. It might require the dreaded Javascript but I very much hope not. I think once I get the CSS and HTML part finished and I’m happy with it then I’ll feel more confident at having a stab with the JS, but for the time being I’m not thinking about it.

I’ve added a rudimentary form in the Contact Me section too, broadly following the examples given in the lecture slides using <fieldset> and <form> tags, with a bit of additional online research to help me fix a couple of issues. I still need to work on the functionality, but it’s a start. Again JS may come into play here so this will probably be a job I leave until the end of this process. I’m not quite sure where to send the data that is input into the form – an SQL database perhaps? Again, more research required here.

Leave a Reply

Your email address will not be published. Required fields are marked *