I have the following HTML in conjunction with some PHP:
echo "<a href='" . $_SERVER["PHP_SELF"] . "?guess=" . $value . "' class='already-guessed'>" . $value . "</a>\n";
It applies a special class if it's been already guessed, as the class implies. I have this if it hasn't been guessed:
echo "<a href='" . $_SERVER["PHP_SELF"] . "?guess=" . $value . "'>" . $value . "</a>\n";
And this is the relevant CSS:
.letters a {
display: inline-block;
width: 40px;
height: 40px;
margin: 0 3px 6px 0;
background: #5ac9ff;
color: #fff;
line-height: 2.5em;
text-align: center;
text-decoration: none;
}
.letters a:nth-child(10n) {
margin: 0 0 8px 0;
}
.letters a:hover {
background: #54bff3;
}
.letters a:active {
background: #4fb4e4;
}
.already-guessed {
background: green;
}
So I just have it detect all anchor.
The selector for the anchor gives precedence. Change your code for the .already-guessed class as follows:
.already-guessed {
background: green !important;
}
Or, if you'd prefer, update the selector:
.letters a.already-guessed {
background: green;
}
Related
I am currently putting together a website, i have included a dynamic navigation bar developed purely in PHP with my basic ability.
However, using Chrome Dev Tool, i managed to obtain the style i wanted (on current page highlight the page name in white on navigation) , when including the style into my css file, the webpage would not show the style.
<?php
function outputHeader ($title){
echo '<!DOCTYPE html>';
echo '<html>';
echo '<head>';
echo '<title>' . $title . '</title>';
echo '<link rel="stylesheet" type="text/css" href="style.css">';
echo '</head>';
echo '<body>';
}
//Output Navigation
echo '<div id="banner">';
echo '<div id="nav">';
echo '<ul>';
function generateNav($pagename){
$page = array('index.php?' => 'Home', 'playerranking.php?' => 'Player Ranking', 'community.php?' => 'Community', 'register.php?' => 'Register','login.php' => 'Login',
);
foreach ($page as $link => $label){
if ($pagename == $label){
echo '<li><a class="current" href="' . $link . '">' . $label . '</li></a>';
}
else {
echo '<li>' . $label . '</li>';
}
}
echo '</ul>';
echo '</div>';
echo '</div>';
} >?
The css below
body {
background: #000;
margin: 0px;
}
#banner {
height: 109px;
width: 1295px;
background: #1d1d33;
margin-right: auto;
margin-left: auto;
}
#nav {
margin-right: 10%;
}
#nav ul {
overflow: visible;
text-decoration: none;
float: right;
}
#nav li {
display: inline;
font-family: Calibri, sans-serif;
font-size: 15px;
margin-top: 8%;
float: left;
padding-right: 30px;
list-style-type: none;
overflow: visible;
}
a#current {
color: #white;
}
#nav a {
text-decoration: none;
color: #8f8fa7;
}
From what i could see there was no two styles which were over-riding.
Help will be much appreciated
Thank you !
change
a#current {
color: #white;
}
to
#nav a.current {
color: white;
}
explanation:
# is the selector for id attributes, but you want to select the class "current". Class names are selected by .. Also, when using named colour values, don't prefix them with # - you only need the hash for hexadecimal rgb values.
In addition to all that, you have to add #nav in front of the rule so that it is more specific than the general rule #nav a. (You should also read up on CSS specificity in general)
I got some strange problems with my php-code
when I try to output this echo "<div class='button menu' onclick=\"javascript:location.href='$baseURI'\">Menu</div>";
sometimes it don´t load the css, even not the div -tags, just the plain "Menu" string
and it´s always printed before my table -tags
how is this possible?
PHP-Code:
<?php
$root_dir = $_SERVER['PHP_SELF'];
echo "<link rel='stylesheet' href='style.css' type='text/css'>";
if (!isset($_GET['command'])) {
echo "<div class='button' onclick=\"javascript:location.href='$baseURI?command=show'\">Personaldaten anzeigen</div>";
//echo "<div class='button' onclick=\"javascript:location.href='$baseURI?command=new'\">neue Person anlegen</div>";
//echo "<div class='button' onclick=\"javascript:location.href='$baseURI?command=work'\">Personaldaten bearbeiten</div>";
} else {
if ($_GET['command'] == "show") {
openSQL();
$sqlbefehl = 'select * from kontakt';
#mysql_query("SET NAMES 'utf8'");
$ergebnis = #mysql_query($sqlbefehl); // SQL-Befehl an die Datenbank schicken
$spalten = #mysql_num_fields($ergebnis);
echo "<table class='style'>";
echo "<tr>";
for ($i = 0; $i < $spalten; $i++) {
echo "<th class='th'>" . mysql_field_name($ergebnis, $i) . "</th>";
}
echo "</tr>";
while (false != ($row = mysql_fetch_row($ergebnis))) {
echo "<tr>";
for ($i = 0; $i < sizeof($row); $i++) {
echo "<td>$row[$i]</td>";
}
echo "</tr>";
}
echo "</table";
}
echo "<div class='button menu' onclick=\"javascript:location.href='$baseURI'\">Menu</div>";
}
function openSQL()
{
$server = "127.0.0.1";
$user = "root";
$passwort = "";
$db = "schule";
$dblink = #mysql_connect($server, $user, $passwort);
if (!#mysql_select_db($db)) {
echo "<br>Keine Verbindung zur Datenbank $db möglich!";
echo "<br>" . mysql_error();
die();
}
}
?>
CSS-Code:
body{
font-family: Verdana;
color: #fff;
background-color: #000;
}
.style{
border-collapse: collapse;
text-align: center;
}
.style table,.style th,.style td {
border: 1px solid white;
}
.style td {
overflow: hidden;
font-size: 12px;
}
.button{
height: 68px;
width: 200px;
border: 3px orange solid;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 5px;
vertical-align: center;
font-size: 24px;
margin-top: 15px;
background-color: #000;
}
.menu{
height: 36px;
width: 75px;
}
.delBtn{
height: 36px;
width: 95px;
}
.del{
background-image: url(del.png);
background-repeat: no-repeat;
width:24px;
height: 24px;
background-size: 25px 25px;
}
.edit{
background-image: url(edit.png);
background-repeat: no-repeat;
background-position: center;
width:24px;
height: 24px;
background-size: 40px 40px;
}
So Im answering my own Question. It was the missing ">" at the closing table-tag. Since I fixed the missing character, the code now work properly.
Thanks for all of your effort <3
I was really unsure how to phrase this problem as it's something I've never encountered before.
My wordpress logo image which is set as a background using css is really buggy when hovering over it. Sometimes I can click it and sometimes I can't. Is this becuase I set the image in css and used text-indent to remove the standard text or is it something else?
Here's the live link. Try hovering over the logo to see excactly what I'm talking about.
I'm using a custom function in my functions.php to print out the logo and menu as seen here:
/**
* Prints out an ir-anchor with the site-title.
*
*/
function sircon_logo($echo = true) {
$htmlLogo = '';
if (get_bloginfo('name')) {
$htmlLogo = '<a';
$htmlLogo .= ' id="site-title"';
$htmlLogo .= ' class="ir"';
$htmlLogo .= ' href="' . get_bloginfo('url') . '"';
$htmlLogo .= ' rel="home">';
$htmlLogo .= get_bloginfo('name');
$htmlLogo .= '</a>';
}
if($echo) echo $htmlLogo;
else return $htmlLogo;
}
I call it in my header.php using this:
<?php sircon_logo(); ?>
And this is my styles:
/* image replace */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/* logo */
#site-title {
position: absolute;
display: block;
top: 25px; left: 15px;
width: 157px; height: 64px;
background-repeat: none;
background-image: url('style/logo.png');
}
#site-title h1 {
margin: 0;
}
#site-slogan {
display: none;
}
#media (min-width: 500px) {
#site-slogan {
display: none;
width: 320px;
margin: 0 auto;
color: #fff;
font-size: 26px;
font-style: italic;
line-height: 1.1;
letter-spacing: -1px;
text-align: center;
padding: 14px 0 0 30px;
}
}
#media (min-width: 760px) {
#site-slogan {
display: none;
width: auto;
padding: 0;
margin: 0;
position: absolute;
top: 10px; right: 10px;
}
}
The Reason is the nav bar is overlapping the logo. So Apply z-index to the logo
#site-title {
z-index:300;
}
Set a z-index for your logo:
#site-title {
z-index: 500;
}
For further information check out this
Here are 2 solutions for your issue
Solution 1
#site-title {
z-index: 500;
}
Solution 2
#main-menu {
left: 220px;
right: 0;
width: auto;
}
Hope this helps you :)
I have a php file, and I am fairly novice at website development, but I've been helping a friend out. On the site we had some images that have been there for months, and recently they disappeared. I know the path to the images is still correct, and nothing with the coding has changed. Any ideas on why this could be broken? The pictures were in the div class = "graphicbuttons_cont"
$poli_more = do_shortcode('[pl_modal title="Buy & Sell" type="tab_links" label="<img class=\'\' title=\'Buy & Sell\' src=\'/wp-content/uploads/2013/02/buysell_icon.png\' /><br /><span>Buy & Sell</span>"]{27}[/pl_modal]');
$feed_back = do_shortcode('[pl_modal title="Feedback" type="tab_links" label="<img class=\'\' title=\'Feedback\' src=\'/wp-content/uploads/2013/02/feedback_icon.png\' /><br /><span>Feedback</span>"][gravityform id=4 title=false ajax=true field_values=\'store_page_id={28}\'][/pl_modal]');
$email_list = do_shortcode('[pl_modal title="email list" label="<img class=\'\' title=\'email list\' src=\'/wp-content/uploads/2013/02/email_icon.png\' /><br /><span>email list</span>"][gravityform id=1 title=false][/pl_modal]');
$desc_template = '<div id="header_container">' .
'<h1 style="text-transform: uppercase;" class="entry-title">' .
'Game on {0}' .
'</h1>' .
'</div>' .
'<div class="store_banner_class">' .
'<img style="height: 145px; width: 100%;" src="{33}" class="banner_img" />' .
'</div>' .
'<div class="graphicbuttons_area">' .
'<div class="graphicbuttons_cont">' .
$poli_more.
'</div>' .
'<div class="graphicbuttons_cont">' .
'<a href="https://maps.google.com/maps?saddr={25}&daddr={26}" target="_blank">
<img title="Directions" src="/wp-content/uploads/2013/02/getdirection_icon.png" /><br /><span>Directions</span>
</a>' .
'</div>' .
'<div class="graphicbuttons_cont">' .
'<a title="Follow " href="{29}" target="_blank">
<img title="Follow" src="/wp-content/uploads/2013/02/fblikeus_icon.png" /><br /><span>Follow </span>
</a>' .
'</div>' .
'<div class="graphicbuttons_cont">' .
$email_list.
'</div>' .
'<div class="graphicbuttons_cont">' .
'<a title="Review " href="{30}" target="_blank">
<img title="Review" src="/wp-content/uploads/2013/02/gplus_icon.png" /><br /><span>Review </span>
</a>' .
'</div>' .
'<div class="graphicbuttons_cont">' .
$feed_back.
'</div>' .
'</div>' .
Here's the style.css page,
#main_container {
padding: 30px;
background: #f1f1ef;
margin-top: -15px;
margin-bottom: 20px;
}
#store_image_container {
float: left;
width: 33%;
}
#gen_info_container {
float: left;
width: 61%;
margin-left: 60px;
}
#header_container h1 {
text-transform: uppercase;
float: left;
line-height: 32px;
font-size: 24px;
color: #ffffff;
padding-left: 10px;
}
#header_container {
background-color: #474647;
padding: 5px;
height: 32px;
margin-top: 20px;
}
#store_image_container img {
margin-bottom: 20px;
}
#data_gen_info {
margin-bottom: 22px;
clear: both;
}
#label_gen_info, .social-icon a {
font-size: 12px;
color: #37a8ab;
}
#label_notefrmowner {
font-size: 22px;
color: #B98BBF;
}
#data_notefrmowner {
margin-bottom: 30px;
}
#data_gen_info div table, #data_notefrmowner div table {
border: 0px;
}
#data_gen_info div table tr td, #data_notefrmowner div table tr td {
border: 0px;
}
#map_slideout {
display: none;
height: 410px;
}
#menu_cont {
float: right;
margin-right: 20px;
line-height: 32px;
}
#slider_button {
z-index: 1035;
height: 20px;
}
#click_btn {
background: url("viewstorelocator.png") no-repeat scroll 0 0 transparent;
padding: 0 196px 30px 0;
position: absolute;
right: 15px;
top: 0;
}
.tab_links, .tab_links:hover {
color: #ffffff;
margin: 0 10px 0 10px;
font-size: 12px;
text-transform: uppercase;
background-color: transparent;
text-shadow: 0 0 0 transparent; display: inline-block;
}
#sl_div img {
max-width: none;
}
#directionurl {
background: #37A8AB;
color: #ffffff;
box-shadow: none;
text-shadow: none;
border: 0px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 4px 10px;
font-size: 12px;
}
.social-icon {
float: left;
margin-right: 10px;
width: 31%;
}
.social-icon a {
color: #37A8AB;
}
.social-icon span {
display: inline-block;
width: 100%;
text-transform: uppercase;
}
.social-icon .social-icon-inner {
height: 130px;
}
.store_banner_class{
width: 100%;
overflow: hidden;
}
.banner_img{
height: 330px;
width: 100%;
}
.graphicbuttons_area{
background: none repeat scroll 0 0 #F1F1EF;
padding: 20px 0px;
text-align: center;
}
.graphicbuttons_cont{
display: inline-block;
margin: 0 15px;
}
.graphicbuttons_cont span{
color: #37A8AB;
font-family: "Montserrat";
font-size: 14px;
text-transform: uppercase;
This has nothing to do with your CSS and everything to do with your image locations...your urls in your php code are /wp-content/uploads/2013/02/fblikeus_icon.png and the url being printed in your live site are /portugal/wp-content/uploads/2013/02/fblikeus_icon.png
I would suggest figuring out why there is a discrepancy there. When I take /portugal/ out of your paths in Chrome's dev tools...your images show up fine.
I have a comment system, it works by adding a row to a SQL database. Anyway That works, but then when I echo out the comment div gets all messed up.. Anyway here is the page it is on: http://learntc.net/index.php.
PHP:
while($row = mysql_fetch_array($result))
{
if ($count==1)
{
$bg == "33383C" ;
$count = 0;
}
echo "<div style='background-color: $bg; border: 1px soild silver;' class='comment'>";
echo "<div class='imageAndName'>";
echo "<img src='". $row["image"] ."' class='cPic'/>";
echo "<div class='UserLink'><a href='" . $row["page"] . "'>" . $row["username"] . "</a></div>";
echo "</div>";
echo "<div class='textStuff'>";
echo "<div class='post'>" . $row["comment"] . "</div>";
echo "<div style='color: gray; font-size: 8px'>" . $row["date"] . "</div>";
echo "</div>";
echo "</div>";
$bg = "#282C2F";
$count = $count + 1;
}
CSS:
.comments{
float: right;
padding: 10px;
width: 50%;
border: 1px solid #454D53;
}
.cPic{
width: 60px;
height: 60px;
}
.imageAndName{
width: 30%;
overflow: hidden;
float: left
}
.imageAndName a{
display: block;
}
.textStuff{
width: 70%;
float: right;
}
.post{
overflow: hidden;
width: 100%;
}
.comment{
padding-bottom: 5px;
}
Add clear: both to your .comment style.
Problem one:
$bg == "33383C" ;
should be
$bg = "#33383C";
I don't see anything else. The div is probably screwed up for this reason.