20 replies [Last post]
lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

I have a link, which I don't want it appears like a link, so I define a class for this link, however, it only change the font size, not color and underline. I changed my template css sheet about link, as font- decoration: none. Still, it appears as a link with underline.
here is my class I made:
<style type="text/css">
<!--
.productcategory {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
font-color: black;
text-decoration: none;
}
-->
</style>
......

<tr valign="top">
<td align="left" class = "productcategory">
<?php
$ps_product_category->navigation_list($category_id);
?><br />
<?php
$ps_product_category->print_child_list($category_id);
?>

</td>
</tr>

can anyone help me on this? I am new to css, I have spent hours on this, still no clue, and posted it on different sites for 5 days, no one help me.
Thanks
Best Regards
Lynda

Lynda

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

How to change just one link style?

Did you post the wrong question, or the wrong code? I don't see any links in the code.

BTW, rather than post source, with its PHP stuff, give us the server output, the view source stuff of the browser.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

Thanks for response.
Actually this php code display as a link:
$ps_product_category->navigation_list($category_id);

This lines' output is : Music CD, which appears as a link with underline and blue, when I click it (Music CD), it shows the same page. I don't want it appeas as a link.
I am pretty new to php also. I didn't understadn why this output appears as a link.
Thanks
Lynda

Lynda

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

More accurately speaking, the result of this php code Music CD shows as a link, not this php code as a link. Thanks!

Lynda

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

How to change just one link style?

OK. As you can see, from the html and css point of view the PHP code has no relevance. Give us the server output, what the browser sees. The simplest way is to view source in the browser, then copy and paste. If you have it on a public host, give us the link.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

How to change just one link style?

Have you tried using:

.productcategory a{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
font-color: black;
text-decoration: none;
}

Verschwindende wrote:
  • CSS doesn't make pies

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

Thank you very much for quick response. Here is the code I got from view from source:
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
<tr valign="top">
<td align="left" class = "productcategory">
<a href="http://www.zingerbrothers.com/component/page,shop.browse/category_id,4110630b02dd2254cd93bc5e39a11bd9/option,com_phpshop/Itemid,52/">Music CD</a><br />


</td>
</tr>
Thanks
I will try the suggestion.

Lynda

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

I tried the above suggestion, add a after productcategory, still it only affects Music CD fonts size and weight, not do anything about font color and decoration. So I ahve to go to my template css to change decoration of all links, visited as none. This way, Music CD doesn't look as a link, same as other links which I want them to be link. Is there any other way to define this php code? My page is:
http://www.zingerbrothers.com/component/option,com_phpshop/page,shop.browse/category_id,4110630b02dd2254cd93bc5e39a11bd9/option,com_phpshop/Itemid,52/

Thanks

Lynda

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How to change just one link style?

font-color: black; should be color: black;
I'm not sure if the text-decoration would be ignored because of the incorrect font-color declaration or not - my guess is that it would.

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

Thanks! I am very slow, Now I define the new link as:
.productcategory a{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: blue;
text-decoration: none;
}
How can I use it? I did this:
<span class = "productcategory"><?php
$ps_product_category->navigation_list($category_id);
?><br /> </span>
<?php
I am not sure how could I add a, still it only change font size and weight, not affect on color and text-decoration.
Best regards
Lynda

Lynda

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How to change just one link style?

Quote:
<span class = "productcategory"><?php
$ps_product_category->navigation_list($category_id);
?><br /> </span>
<?php

This code doesn't help us out at all as previously mentioned. I will assume the php output is as you've posted above:
Quote:
<td align="left" class = "productcategory">
<a href="http://www.zingerbrothers.com/component/page,shop.browse/category_id,
4110630b02dd2254cd93bc5e39a11bd9/option,com_phpshop/Itemid,52/">Music CD</a><br />

</td>

This we can use Wink

Now, you don't need to change the html (or php) at all. You would (could) address this anchor, as-is, in the following manner:

.productcategory a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: blue;
    text-decoration: none;
    } 

