CSS can you suggest? - Page 2

ikthius · 25-02-2005, 13:20

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>heading 
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

ikthius · 25-02-2005, 15:41

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">white</a> 
<a href="blue.html">blue</a> 
<a href="orange.html">orange</a> 
<a href="green.html">green</a> 
<a href="yellow.html">yellow</a> 
<a href="purple.html">purple</a> 
<a href="brown.html">brown</a> 
<a href="black.html">black</a> 

</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

punky · 25-02-2005, 16:05

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:

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.white:link {color:#FFFFFF;}
a.blue:link {color:#0000FF;}
a.orange:link {color:#FFA500;}
a.green:link {color:#008000;}
a.yellow:link {color:#FFFF00;}
a.purple:link {color:#800080;}
a.brown:link {color:#A52A2A;}
a.black:link {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 class="white" href="white.html"><span class="white">white</span></a><br>
<a class="blue" href="blue.html"><span class="blue">blue</span></a><br>
<a class="orange" href="orange.html"><span class="orange">orange</span></a><br>
<a class="green" href="green.html"><span class="green">green</span></a><br>
<a class="yellow" href="yellow.html"><span class="yellow">yellow</span></a><br>
<a class="purple" href="purple.html"><span class="purple">purple</span></a><br>
<a class="brown" href="brown.html"><span class="brown">brown</span></a><br>
<a class="black" href="black.html"><span class="black">black</span></a><br>


</BODY>
</HTML>

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:

Code:

td {
...default style...
}

td.heading {
...special heading style...
}

And you would use it like this:

Code:

<table>
<tr><td class="heading">Special heading</td></tr>
<tr><td>general cell></td><td>another general cell</td></tr>
</table>

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

Code:

<tr><td class="heading" colspan=2>Special heading</td></tr>

ikthius · 25-02-2005, 16:24

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

punky · 25-02-2005, 16:54

Quote:

Originally Posted by ikthius

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

Oh yeah, I didn't notice that. Anyways, 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 s from around the links. Works fine in FireFox and IE.

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.white:link {color:#FFFFFF;}
a.white:hover {background-color:#FFFFFF; color:#000000;}

a.blue:link {color:#0000FF;}
a.blue:hover {background-color:#0000FF; color:#FFFFFF;}

a.orange:link {color:#FFA500;}
a.orange:hover {background-color:#FFA500; color:#000000;}

a.green:link {color:#008000;}
a.green:hover {background-color:#008000; color:#FFFFFF;}

a.yellow:link {color:#FFFF00;}
a.yellow:hover {background-color:#FFFF00; color:#000000;}

a.purple:link {color:#800080;}
a.purple:hover {background-color:#800080; color:#FFFFFF;}

a.brown:link {color:#A52A2A;}
a.brown:hover {background-color:#A52A2A; color:#FFFFFF;}

a.black:link {color:#000000;}
a.black:hover {background-color:#000000; color:#FFFFFF;}


</style>
</head>

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


</BODY>
</HTML>

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

Quote:

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

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

ikthius · 25-02-2005, 17:03

Quote:

Originally Posted by punky

Oh yeah, I didn't notice that. Anyways, 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 s from around the links. Works fine in FireFox and IE.

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.white:link {color:#FFFFFF;}
a.white:hover {background-color:#FFFFFF; color:#000000;}

a.blue:link {color:#0000FF;}
a.blue:hover {background-color:#0000FF; color:#FFFFFF;}

a.orange:link {color:#FFA500;}
a.orange:hover {background-color:#FFA500; color:#000000;}

a.green:link {color:#008000;}
a.green:hover {background-color:#008000; color:#FFFFFF;}

a.yellow:link {color:#FFFF00;}
a.yellow:hover {background-color:#FFFF00; color:#000000;}

a.purple:link {color:#800080;}
a.purple:hover {background-color:#800080; color:#FFFFFF;}

a.brown:link {color:#A52A2A;}
a.brown:hover {background-color:#A52A2A; color:#FFFFFF;}

a.black:link {color:#000000;}
a.black:hover {background-color:#000000; color:#FFFFFF;}


</style>
</head>

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


</BODY>
</HTML>

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?

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 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

punky · 25-02-2005, 17:13

Quote:

Originally Posted by ikthius

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?

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).

ikthius · 25-02-2005, 17:23

Quote:

Originally Posted by punky

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).

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

punky · 25-02-2005, 17:56

Quote:

Originally Posted by ikthius

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

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

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.white:link,a.white:active,a.white:visited {color:#FFFFFF;}
a.white:hover {background-color:#FFFFFF; color:#000000;}

a.blue:link,a.blue:active,a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#0000FF; color:#FFFFFF;}

a.orange:link,a.orange:active,a.orange:visited {color:#FFA500;}
a.orange:hover {background-color:#FFA500; color:#000000;}

a.green:link,a.green:active,a.green:visited {color:#008000;}
a.green:hover {background-color:#008000; color:#FFFFFF;}

a.yellow:link,a.yellow:active,a.yellow:visited {color:#FFFF00;}
a.yellow:hover {background-color:#FFFF00; color:#000000;}

a.purple:link,a.purple:active,a.purple:visited {color:#800080;}
a.purple:hover {background-color:#800080; color:#FFFFFF;}

a.brown:link,a.brown:active,a.brown:visited {color:#A52A2A;}
a.brown:hover {background-color:#A52A2A; color:#FFFFFF;}

a.black:link,a.black:active,a.black:visited {color:#000000;}
a.black:hover {background-color:#000000; color:#FFFFFF;}

</style>
</head>

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


</BODY>
</HTML>

ikthius · 25-02-2005, 18:19

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

Matth · 25-02-2005, 18:23

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.

ikthius · 25-02-2005, 18:39

cheers matth,

where are the docs?

ik

Matth · 25-02-2005, 18:48

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!

punky · 25-02-2005, 19:13

Quote:

Originally Posted by ikthius

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

Quote:

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

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?

ikthius · 05-03-2005, 14:26

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