CSS code tables

[madcgimonk]

I am horribly new at CSS and was wondering if someone could give me the CSS and HTML needed to make the CODE table.

Ie.

I want this box

I read the source code and loaded the CSS style sheets for this site, but that wasn't very useful. lol.

I just need the HTML and the CSS code to make it. The CSS will be on the page itself (it won't be external) and no idea where to start.

Can anyone help me with this?

 

[ChrisHirst]

the basic code would be something like this;
styles

.code_box {
width:80%;
padding:0px 2px;
margin:0px auto;
}
.code_box_header {
color:#FFFFFF;
background-color:#666666;
text-transform:uppercase;
}

HTML

<div style="code_box">
<div style="code_box_header">code</div>
<pre>
code data
</pre>
</div>

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[madcgimonk]

Hi Chris.

Thanks for your help. I must be a total idiot though because I can't get that code to work. I am trying to get this code working on my list of tutorials.

The page I'm testing on first is:

http://www.sulfericacid.com/tutorials/tut03.shtml

. You can see where it says "code #!/usr/bin/perl" near the top.

Do you have any idea why the table itself isn't showing up?

Thank you.

 

[ChrisHirst]

maybe if I hadn't ed up the code it would work.

in the HTML replace <div style="... with <div class="...

where's the [doh] smiley when you need one




Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[madcgimonk]

LOL. Well that certainly did help a bit

It looks a lot better now than it did although I don't get the super cool side borders like the version here does.

I made the opinion a long time ago that I hated CSS with a passion. lol. I think I might just have to stick with that thought!

Thanks for your help.

 

[madcgimonk]

Anyway, I did manage to get it about perfect now. I think I'll fiddle to get the font right but it looks good enough

The code I used was

.code_box {
width:80%;
margin:0px auto;
border-width : 2px;
border-style : inset;
}
.code_box_header {
color:#FFFFFF;
background-color:#666666;
text-transform:uppercase;
}

Thanks for your help Chris!

 

[ChrisHirst]

add some borders

.code_box {
width:80%;
padding:0px 2px;
margin:0px auto;
border:2px double #E8E8E8;
border-top:2px solid #666666;
border-left:2px solid #666666;
}

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.