Incidentally, you can use the font shorcut in this rule
.productcategory a {
    font: bold 24px Arial, Helvetica, sans-serif;
    color: blue;
    text-decoration: none;
    }

I just noticed a slight change in the html you posted - you moved the .productcategory class from the td to a span. But I'm not sure the anchor is inside the span it does appear to be). As gary said, you need to show us the html that the browser receives, not the php.

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

Ok, Here is my source code:
<td align="left" class = "productcategory">
<a href="http://www.zingerbrothers.com/component/page,shop.browse/category_id,4110630b02dd2254cd93bc5e39a11bd9/option,com_phpshop/Itemid,52/">Music CD</a><br />


</td>
and I defined productcategory as:
.productcategory a{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: blue;
text-decoration: none;
}
It still doesn't change color and underline. My template "a link" class defined the color and underline. I took all my links' underline out. Thanks for your reply and help!
Best regards

Lynda

Spectralizer
Spectralizer's picture
Offline
Enthusiast
Toronto, ON. Canada
Last seen: 15 years 26 weeks ago
Toronto, ON. Canada
Timezone: GMT-5
Joined: 2005-03-30
Posts: 53
Points: 0

How to change just one link style?

There's more than one way to do many things, I think this is one of them. Personally, I'd do it like this:

a#special {
 font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: blue;
text-decoration: none; 
}

for the CSS, and then for the HTML:

<a id="special" href="blahblahblah">blah</a>

But I haven't tried anything like this... maybe you'd have to be more specific in the CSS and define {correction, I tossed it together and it works fine in Firefox}

This is my .sig... there are many like it, but this one is mine.
My .sig is my best friend... It is my life.
I must master it as I must master my life.
My .sig, without me, is useless... Without my .sig, I am useless.

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

The reason I keep giving php code is I don't know how to put <a id="special" href="blahblahblah">blah</a> into my code. I only have the php source code like:

<tr valign="top">
<td align="left" class = "productcategory">
<?php
$ps_product_category->navigation_list($category_id);
?><br />
<?php
$ps_product_category->print_child_list($category_id);
?>

</td>
</tr>
the code : $ps_product_category->navigation_list($category_id);
is interpreted as <a href="http://www.zingerbrothers.com/component/page,shop.browse/category_id,
4110630b02dd2254cd93bc5e39a11bd9/option,com_phpshop/Itemid,52/">Music CD</a
after IE browser ( I see it from view source), I don't know how to insert <a id = "special" herf="this page> to $ps_product_category->navigation_list($category_id) , because it self is <a href="....">Music CD </a>
I can only apply css class to this php code, the result html code is from my browser I see.
Thank you fro helping me, I am just starting php and css.
Best Regards

Lynda

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How to change just one link style?

Try this: move the .productcategory a rule to the bottom of the stylesheet. Also, try removing the spaces around the equal sign in the html (the one for class="productcategory").
Can you show us the entire stylesheet and maybe a link to the html?

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

Please see my css sheet:

/* ##################### OVERALL SETTINGS ##################### QM: ok */
body {
margin : 0px;
padding : 0px;
background : url(../images/main_back.png) #DFDFDF;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
color : *#000;
}

td, tr, p, div {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
color : #585858; /*#000;*/
}

hr {
color : #eee;
height : 1px;
width : 100%;
}

/* ############## MAIN TABLE CONTAINER SETTINGS ############### QM: ok */
.maincontainer {
border : 8px solid #eee;
}

.headercontainer {
height : 182px;
width : 760px;
background : url(../images/header.jpg) #FFF no-repeat center;
}

.maincssmenucontainer {
height : 30px;
/* tried to add spacer 760px X 1px to the main menu to control not shrink menu to the middle, but not success */
background : url(../images/main_menu_spacer.gif) #FFF no-repeat center;
text-align : center
/* background-color : #FFF; */
}

.subcssmenucontainer {
height : 25px;
background-color : #84CA51;
}

.pathwaycontainer {
height : 20px;
background-color : #fff;
padding : 5px;
}

