Help me with input on design of an article CSS

[kentl]

Hi!

I'm writing a CSS file which I will use in some articles / tutorials which I will write. These will be programming related, and therefore have some code snippets and figures in them.

What I presently have is:
http://thisistheurl.com/newlayout/test.html

What is good and what is bad with this design? All constructive critizism appreciated! If you know of something I could change to improve the layout, I'd really appreciate it! Note, I will add a navigation bar to the left when I am finished with the "content" CSS for articles.

[NogDog]

Link did not work for me.

[kentl]

Well it works for me now, and it worked when I posted it. :confused:

[fab0990]

The link works for me and i think the page does what its supposed to so i see no need for you to change it.

[NogDog]

Worked for me this time.

A few minor suggestions:

Add a bit of padding to the body so that the text does not butt up right against the edges of the page.
I'm not crazy about the red borders below the headings. I'd probably just get rid of them myself, but if you really want them, I'd try a subtler color (maybe a gray/blue sort of thing?).

Here's a similar sort of thing I did: http://www.charles-reace.com/login_article.html

I went for a fixed-width, centered column to keep the paragraphs from getting too terribly wide on larger displays. Feel free to copy any ideas you like, or just ignore it if you think it sucks. :)

[kentl]

Thanks for the generous invitation to copy something design wise from you NogDog, your design is really much better (IMHO) than mine. I will do as you did with a couple of things.

I have one question, I've got a div called "imagewithtext" which is an image with a caption beneath it. I can't figure out how to center it and its corresponding caption text. Any ideas?

Relevant CSS:
div.imagewithtext
{
font-size: 0.8em;
margin: 0.5em auto;
}

Relevant HTML:
<div class="imagewithtext"><img src="figure1.png" alt="Some graph."/><p>This text belongs to the figure.</p></div>

[NogDog]

See if this works (i.e.: I haven't tested it):

div.imagewithtext
{
font-size: 0.8em;
margin: 0.5em; /* the auto would only work if div has a fixed width */
text-align: center; /* this should center the img */
}
.imagewithtext * {
text-align: center; /* this should center the text in any element in the div */
}

[kentl]

It works great! Thank you very much! :) Now some final tuning and its time to work on the navigation bar instead.

[David Harrison]

I'd recommend putting the content all in a big container and specifying a width in em like nogdog did, but also specifying a max-width of 100%.

My screen resolution is 1600x1200 and old habits die hard so I usually browse with the window maximised. It's very hard to read the text when the lines are that long, but by having an elastic width layout you can limit the line length to a certain size quite easily.

[kentl]

I updated the URL above, does it look better now? I have a max width now, I specified it in em though as that's what I have used for the rest of the site. Is that bad?

Should I change something now? (the navigation bar is just a placeholder at the moment)

[kentl]

The site as it looks now (http://thisistheurl.com/newlayout/test.html)

[JPnyc]

Sorry, whatever it looks like, it took too long to load. Blank page for about 15 seconds or more.