Weblog: February 3, 2004

Entries

Weblog entries posted on this day.

One Float To Rule Them All

Posted
February 3 2004

After my manic rant of yesterday, I decided to stay awake all day in an attempt to break this messed rythm I've been in (I go to bed late in the morning). Around dinner time I wasn't feeling to bad, but wasn't hungry, so I decided to play some street basketball. This was around 5. While I was playing, I was feeling really good, but when I went home, I started feeling ill. I went to bed and slept for an hour or so. When I woke up, I felt a lot better. A few hours after, Jaron came to pay me a visit. I was still managing, so I could handle some company. Not for too long though — it was well before midnight that I started feeling ill and anxious. I decided to take a shower and head to bed. Jaron spend some more time with my mom — I don't think I was awake when he left.

My attempt to break my rythm seems to have been successfull. I woke up at 6 this morning. I didn't really know what to do, but I was feeling quite awake and was having creative thoughts (indication of some good rest finally?), so I decided to start my day.

My thoughts when I woke up (and probably before — which... bugs me... kind of) were about images floating in paragraphs (can't I just dream about sex, like normal people? Heh). Anyway, I decided to write down some of the possibilities in markup and style, for reference.

Here's a list.

Table with Caption

Markup

<table class="float-left" summary="A picture of a foo">
<caption>Foo</caption>
<tr>
<td><img alt="A picture of a foo" src="image.png" title="Foo" /></td>
</tr>
</table>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }
caption { caption-side: bottom }

Pure CSS

Markup

<img alt="A picture of a foo" class="float-left" src="image.png" title="Foo" />
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }
img.float-left:after { content: attr(title) }

Generic Container

Markup

<div class="float-left">
<p><img alt="A picture of a foo" src="image.png" title="Foo" /></p>
<p>Foo</p>
</div>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }

Pseudo Class

Markup

<p class="float-left">
<img alt="A picture of a foo" src="image.png" title="Foo" />
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

p.float-left:first-child { float: left }
p.float-left:first-child:after { content: attr(title) }

Description List

Markup

<dl class="float-left">
<dt><img alt="A picture of a foo" src="image.png" title="Foo" /></dt>
<dd>Foo</dd>
</dl>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }

Paragraph

Markup

<p class="float-left">
<img alt="A picture of a foo" src="image.png" title="Foo" />
<br />Foo
</p>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Style

.float-left { float: left }

By the way, while I was laying in bed last night — and was playing some NBA Street Vol. 2 — I did something weird with my teeth, and broke off a tiny piece of one tooth. Whatever.

External

This day, elsewhere.