.leftmenucontainer {
width : 160px;
border-left : 1px solid #D0D0D0;
border-right : 1px solid #D0D0D0;
border-bottom : 1px solid #D0D0D0;
}

.rightmenucontainer {
width : 140px;
border-left : 1px solid #D0D0D0;
border-right : 1px solid #D0D0D0;
border-bottom : 1px solid #D0D0D0;
background-color : #eee;
}

/* ################## TOP CSS MENU SETTINGS ################### QM: ok */
#navcontainer {
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
font-weight : bold
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
width : auto;
}

#navlist {
margin : 0px;
padding : 0px;
background : url(../images/top_menu_back.png) #CEDEFF repeat-x top 0px 0px;
}

#navlist ul, #navlist li {
display : inline;
list-style-type : none;
}

#navlist a:link, #navlist a:visited {
padding : 5px 15px;
font-weight : bold;
margin : 0px;
text-decoration : none;
color : #333333;
height : 30px;
position : relative;
top : 5;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
position : relative;
top : 0;
background : url(../images/top_menu_hover.png) #84CA51 no-repeat top right;
color : #FFF;
}
/* control main sub-menu */
#subnavcontainer {
font-family : Verdana;
font-size : 11px;
font-weight : bold;
width : auto;
}

#subnavlist {
margin : 0px;
padding : 0px;
}

#subnavlist ul, #subnavlist li {
margin : 0px;
padding : 0px;
display : inline;
list-style-type : none;
}

#subnavlist a:link, #subnavlist a:visited {
padding : 0px 0px 0px 18px;
text-decoration : none;
color : #000000;
background : #84CA51;

}

#subnavlist a:link#subcurrent, #subnavlist a:visited#subcurrent {
color : #FFF;
}

#subnavlist a:hover {
/* text-decoration : underline; */
color : #FFF;
}

/* ##################### MODULE SETTINGS ###################### QM: ok */
table.moduletable {
width : 100%;
}

table.moduletable th {
font-size : 14px;
font-weight : bold;
text-align : center;
letter-spacing : 1px;
color : #333333;
background : #CEDEFF; /*light blue */
border-bottom : 1px solid #D0D0D0;
border-top : 1px solid #D0D0D0;
}

table.moduletable td {
padding : 2px;
}

/* ##################### FORMULAR SETTINGS #################### QM: ok */
.button {
border-top : 1px solid #ddd;
border-left : 1px solid #ddd;
border-bottom : 1px solid #666;
border-right : 1px solid #666;
background-color : #F0F0F0;
}

.inputbox {
border : 1px solid #ccc;
background-color : white;
margin : 2px;
}

/* ################# SECTION LISTING SETTINGS ################# QM: ok */
.sectiontableheader {
font-size : 12px;
font-weight : bold;
letter-spacing : 1px;
color : #FFF;
background : #84CA51;
border-bottom : 1px solid #D0D0D0;
border-top : 1px solid #D0D0D0;
padding : 3px;
}

.sectiontableentry1 {
vertical-align : top;
padding : 3px;
background : #F8F8F8;
}

.sectiontableentry2 {
vertical-align : top;
padding : 3px;
background : #F0F0F0;
}

/* ################# MAIN AND SUB MENU SYSTEM ################# QM: ok */
.mainlevel {
width : 145px;
height : 20px;
padding : 2px;
}

a.mainlevel:link, a.mainlevel:visited {
background : url(../images/main_menu_back.png) #84CA51 no-repeat right;
text-decoration : none;
}

a.mainlevel:hover {
background : url(../images/main_menu_back_hover.png) #84CA51 no-repeat right;
text-decoration : none;
}

.sublevel {
font-size : 12px;
}

a.sublevel:link, a.sublevel:visited {
text-decoration : none;
}

