How do i show my code like this?

Marc · #1 May 30th, 2007, 15:54

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 · #2 May 30th, 2007, 15:58

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

Marc · #3 May 30th, 2007, 16:21

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

karinne · #4 May 30th, 2007, 17:13

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

karinne · #5 May 30th, 2007, 17:18

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

HTML

Code: Select all

<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: Select all

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 · #6 May 30th, 2007, 17:34

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

Thanks anyway.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
code behind code doesnt work	skat	ASP.NET Forum	4	Feb 18th, 2008 10:05
Can't get background to show	casho	Starting Out	17	Aug 14th, 2007 11:17
live search code and styleswitcher code	hebel	JavaScript Forum	0	May 12th, 2007 06:16
Can't get divs to show up on the right? Can someone scan over my code?	KOinMotion	Web Page Design	2	Nov 22nd, 2006 21:20
Can somebody give me the code to hide the source code?	renren	JavaScript Forum	7	Mar 7th, 2006 12:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How do i show my code like this?