CSS can you suggest?
 

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

Re: CSS can you suggest?
 

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:

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

or combining multiple:

HTH mate.

Re: CSS can you suggest?
 

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

Re: CSS can you suggest?
 

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

ik

Re: CSS can you suggest?
 

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.

Re: CSS can you suggest?
 

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

Re: CSS can you suggest?
 

Yeah, that is a legal requirement now these days :erm:

Re: CSS can you suggest?
 

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

Re: CSS can you suggest?
 

td {
border: 2px #aaa groove;
}

Replace #aaa with whichever colour.

Re: CSS can you suggest?
 

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

Re: CSS can you suggest?
 

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

Re: CSS can you suggest?
 

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

Re: CSS can you suggest?
 

Re: CSS can you suggest?
 

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

Re: CSS can you suggest?
 

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

Re: CSS can you suggest?
 

hey guys, I have a few probs, with css again, but I will do this one at a time.

first of all

if I have a tabel and in the table data i have made the contents be justified using css, can I make a span with its own unique id to have different attributes.

e.g.
css
td {border:2px; text-align:justify;}
span#bc {font-weight:bold; text-align:center;}

<table>
<tr><td><span id="bc">heading</span><br>
I want the above heading to be centred in the table data cell but have this all justified, is it possible?
</td></tr>
</table>

or because I have the td justified the span is overridden?

ik

Re: CSS can you suggest?
 

ok I have a question for some of the IE faithfull,

why is it that this page does not look the same as in firefox? what do I have to do to make it work the same in IE as in Firefox?

here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> test page </TITLE>
<style type="text/css">

