Welcome to WebmasterWorld Guest from

Forum Moderators: brotherhood of lan & mack

Message Too Old, No Replies

Coding list style

12:49 pm on Apr 19, 2009 (gmt 0)

5+ Year Member

This is a picture of what I'm trying to code. [snip] (Rest assured, no perverted material. Just a list.) I think I'm aiming a tad too high for a beginner. Coding (trying to) this is making me lose a few hairs and what's worse is that it looks so innocently simple.


I drew up the way I wanted to present my list in photoshop to use as background images which I then uploaded into Flickr. (My website doesn't have its own domain--I'm using blogger.)

There is a top bit, middle section and an end section as shown. I wanted the list to be like an expandable box; the middle section is to repeat itself along the y-axis. [snipped url]

This is what I have so far in regards to markup.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<style type="text/css">

.startbox, .middlebox, .endbox {

.startbox ol, .middlebox ol, .endbox ol {
font:13pt/26pt Verdana;

.startbox ol li, .middlebox ol li, .endbox ol li {
padding: 0 0 0 10px;
font:12px/26pt Arial;

.startbox {
background:transparent url(http://farm4.static.flickr.com/3550/3454712581_1733471a85_o.gif) no-repeat;

.middlebox {
background:transparent url() repeat-y;

.endbox {
background:transparent url() no-repeat;



<div class="startbox" "middlebox" "endbox">
<li>Some text.</li>
<li>Some more text.</li>
<li>And even more text.</li>



Complete fail I know.

1) I'm not sure why the text won't present itself in the colour I specified. It's just black.

2) I'm not even sure if this is the right doctype because I'm not entirely sure how to tell whether my markup is transitional or strict or whatever. And can someone please tell me what

<html xmlns="http://www.w3.org/1999/xhtml">
means? I've seen it on every website I download the source code for in the <head> section.

3) I went on a download crazy spree where I printed every single tutorial on HTML and CSS I laid eyes upon. I read all of them again and again in the past fortnight. So now I'm sort of familiar with the attributes but confused about how to code to achieve a "semantic markup". For the HTML bit where I start to apply my styles, I'm not sure whether to write div class="" or p class="". Isn't div for a unique element? What if I want the list to be incorporated into body content?

4) Would it be better to style a wrap to contain the list?

5) As more list items are added, the lines gradually begin to move upwards so that the background middle section and the list item is misaligned. How should I go about fixing it?

Feel free to harshly correct me on where I went wrong. In fact, I beg you to. Oh, and where there is a blank bracket () for URL, it means I haven't uploaded the photo yet. My internet is weepingly slow.

Thank you in advance to anyone who replies. Apologies for such a long post but be happy in knowing that you will be helping one of the most famous web-developer-to-be.

[edited by: brotherhood_of_LAN at 7:58 pm (utc) on April 19, 2009]
[edit reason] No URL specifics please as per ToS. see sticky. Thanks! [/edit]

2:55 pm on Apr 19, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Welcome aboard condonenot, there are far better programmers/coders than I who will be along for further help, but before we address further issues let's fix a few basic things. The picture will never hang straight until we get the wall vertical. :-)

<div class="startbox" "middlebox" "endbox">

When you apply multiple classes, it should be

<div class="startbox middlebox endbox">

I'm not entirely sure how to tell whether my markup is transitional or strict or whatever.

One of my peeves, actually. :-) Many just use XHTML because they were told it's the latest and greatest doctype, but the bottom line is that XHTML was originally intended for extending the HTML markup language. That is, you could do

<movie>The Titanic</movie> is a movie about a ship of <adverb>titanic</adverb> proportions named <shipname>Titanic.</shipname>

... and write your own document definition type that assigns values to your tags, supplying context to clients. This would make a smart document that could differentiate between the various contexts of "titanic." There are other features of XHTML too . . .

It never really took off, for various reasons, but the XHTML doctype permeates the web today when nearly all of those documents are plain old HTML and secondly, many of the servers they are on don't serve text/xhtml content types, they serve it up as text/html. IMO, the real problem here is this misrepresents the document type. If you're selling HTML, the doctype should be html.

Choosing the Best Doctype For Your Site [webmasterworld.com]
Why most of us should NOT use XHTML [webmasterworld.com]

The last piece of this puzzle, with whatever doctype you use, is to validate your document [validator.w3.org]. The greatest relevance of this is that it will get you closer to cross browser compatibility by rendering the page in Standards Compliance Mode as opposed to Quirks Mode.

Quirks mode is just how it sounds - browsers will try to "fix" invalid code and render the page, which accounts for a lot of cross browser issues. In Quirks mode, many CSS selectors will fail, confusing the issue even more. A valid doctype is required to render in Standards Compliance mode, so the previous links are the best place to start.

One last bit,

I'm not sure whether to write div class="" or p class="".

A div is meant to divide pages into sections when no other element applies. If your have text that's supposed to be a paragraph - use a paragraph. If you have a list - as in a list of navigation links - use a list. A brief look at the code you pasted, you could probably eliminate the div and apply your styles directly to the <ol> (grain of salt here, just gave it a perfunctory glance.) Sounds to me like you're on the "right track" by considering document semantics, which many don't.

Isn't div for a unique element?

No. Any element can be unique:

<ul id="top-nav">
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>

<h1>There should only BE one main head - no need to ID</h1>

<p id="main-page-opener">Let's get this party started</p>

An ID is applied to any element that is used once on any given page (but can be used on many pages.) Classes are for items that will, or just may, appear multiple times on a page.

...in knowing that you will be helping one of the most famous web-developer-to-be.

But you never remember the "little people." :-)

Of all the adversity and challenge I have experienced in life, I found my own ego to be the highest mountain, the toughest wall, to traverse. - anonymous
10:09 am on Apr 20, 2009 (gmt 0)

5+ Year Member

Thanks for clearing up my questions rocknbill. :) You were very thorough. I'll try again with your tips in mind and see if it works this time.

Okay, maybe the "greatest web developer's-to be" bit was a very poor stab at humour (it is) but the quote was a good one.

4:24 pm on Apr 20, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

As was mine. :-) Here's another - "If you're not having fun at what you're doing, you need to do something else." :-)