How do i show my code like this?

Marc · May 30th, 2007, 11:54 AM

I think this is a CSS matter, if not could a mod/admin move it please.

Anyway...I am looking for how to show my code like what it is on Karinnes website, mabey she could help! (Please)

Anyway, here is a link to it... LINK.

The thing i dont get is the numbers down the side.

Thanks
Marc

moojoo · May 30th, 2007, 11:58 AM

Ordered list with css style. Pretty simple with a blog engine and forms.

Marc · May 30th, 2007, 12:21 PM

Thanks moojoo, but how do i do it.. lol :P

karinne · May 30th, 2007, 01:13 PM

Just view the source, copy the code and play around with it.

karinne · May 30th, 2007, 01:18 PM

Meh ... here's how I did it.

HTML

Code:

<ol class="coding">
    <li><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</code></li>
    <li class="tab1"><code>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</code></li>
    <li><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA"&gt;</code></li>
    <li><code></code></li>
    <li><code>&lt;head&gt;</code></li>
    <li class="tab1"><code>&lt;title&gt;Some title&lt;/title&gt;</code></li>
    <li class="tab1"><code>&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;</code></li>
    <li><code></code></li>
    <li class="tab1"><code>&lt;style type="text/css"&gt;</code></li>
    <li class="tab1"><code>html {</code></li>
    <li class="tab2"><code>background-color: #fff;</code></li>
    <li class="tab1"><code>}</code></li>
    <li class="tab1"><code></code></li>
    <li class="tab1"><code>body {</code></li>
    <li class="tab2"><code>color: #fff;</code></li>
    <li class="tab2"><code>margin: 0 auto;</code></li>
    <li class="tab2"><code>width: 780px;</code></li>
    <li class="tab2"><code>background-color: #900;</code></li>
    <li class="tab1"><code>}</code></li>
    <li class="tab1"><code>&lt;/style&gt;</code></li>	
    <li><code>&lt;/head&gt;</code></li>
    <li><code></code></li>
    <li><code>&lt;body&gt;</code></li>
    <li><code></code></li>
    <li><code>this site is centered</code></li>
    <li><code></code></li>
    <li><code>&lt;/body&gt;</code></li>
    <li><code>&lt;/html&gt;</code></li>
</ol>

CSS

Code:

ol.coding {
	border: 1px solid #004545;
	padding: 3px;
	list-style-type: decimal-leading-zero;
	font-family: "Courier New", Courier, monospace;
}

ol.coding li.tab1 {
	padding-left: 5ex;
}
ol.coding li.tab2 {
	padding-left: 10ex;
}
ol.coding li.tab3 {
	padding-left: 15ex;
}

ol.coding li {
	background-color: #004545;
	margin: 5px 0 5px 30px;
}

Marc · May 30th, 2007, 01:34 PM

Ok, thanks. I think i will just give it a miss (for the moment).

Thanks anyway.