CSS can you suggest?

[ikthius]

hey everyone,

I am currently trying to re write my site, using CSS, and I have been looking for the CSS equivelent of the horizontal rule <HR>

can anyone tell me how to do this ins css, I am looking for 5px high, and width of 85%

I tried this but to no avail:
hr {text-align:center width:85pc height:5px}

text-align is the only align I can find, align itself does not work
I thought pc is for percent
height i thnik I have right.

what am I doing wrong?
my html looks like this:
<hr></hr>

also can you design tables in css?

ik

[punky]

Ok, a few points:

1. HR doesn't need a closing tag, so only <hr> is needed
2. They auto centre align (or should do.)

I have just written this and tested it in FireFox and IE and it works

CSS:

hr {
width:55%;
height:5px;
}

HTML:

<hr>

Second point, you can use CSS in tables. Just use the table element tags (table, tr, td), like the HR one above, like:

table {
...
}

or combining multiple:

table, td, tr {
...
}

HTH mate.

[Richard M]

If you're using XHTML then use <hr />, also to colour the HR then use this CSS:

	background-color: #248; /* Netscape 6/7, Mozilla */
	color: #248; /* IE */
	border: #248; /* Opera */

[ikthius]

thanks for the replies, but I am not using XHTML.

ik

[Matth]

Punky's code works in my ediitor preview
also HR STYLE="width: ..... and so on, but you want it as a sheet, presumably, and not per use.

You can also use HR CLASS=, to be able to specify a number of differently styled HR elements. Actually, you can use ID= as well, but indidually enumerating them is unlikely to be of much use.

[ikthius]

Originally Posted by Matth

Punky's code works in my ediitor preview
also HR STYLE="width: ..... and so on, but you want it as a sheet, presumably, and not per use.

You can also use HR CLASS=, to be able to specify a number of differently styled HR elements. Actually, you can use ID= as well, but indidually enumerating them is unlikely to be of much use.

thanks,

I did not need to use an ID or a class, I just used the CSS to target the HR, becuase the pages that the HR is on, there is only one, so I don't need the hr to be different from anything else.

I have finished half of my site, which a lot of code is now gone to CSS, and they load better and look just the same, but essentially they are all the same on:
Firefox
IE
Netscape 7.2
Opera 8 beta

I will need to look into coding for audible browsers, to make the site more accessible friendly.

ik

[punky]

Originally Posted by ikthius

I will need to look into coding for audible browsers, to make the site more accessible friendly.

Yeah, that is a legal requirement now these days

[ikthius]

another wee thing, I have topstyle to help me with some code, but I can't for the life of me find what I am looking for
pic 1 is done on html and pic 2 is using css, how can I get the table bang in centre of screen and how can I get the table borders to show?

I tried border:2px; border-style:groove;
but this just gave a border, but no internal lines.

ik

[Richard M]

td {
border: 2px #aaa groove;
}

Replace #aaa with whichever colour.

[ikthius]

thanks richard,

but how do I get it in the centre?in my body I have text-align:center, but I guess this is just for text, how do I do it with a table

ik

[Richard M]

table {
width: 90% /* example */
margin-left: auto;
margin-right: auto;
}

[ikthius]

cheers mate, I was playing about with everything but the 2 of them together, sometimes you just need to be pushed in the right direction.

reps to you mate.

ik

[Matth]

Cascade DTP is another program that may be of interest when developing with CSS

[punky]

I don't know if you use Firefox, but there are a couple of awesome plugins which make developing web pages a lot less hassle.

Web Developer 0.8

EditCSS 0.2.3

[ikthius]

cheers punky

I do infact use firefox, and I have the web developer, but I forgot about using it, but not heard of the editcss, so I have downloaded it

reps to you.

ik