Announcements +
the occasional rant

How to center that pesky headline

Posted on: September 11th, 2012

When I was explaining Web Gazette Stage 2, I neglected to give one important piece of information. Here’s a summary:

The way your assignment is now, all the images are styled to float to the left. This css selector, as you can see, has the “float:left” declaration:
img {
margin:0 15px 15px 0;
float:left;
}

With that, all the images scoot to the left and all the non-image elements wrap around the images to the right of the images.

But we don’t want the logo to float and have the headline wrapping around it. We want both of those elements to stack up like blocks from top to bottom – that’s called “the normal flow” of html.

So we have to override that “float:left” just on the logo image.

We can do that with what’s called an inline style. You can apply CSS styles to individual elements. Here’s how you would apply the relevant style to the logo:

<img src="madisonclg_logo.png" alt="Madison College Logo" style="float:none">

That inline style overrides the more general style in the stylesheet, and it should now work.

See you tomorrow!

Leave a Reply

Rant Archives