Torpedoed!

So, this week one of our assignments for class was to design and post a basic web page. I've been dabbling in HTML for a few years-- took a community college web design class and tweaked the web page I used for my class when I taught school. Last year, for 504, I created a simple web page and was able to not only revisit some of what I already knew, but also dabble a little bit more with CSS. What nearly killed me then tried it again this time.




Float.


I suck at float and one of the reasons is that I don't do much with HTML or CSS on a regular basis. I have to retrain myself to a degree each time I tackle a web page. For this assignment, I looked at what I had done last summer and revised it. I had used div to float my picture and caption then and it when I looked at it again this summer, it looked ugly. Not to mention that apparently I had another div class for a second image that was not in my html (and a background image property that I didn't have either). So besides editing and changing the content and some of the style, I deleted some of the extraneous stuff.

Oops.

When I refreshed the page, my picture slammed back over to the left side of the page. The caption went from red italic to blue roman (matching the rest of the text). Any and all edits I made in CSS were not recognized by the HTML page. Just to make sure I had the right page open, I changed content in HTML. It showed up in my web browser; I knew the CSS was the problem.

For almost an hour I researched and looked at examples of floating, and everybody's got a different way of doing it. Some use one class, some use several. I tried everything. Finally I decided that since I only had one picture, I didn't want to use a class anyway. I wanted to use an ID. As I was doing that, I noticed something very peculiar... and it was the hideous

 

curly bracket of death.

What I had been researching, in a macro-analysis of the problem, was what I had done wrong with the code. I'm not brilliant with CSS or any aspect of web design. I make hideous mistakes all the time. I knew I had made one this time, too. What I should have been doing was reading what I had typed-- or rather what I hadn't typed-- a little more closely. Open curly bracket: yes. Closed curly bracket: oops.

I closed the #dm section of my css with a curly bracket, refreshed, and... We have a floater.

I can't tell you the sense of satisfaction of seeing a doofy little picture move from left to right. It's embarrassing in the grand scheme of things, but boy did I feel like I accomplished something.

Oh, I also cleaned up the caption's style and learned how to place margins in the body of the web page. So, in the end it was OK, I guess, that I spent so much time looking for something I didn't need to know.