Problem with selecting bold

malma · March 2, 2015

Hello members,

I'm having problem with selecting bold, I want the links selected to turn bold. I'm following certain tutorials as i'm trying to learn php, here are the codes.

<?php require_once("includes/connection.php"); ?>
<?php require_once("includes/functions.php"); ?>
<?php
if (isset($_GET['subj'])) {
    $sel_subj = $_GET['subj'];
    $sel_page = "";
} elseif (isset($_GET['page'])) {
    $sel_subj = "";
    $sel_page = $_GET['page'];
} else {
    $sel_subj = "";
    $sel_page = "";
}
?>
<?php include("includes/header.php"); ?>
<table id="structure">
<tr>
<td id="navigation">
<ul class="subjects">
<?php

    $subject_set = get_all_subjects();

    while($subject = mysqli_fetch_array($subject_set)) {
echo "<li";
if ($subject["id"] == $sel_subj) {
echo "class=\"selected\"";
}
echo "><a href=\"content.php?subj=" . urlencode
($subject["id"]) . "\">{$subject["menu_name"]}</a></li>";

$page_set = get_all_pages_for_subject($subject["id"]);
echo "<ul class=\pages\">";
while($page = mysqli_fetch_array($page_set)) {
    echo "<li><a href=\"content.php?page=" . urlencode
    ($page["id"]) . "\">{$page["menu_name"]}</a>
    </li>";
   }
    echo "</ul>";
   }
?>
</ul>
</td>
<td id="page">
<h2>Content Area</h2>
<?php echo $sel_subj; ?><br />
<?php echo $sel_page; ?><br />
</td>
</tr>
</table>

<?php require("includes/footer.php"); ?>

Thank you for your help...

maxxd · March 2, 2015

Page element display is a CSS issue. If, by "links selected", you mean links that the user has already visited, use the 'a:visited' selector in your CSS file. If you mean the links to which you attach the class 'selected', you'd want to define that class in your CSS file.

Also, please use the code tags in the post editor ("< >" on the toolbar) when posting code to the forum - it makes everything much easier to read.

malma · March 3, 2015

Thank you for quick reply maxxd;

I have edited my css and put 'visited' instead of 'selected' but still its the same.

I think it makes sence if I post my css codes too:

<html>
<head><title>CSS Example</title>
<STYLE TYPE="text/css">
  H1 { font-size: x-large; color: green }
  H2 { font-size: large; color: back }
  html {height: 100%; width: 100%; }
body {wight: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px;
font-family: Verdina, Arial, Helvetica, Sans-serif, Times-New-Roman;
background: #D4E6F4;
font-size: 13px; line-height: 15px; }
img { border: none; }
table, tr, td {border-collapse: collapse; vertical-align: top;
font-size: 13px; line-height: 15px;}
a {color: #8D0D19;}
#header {height: 70px; margin: 0px; padding: 0px; text-align: left;
background: #1A446C; color: #D4E6FA;}
#header h1 {padding: 1em; margin: 0px;}
#main {margin: 0px; padding: 0px; height: 600px; width: 100%;
background: #EEE4B9;}
#structure {height: 600px; width: 100%}
#footer {height: 2em; margin: 0px; padding: 1em; text-align: center;
background: #1A446C; color: #D4E6FA; }



/* Navigation */
#navigation {width: 150px; padding: 1em 2em; color: #D4E6FA;
background: #8D0D19; }
#navigation a {color: #D4E6FA; text-decoration: none; }
ul.subjects {padding-left: 0; list-style: none;}
ul.pages {padding-left: 2em; list-style: square;}
.visited {font-weight: bold;}



/* Page Content */
#page {padding-left: 2em; vertical-align: top; background: #EEE4B9; }
#page h2 {color: #8D0D19; margin-top: 1em; }
#page h3 {color: #8D0D19;}
</STYLE>
</head>
<body>

</body>
</html>

Once again, thank you for your help..

maxxd · March 3, 2015

Change line 32 from

.visited

to

a:visited

and see if that does what you're looking for.

You want to use the native :visited pseudo-class instead of specifically setting a separate style on the element. The browser will read and understand :visited and invoke the rule when the user has followed a link to it's target page. I think that's what you're attempting to do.

malma · March 3, 2015

Yes exactly that is what I want to do.

I have done the changes but still it won't work

#navigation {width: 150px; padding: 1em 2em; color: #D4E6FA;
background: #8D0D19; }
#navigation a {color: #D4E6FA; text-decoration: none; }
ul.subjects {padding-left: 0; list-style: none;}
ul.pages {padding-left: 2em; list-style: square;}
a:visited {font-weight: bold;}

cyberRobot · March 3, 2015

See the note about privacy and the visited pseudo class here:

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

maxxd · March 3, 2015

@cyberRobot: Hunh. Interesting read - thanks!

So, unless that's changed in the 5 years since that article was written, it's not possible to boldface visit links. However, you can change the color - you may have to get a bit more specific than the example code above ('li a:visited' or something similar).

Off to do some research about the current handling of :visited links...

cyberRobot · March 3, 2015

@malma - It looks like you are adding a "selected" class to some <li> tags. Are you trying to bold the links within the <li> tags that have been marked as "selected"?

If so, have you tried the following:

.selected a { font-weight:bold; }

Note that the following example seems to work:

<style type="text/css">
.selected a { font-weight:bold; }
</style>
 
<ul>
<li class="selected"><a href="#">Link 1</a></li>
<li class="selected"><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

malma · March 3, 2015

Yes exactly that is what I want to do.

I have done the changes but still it won't work

#navigation {width: 150px; padding: 1em 2em; color: #D4E6FA;
background: #8D0D19; }
#navigation a {color: #D4E6FA; text-decoration: none; }
ul.subjects {padding-left: 0; list-style: none;}
ul.pages {padding-left: 2em; list-style: square;}
a:visited {font-weight: bold;}

Thanks for your help..

cyberRobot · March 3, 2015

Yes exactly that is what I want to do.

I have done the changes but still it won't work

Sorry, could you clarify what you want to do. Are you trying to styles links which have been visited...or are you trying to styles links that are under a tag which has been marked "selected"?

malma · March 3, 2015

@malma - It looks like you are adding a "selected" class to some <li> tags. Are you trying to bold the links within the <li> tags that have been marked as "selected"?

If so, have you tried the following:

.selected a { font-weight:bold; }

Note that the following example seems to work:

<style type="text/css">
.selected a { font-weight:bold; }
</style>
 
<ul>
<li class="selected"><a href="#">Link 1</a></li>
<li class="selected"><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

>>>>>>>>>>>>   These are my codes  <<<<<<<<<<<<<<<


$output .= "<li";
        if($subject['id']) { $output .="
        class=\"visited\"";}
        $output .= "><a href=\"content.php?subj=" . urlencode(
        $subject['id']) . "\">{$subject["menu_name"]}</a></li>";
        $page_set = get_pages_for_subject($subject['id']);
        $output .="<ul class=\"pages\">";
        while($page = mysqli_fetch_array($page_set)) {
            $output .= "<li";
            if($page['id'] == $sel_page['id']) { $output .= " 
            class=\"visited\""; }
 $output .="><a href=\"content.php?page=" . urlencode($page['id']) .
 "\"> {$page["menu_name"]}</a></li>";

>>>>>>>>>>>>>>>   This is my css   <<<<<<<<<<<<<


#navigation {width: 150px; padding: 1em 2em; color: #D4E6FA;
background: #8D0D19; }
#navigation a {color: #D4E6FA; text-decoration: none; }
ul.subjects {padding-left: 0; list-style: none;}
ul.pages {padding-left: 2em; list-style: square;}
.selected {font-weight: bold;}

Yes I'm trying to bond a link with <li> tag

CroNiX · March 3, 2015

You can also just use jQuery and the $("a:visited") selector to override that browser behavior.

$("a:visited").css('font-weight', 'bold');

malma · March 3, 2015

I want when you click on the link to become bold

cyberRobot · March 3, 2015

Yes I'm trying to bond a link with <li> tag

Did you try changing this:

.selected {font-weight: bold;}

To this:

.selected a {font-weight: bold;}

Note the anchor reference ("a") after .selected

cyberRobot · March 3, 2015

I want when you click on the link to become bold

Don't the links just go to another page? If so, you're not really going to see the bold effect once a link is clicked.

malma · March 3, 2015

>>>>They do go to another link, i'm still using tutorials in my learning. This is exactly how it is in the tutorials but it happens not to work ( .selected a {....... )

Is there another way I can posibly go around this?

Edited March 3, 2015 by malma

cyberRobot · March 3, 2015

>>>>They do go to another link, i'm still using tutorials in my learning. This is exactly how it is in the tutorials but it happens not to work ( .selected a {....... )

Is there another way I can posibly go around this?

Sorry, it's still unclear to me on what you are trying to do. The ".selected a" declaration should make all the anchor tags bold as long as they are under a tag with the class of "selected".

However, it sounds like you want all the anchor tags to be normal font weight. Then, if someone clicks a link, you want to make that link bold. You could use JavaScript to accomplish this, but most visitors won't see the change since the browser will take them to another page upon clicking a link.

cyberRobot · March 3, 2015

Let me try this a different way. Looking at your original code, it looks like you are processing a link click. A visitor will click on a link which passes a GET variable named "subj" or "page". After reading in the values, you grab and display another set of links from a database query. If any of those links are related to the GET variable passed, it flags them as "selected".

Does that roughly sound like what you are doing? If so, have you looked at the browser's source code to see if the "selected" class appears anywhere? Perhaps the follow echo statement isn't getting executed:

if ($subject["id"] == $sel_subj) {
    echo "class=\"selected\"";
}

malma · March 3, 2015

Let me try this a different way. Looking at your original code, it looks like you are processing a link click. A visitor will click on a link which passes a GET variable named "subj" or "page". After reading in the values, you grab and display another set of links from a database query. If any of those links are related to the GET variable passed, it flags them as "selected".

Does that roughly sound like what you are doing? If so, have you looked at the browser's source code to see if the "selected" class appears anywhere? Perhaps the follow echo statement isn't getting executed:
if ($subject["id"] == $sel_subj) {
    echo "class=\"selected\"";
}

Thank you very much for your help, it has finally worked. I really appreciated your help guys

cyberRobot · March 3, 2015

Out of curiosity, what did you need to change?

malma · March 3, 2015

The first advice a got was that I should use visited instead of .selected a {...} infact i was using ' .selected ' without 'a' but after removing visited and adding a as you adviced me it work. Thanks a lot

cyberRobot · March 3, 2015

The first advice a got was that I should use visited instead of .selected a {...} infact i was using ' .selected ' without 'a' but after removing visited and adding a as you adviced me it work. Thanks a lot

Glad to hear it! :happy-04:

Note that I marked the topic as solved. If you need anything else, please mark it as unsolved...or start a new topic.

Sign In

Problem with selecting bold

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information