/* ########################### LINKS ########################## QM: ok */
/* here is the link affect the whole website links */
a:link, a:visited {
color : black;
text-decoration : none
/*text-decoration : underline;*/
}
a:hover {
color : #84CA51;
text-decoration: underline
}
/******************************************************/
/* this is supposed to affect Music CD page Music Store */
a#productcategory {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: blue;
text-decoration: none;
}
/*********************************************/

/* doesn't do any good */
a.category:link, a.category:visited {
font-weight : bold;
color : black;
text-decoration : none
}
a.category:hover {
color: yellow
}

.readon {
font-weight : bold;
}

/* ##################### PAGE NAVIGATION ###################### QM: ok */
.pagenavbar {
border-top : 1px solid #D0D0D0;
padding : 2px;
letter-spacing : 1px;
text-decoration : none;
}

.pagenav {
font-weight : bold;
color : #bbb;

}

a.pagenav:link, a.pagenav:visited {
/* text-decoration : underline; */
text-decoration : none;
}

a.pagenav:hover {
/* text-decoration : underline; */
text-decoration : none;
}

/* ################### SMALL FONT SETTINGS #################### QM: ok */
.small {
font-size : 12px;
color : #999;
}

.smalldark {
font-size : 12px;
color : #000;
}
.medium{
font-size : 14px;
color :#CCCCCC;
font-family : Arial Balck;
}

.createdate, .modifydate {
font-size : 10px;
color : #999;
}

/* ##################### VOTING SETTINGS ###################### QM: ok */
.content_rating {
font-size : 10px;
color : #999;
}

.content_vote {
font-size : 10px;
height : 22px;
padding-top : 2px;
padding-bottom : 2px;
padding-left : 10px;
padding-right : 10px;
background-color : #eee;
border : 1px solid #D0D0D0;
}

/* ##################### PATHWAY SETTINGS ##################### QM: ok */
.pathway {
letter-spacing : 1px;
font-size : 12px;
color : #000;
}

a.pathway:link, a.pathway:visited {
font-size : 12px;
text-decoration : none;
}

a.pathway:hover {
font-size : 12px;
}

/* ################### CONTENT PAGE SETTINGS ################## QM: ok */
.contentpane {
padding : 1px;

}

.contentpaneopen {
padding : 10px;
}
/* this changes content headeing */
.contentheading, .componentheading {
font-family : Arail, Helvetica, sans-serif;
font-size : 24px;
font-weight : bold;
color : #000;
width : 100%;
border-bottom : 1px solid #F0F0F0;
}

.contentpagetitle {
font-weight : bold;
color : #000;

}

a.contentpagetitle:link, a.contentpagetitle:visited, a.contentpagetitle:active {
text-decoration : none;
}

/* ###################### TABBED EDITING ###################### QM: ok */
.ontab {
background-color : #FFF;
border-left : 1px solid #D0D0D0;
border-top : 1px solid #D0D0D0;
text-align : center;
cursor : hand;
font-weight : bold;
color : #C00;
padding : 5px;
}
.offtab {
background-color : #F0F0F0;
border-left : 1px solid #D0D0D0;
border-top : 1px solid #D0D0D0;
border-bottom : 1px solid #D0D0D0;
text-align : center;
cursor : hand;
font-weight : normal;
color : #999;
padding : 5px;
}
.tabpadding {
border-left : 1px solid #D0D0D0;
border-bottom : 1px solid #D0D0D0;
}

.pagetext {
visibility : hidden;
display : none;
position : relative;
top : -19;
border-left : 1px solid #D0D0D0;
border-right : 1px solid #D0D0D0;
border-bottom : 1px solid #D0D0D0;
background-color : #FFF;
}
/*----- This is for gallery --------------*/
.fineprint { /* used for fine print */

font-size: 10px;

}
.albumdesc /*album description includes all text and background*/
{ font-size: 12px;
color: black
}
.whitefont /* for somethings don't wnat to exposeure */
{ font-size: 6px;
color: white
}
.head{ /* page headers */
font-family : Arail, Helvetica, sans-serif;
font-size : 24px;
font-weight : bold;
color : #000;
width : 100%;
border-bottom : 1px solid #F0F0F0;
}
.title{ /* album titles on main page */
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : black;
width : 100%;
border-bottom : 1px solid #F0F0F0
}
.modcaption /* modifies background for caption text to reside */
{
font-size: 10px;
text-align: left;
color: black;
background-color: #f0f0f0;

}