body {background-color:#D0BFAC; color:#000000; font-size:12pt; font-family:TimesRoman,Arial;text-align:center; margin-left:1cm; margin-right:1.5cm; font-weight:bold;}
a:link {color:#0000FF;}
a:visited {color:#FF0000;}
a:active {color:#FFFF00;}
a:hover {color:#008000;}
hr {width:95%; height:2px; color:#C0C0C0;}
a:link[href="white.html"] {color:#FFFFFF;}
a:link[href="blue.html"] {color:#0000FF;}
a:link[href="orange.html"] {color:#FFA500;}
a:link[href="green.html"] {color:#008000;}
a:link[href="yellow.html"] {color:#FFFF00;}
a:link[href="purple.html"] {color:#800080;}
a:link[href="brown.html"] {color:#A52A2A;}
a:link[href="black.html"] {color:#000000;}


span.white:hover {background-color:#FFFFFF; color:#000000;}
span.blue:hover {background-color:#0000FF; color:#FFFFFF;}
span.orange:hover {background-color:#FFA500; color:#000000;}
span.green:hover {background-color:#008000; color:#FFFFFF;}
span.yellow:hover {background-color:#FFFF00; color:#000000;}
span.purple:hover {background-color:#800080; color:#FFFFFF;}
span.brown:hover {background-color:#A52A2A; color:#FFFFFF;}
span.black:hover {background-color:#000000; color:#FFFFFF;}
</style>
</head>

<BODY>
<a href="white.html"><span class="white">white</span></a><br>
<a href="blue.html"><span class="blue">blue</span></a><br>
<a href="orange.html"><span class="orange">orange</span></a><br>
<a href="green.html"><span class="green">green</span></a><br>
<a href="yellow.html"><span class="yellow">yellow</span></a><br>
<a href="purple.html"><span class="purple">purple</span></a><br>
<a href="brown.html"><span class="brown">brown</span></a><br>
<a href="black.html"><span class="black">black</span></a><br>


</BODY>
</HTML>

I want the links to be individual colours, and when hovered over the background goes to that colour and the text changes colour.

I have tried everything.

ik

EDIT I am still slightly stuck with my previous post #16

Re: CSS can you suggest?
 

Well, I haven't seen that square brackets in CSS before. It wasn't the way I was taught anyway. I just subclassed it like so:

Tested in FireFox and IE and it works just fine. I'm going to see about post #16 now.

Edit: An advantage of subclassing it is that it can be reused. you can have multiple whites, blues, reds, etc, regardless of their address.

Another edit: Funnily enough post #16 was about subclassing and you didn't know. you can create a default style, and then a subclass of that style which is different. You would do it like this:

And you would use it like this:

I didn't want to complicate things but if you wanted that heading cell to stretch across the whole table, as the row below it has 2 cells instead of one, you'd put

Re: CSS can you suggest?
 

Punky, I have IE 6 and it has the colours for the links but it does not change the background colour for the hover.

also for post 16, I dont want another cell for the heading, this may make my page look awful, look at: http://homepage.ntlworld.com/j.kelly...veanimals.html
to see what I mean.

thanks for helping dude, I am at a loss

ik

EDIT I will have more links than the test page, so I was going to leave another formatting for general links. so the [] helps identify the actual link, was suggested earlier in this thread

Re: CSS can you suggest?
 

Oh yeah, I didn't notice that. Anyways, <span> doesn't have a :hover propert, only a[nchors]s do. So I added those colours to the a.hovers for each class, and took out the <span>s from around the links. Works fine in FireFox and IE.



also for post 16, I dont want another cell for the heading, this may make my page look awful, look at: http://homepage.ntlworld.com/j.kelly...veanimals.html
to see what I mean.

thanks for helping dude, I am at a loss

ik
I don't know what you mean about the cell heading thing. Could you be a bit clearer?

Re: CSS can you suggest?
 

basically it does not really have a heading, I know I said that in my original post, but it just has text (used as a heading) then <BR> then text as main body of cell.

in my page, it has 3 cells to a row.

but I think I could just add another row

i will test your new code on IE

ik

EDIT thats what I was trying to do, now is there away to stop the links from changing colour when they are visited, you know how they become a different colour because it is set to a:visited {color:#FF0000;}? any way that I can force it to remain the same colours as before I clicked?

ik

Re: CSS can you suggest?
 

Yup, the easiest way is to define the :visted property colours to be the same as the :link. You have to specify it explicitly as browsers have defaults (underlined blue for links, underlined purple for visted, etc). don't forget the a:active which occurs whilst following the linked (when you clicked it).

Re: CSS can you suggest?
 

I played with this, but when you hover over the link again it all goes same colour, no text, is there something in the meta that I can specify that it does not get chached in the users browser?
this might be a solution

ik

Re: CSS can you suggest?
 

I don't know what you were saying there, but try this, it should be what you want. Works in FF and IE naturally.

Re: CSS can you suggest?
 

Punky you are a god..........

I see what you did, you made all three have the same colours, nice one mate, now a killer question, and this whole thing should be over.

could I add one of these links to a cell of a table/they all have individual cells?
just incase I want to use a table.

ik

Re: CSS can you suggest?
 

If you're still trying to center a line with SPAN followed by BR, try a DIV instead. Yes, looked at the docs, and a DIV may be contained within a TD.

Applying alignments to spans is ineffective, as the span does not occupy any more space than it's content.

SPAN is a generic inline container, often used to replace the deprecated FONT element to apply arbitrary character styles (for consistency in non-CSS browsers, it's better to use a styled text attribute that conveys the appropriate meaning).

DIV is a generic block container, without implied margins
P is a the Paragraph block container, though often used as a Paragraph break.

Styled DIVs can often produce a similar layout to a table, and generally render progressively, where many browsers only render a table after it is complete.

Re: CSS can you suggest?
 

cheers matth,

where are the docs?

ik

Re: CSS can you suggest?
 

http://www.htmlhelp.com/reference/html40/olist.html

I was using the one in 1stPage 2000 - which is a copy of this

http://www.htmlhelp.com/distribution/
Also available as a download version - and an excellent reference indeed!

http://www.htmlhelp.com/reference/css/ CSS guide too!

Re: CSS can you suggest?
 

:blush: :)

That CSS refers to links, regardless of where they are. It doesn't matter if the link is in a table cell, outside of a table cell, or if you have 2 links in the same cell, it shouldn't matter, it should always produce the above result.

I think, if you have CSS that defines the content of a table cell, and you have a link with different CSS, it would still render the link CSS. That is because it intreprets the cell, then intreprets the link, and overwrites any display characteristics that already exist.

Is that what you meant?

Re: CSS can you suggest?
 

hey guys, still playing away.

I have checked out css zen garden and various links from them & css resouce guide that I got the link form someone above in this thread, which is all good thanks, and they all show the same thing.

I am playing with background images within css for web pages.

they say this:
body{background-image:url("im.jpg"); background-repeat:no-repeat;}
some don't some do use " " with the image file, so I take it that this is not essential.

the file I am trying to show is in the same folder as the html & css file. I have also tried in the url part of the css:
../im.jpg
the full address c:\\................so on, copied from explorer
I have even tried to put the image into webspace and use that url, but nothing seems to work for me, it is all ok on other websites, but not the page I am trying to make.

what am I doing worng?

ik

EDIT: sorry guys I seemed to have found my wee prob, I had a comma instead of a full stop in my link rel decleration in the HTML.

sorry to have bothered you :dunce: