malma Posted March 2, 2015 Share Posted 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"); ?><?phpif (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... Quote Link to comment Share on other sites More sharing options...
maxxd Posted March 2, 2015 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
malma Posted March 3, 2015 Author Share Posted 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.. Quote Link to comment Share on other sites More sharing options...
maxxd Posted March 3, 2015 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
malma Posted March 3, 2015 Author Share Posted 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;} Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 3, 2015 Share Posted March 3, 2015 See the note about privacy and the visited pseudo class here: https://developer.mozilla.org/en-US/docs/Web/CSS/:visited Quote Link to comment Share on other sites More sharing options...
maxxd Posted March 3, 2015 Share Posted 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... Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 3, 2015 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
malma Posted March 3, 2015 Author Share Posted 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.. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 3, 2015 Share Posted 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"? Quote Link to comment Share on other sites More sharing options...
malma Posted March 3, 2015 Author Share Posted 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 Quote Link to comment Share on other sites More sharing options...
CroNiX Posted March 3, 2015 Share Posted 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'); Quote Link to comment Share on other sites More sharing options...
malma Posted March 3, 2015 Author Share Posted March 3, 2015 I want when you click on the link to become bold Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 3, 2015 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 3, 2015 Share Posted 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. 1 Quote Link to comment Share on other sites More sharing options...
malma Posted March 3, 2015 Author Share Posted March 3, 2015 (edited) >>>>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 Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 3, 2015 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 3, 2015 Share Posted 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\""; } Quote Link to comment Share on other sites More sharing options...
malma Posted March 3, 2015 Author Share Posted 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 Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 3, 2015 Share Posted March 3, 2015 Out of curiosity, what did you need to change? Quote Link to comment Share on other sites More sharing options...
Solution malma Posted March 3, 2015 Author Solution Share Posted 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 Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 3, 2015 Share Posted 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! Note that I marked the topic as solved. If you need anything else, please mark it as unsolved...or start a new topic. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.