I don't know how to apply a#productcategory into my php code to affect the link Music CD, What I did is:
<td align="left" ><a id="productcategory">
<?php
$ps_product_category->navigation_list($category_id);
?><br />
<?php
$ps_product_category->print_child_list($category_id);
?> </a>
I know it is not right, just don't know how to do it.
The html code come out like:

[=red <td align="left" ><a id="productcategory">
<a href="http://www.zingerbrothers.com/component/page,shop.browse/category_id,4110630b02dd2254cd93bc5e39a11bd9/option,com_phpshop/Itemid,52/">Music CD</a><br />
</a>

</td>[/color]Thanks for your time and patience.
You can also go to the page and look:
http://www.zingerbrothers.com/component/option,com_phpshop/page,shop.browse/category_id,4110630b02dd2254cd93bc5e39a11bd9/option,com_phpshop/Itemid,52/Best Regards
Lynda

Lynda

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

sorry mess up html code, What I meant is:
<td align="left" ><a id="productcategory">
<a href="http://www.zingerbrothers.com/component/page,shop.browse/category_id,4110630b02dd2254cd93bc5e39a11bd9/option,com_phpshop/Itemid,52/">Music CD</a><br />
</a>

</td>

Lynda

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

How to change just one link style?

From W3C

<!ELEMENT A - - (%inline;)* -(A) -- anchor -->

That means an anchor element may contain 0 or more inline elements, but not an anchor.

Make the <td id="productcategory">, then do

#productcategory a {
    ...
    }
--------------

<td  id="productcategory" align="left" > <!-- align is illegal [1] html4+ -->
  <? ... ?>
</td>

Your script provides the anchor element and you don't end up illegally nesting anchors.

cheers,

gary

[1] From W3C
align = top|bottom|left|right [CI]
Deprecated. For visual user agents, this attribute specifies
the position of the caption with respect to the table. Possible
values:

* top: The caption is at the top of the table. This is the default value.
* bottom: The caption is at the bottom of the table.
* left: The caption is at the left of the table.
* right: The caption is at the right of the table.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How to change just one link style?

Lynda, it's hard to follow you when you keep changing the html. There is no need to change it (aside from the errors gary pointed out) or the php. You've changed the rule in question from a class to an id and moved it from a td to a span to an anchor. Leave it on the td as gary has pointed out. And incidentally, gary is one of the more knowledgeable people here (not to disclude Tony, Hugo, David and others) - he'll correct the problem for sure.

lyndalijun
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-08
Posts: 15
Points: 0

How to change just one link style?

Thanks fro all replying my questions! I appreciate it.
To wolf, I am sorry if I keep changing the code, what I did was just simply following the changes I received from those who suggested to me. If I do not show how I put the code they told me in php code and html result, how do they know their suggestion's result (worked or not) and where the problem is. It is possible that I made mistake for applying their code because I am pretty new for css and php, not know much about it. So I need to show them how I applied their suggestion.
yes, Gary is great. Thank you ! It works beautifully by your code:
#productcategory a {
...
}
--------------

<td id="productcategory" align="left" > <!-- align is illegal [1] html4+ -->
<? ... ?>
</td>

Best regards
Lynda

Lynda

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

How to change just one link style?

Lynda,

PHP makes the problems two-headed. From one view, you're using PHP to give value to variables and sometimes to build the html itself. The other view is from the html and css.

Getting the PHP to do your bidding with the sql etc. is straightforward. The other side is where we're involved. Here we start with writing good html and its stylesheet. Once the html is developed, you have to more or less reverse engineer it to develop PHP that will write that code.

We help you get the html+css right. We are not at all concerned about the PHP and only want to see the server *output*. It's up to you to get the script to deliver the right html.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.