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)
Related
I'm trying to make the hamburger icon clickable, so that it opens the .top-bar nav menu. But it doesn't work, am I not targeting it correctly? It does hide the .top-bar and display hamburger icon when I resize the window, but on click, nothing happens. I've tried playing with multiple classes in order to target the top-bar, all without any success. Does the problem lay in how I display the top bar?
Please find the code below.
HTML (header)
<header class="header" id="myHeader">
<div class="container">
<?php
$custom_logo_id = get_theme_mod('custom_logo');
$logo = wp_get_attachment_image_src($custom_logo_id, 'full');
if (has_custom_logo()) {
echo ' <img class="site-logo" src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '"> ';
} else {
echo '<h1 class="site-logo">' . get_bloginfo('name') . '</h1>';
}
?>
<label for="toggle">☰</label>
<input type="checkbox" class="toggle">
<?php
wp_nav_menu(
array(
'theme_location' => 'top-menu',
'menu_class' => 'top-bar'
)
);
?>
</div>
</header>
CSS
header .container {
height: 100%;
z-index: 10;
display: flex;
align-items: center;
position: relative;
}
header .container .top-bar {
list-style-type: none;
display: flex;
}
header .container .site-link,
.site-logo {
margin-right: auto;
}
header .top-bar li a {
padding: 0 2rem;
color: var(--off_white);
font-size: 1.3rem;
text-decoration: none;
z-index: 1000;
}
header .top-bar li.current-menu-item a {
background: var(--secondary);
padding: 2.5rem 2rem 2.5rem 2rem;
}
header label {
cursor: pointer;
font-size: 2rem;
color: var(--off_white);
display: none;
}
.toggle {
display: none;
}
#media (max-width: 992px) {
header label {
display: block;
}
.top-bar li {
display: none;
}
.toggle:checked~li {
display: block;
}
}
I am trying to have the active page number highlighted, but having no success in getting to work. Can anyone help please.
this is the CSS for the pagination
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .5s;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
This the pagination code :
<div class="pagination">
<?php
$get = $_GET;
$current_page = isset($get['page'])?$get['page'] : 1;
for($i=1;$i<=$tpages;$i++) {
$get['page'] = $i; // set the page parameter
$qs = http_build_query($get,'','&');
if($i==$current_page) {
echo "current_page $current_page <br />";
$pagLink .= "<class='active'><a href='despatchdata_results.php?$qs'>$i</a>";
}else{
$pagLink .= "<a href='despatchdata_results.php?$qs'>$i</a>";
}
?>
</div>
This
$pagLink .= "<class='active'><a href='despatchdata_results.php?$qs'>$i</a>";
is malformed.
Your active style applies to the a element (a inherits the active class, as you can see in the CSS definition of the style a.active)
Try this:
$pagLink .= "<a class='active' href='despatchdata_results.php?$qs'>$i</a>";
and let me know if it solves it
Try putting the class name inside of the a tag, for example;
<a class=“classname”>Link text</a>
Your CSS does not match your generated HTML, also your HTML is not valid:
.pagination .active a {
background-color: dodgerblue;
color: white;
}
.pagination div:not(.active) a:hover {background-color: #ddd;}
and update your generated HTML with:
$pagLink .= "<div class='active'><a href='despatchdata_results.php?$qs'>$i</a></div>";
I have a php to echo three variable fields :
<li>
<mark> <?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo $toprow2['overallRank'] ." ".$toprow2['EmployeeName'] ." ".$toprow2['Total_points_Rewarded']."<br/>";} ?>
</mark>
</li>
Among these three variables of the list,I want to align the first field "overallRank " to left ,"EmployeeName " to centre and "Total_points_Rewarded" to extreme right.
Below is the code I tried for the first field:
<li>
<mark> <?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo "<div style = "text-align=left" ."$toprow2['overallRank'] "</div>"." ".$toprow2['EmployeeName'] ." ".$toprow2['Total_points_Rewarded']."<br/>";} ?>
</mark>
</li>
when I use three divs :
echo "<div style ='text-align:left'>" . $toprow2['overallRank'] . "</div><div style ='text-align:centre'>" . $toprow2['EmployeeName'] . "</div><div style ='text-align:right'>" . $toprow2['Total_points_Rewarded'] . "</div>";
I am not able to align them :Current scenario :
the first block is the rank,then name and last points - the three fields that I am trying to echo here.
css used for above situation:
li mark {
display: inline-block;
justify-content: space-between;
}
li mark div {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: grey;
}
#Abhay has a great solution :css aint working here,though
current situation:
Use flex:
echo "<div class='parent-div'><div class='rank'>" . $toprow2['overallRank'] . "</div><div class='name'>" . $toprow2['EmployeeName'] . "</div><div class='points'>" . $toprow2['Total_points_Rewarded'] . "</div></div>";
Your CSS:
.parent-div{
display: -webkit-flex; /* Safari */
display: flex;
}
.rank,.name,.points{
width:33%;
}
.name{
text-align: center;
}
.points{
text-align: right;
}
Small working ex:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.parent-div{
display: -webkit-flex; /* Safari */
display: flex;
}
.rank,.name,.points{
width:33%;
}
.name{
text-align: center;
}
.points{
text-align: right;
}
</style>
</head>
<body>
<div class="parent-div">
<div class='rank'>Rank</div>
<div class='name'>Name</div>
<div class='points'>Points</div>
</div>
<div class="parent-div">
<div class='rank'>Rank</div>
<div class='name'>Name</div>
<div class='points'>Points</div>
</div>
<div class="parent-div">
<div class='rank'>Rank</div>
<div class='name'>Name</div>
<div class='points'>Points</div>
</div>
</body>
</html>
If continuing with span :
echo "<div class='parent-div'><span class='rank'>" . $toprow2['overallRank'] . "</span><span class='name'>" . $toprow2['EmployeeName'] . "</span><span class='points'>" . $toprow2['Total_points_Rewarded'] . "</span></div>";
Try this CSS:
.parent-div{
display: -webkit-flex; /* Safari */
display: flex;
}
.rank,.name,.points{
display:block;
width:33%;
}
.name{
text-align: center;
}
.points{
text-align: right;
}
Please mind that I have given class: parent-div to all three spans container div.
I hope it helps
Why don't you use
li mark {
display: inline; /* don't use inline-block */
justify-content: space-between;
}
li mark div {
float: left; /* here you put the float so it can be after the first li mark */
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: grey;
}
li mark div:first-child {
float: left; /* it will put your first div in left side */
}
li mark div:last-child {
float: right; /* it will be in the right side */
}
Also why not remove a width. For example instead being without it in the classes above, this means the width is 100% you could adjust it to width: 50% to half.
`echo '<div class="col-sm-4">';
echo '<div class="product-image-wrapper">';
echo'<div class="single-products">';
echo'<div class="productinfo text-center">';
echo'<a href="product-detail.php id='.$row[9].'&item='.$_REQUEST['item'].'&product='.$row[2].'&pro=2">';
echo '<img src="image/thumb_images/'.$row['6'].'" />'; // image
$thumb='image/thumb_images/'.$row[6];
echo '<h6>Rs. ' .ROUND($row['SellingPrice']).'/-';
if($row['discount']>0){;
echo ' <span>MRP. ' .$row[4].' /-</span>';
}else{}
echo '</h6>';
echo'<h6>'.$row[2].'</h6>';
$name=$row[2];`
echo' </div>';
echo '</div>';
echo '</div>';
echo '</div>';
CSS
.single-products {
position: relative;
}
.new, .sale {
position: absolute;
top: 0;
right: 0;
}
.productinfo h6{
color:#fff;
}
.productinfo h5{
font-size: 70%;
text-decoration: line-through;
font-weight:bold;
color:#999;
}
.product-overlay h2{
margin-top:250px;
color: red;
}
.single-products h6{
color:#fff;
font-size: 90%;
vertical-align: top;
text-decoration: none;
line-height: 1;
}
.single-products span{
font-size:12px;
text-decoration: line-through;
font-weight:300;
color:#Fff;
}
.productinfo p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #696763;
}
here i have write my bootstrap code and below i have attach my screenshot when i fixed size then it work fine but i want to fill up this gap by image... i have attach css also please read out the above code and give me answer related to problem..
please suggest me
With reference to Akhil try the following solution Kuldeep. Hope it works.
<?php
while($row = mysql_fetch_array($result)){
$product_count++ ;
echo '<div class="col-sm-4" style="text-overflow:ellipsis;">';
//put your code here
//put your code here
//put your code here
echo'</div>';
if($product_count % 3 == 0){
echo'<div style="clear: both;"></div>';
}
}
?>
kuldeep, either fix the height of the box and if there is more text you can use text-overflow: ellipsis; for showing more text is there. And one other option is You need to put a clear:both tag after each 3 boxes. You can make it in condition loop I think.
Hello i am following this tutorial to make a php calendar
http://www.youtube.com/watch?v=l76uglZBjpk
I have three files
show_calendar.php
<!DOCTYPE html>
<html>
<head>
<link href="calCss.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<?php include ("calendar_start.php"); ?>
</body>
</html>
calendar start.php
<?php
//$showmonth = $_POST['showmonth'];
//$showyear = $_POST['showyear'];
$showmonth = 11;
$showyear = 2012;
$day_count = cal_days_in_month(CAL_GREGORIAN, $showmonth, $showyear);
$pre_days = date('w', mktime(0,0,0, $showmonth, 1, $showyear));
$post_days = (6 - (date('w', mktime(0,0,0, $showmonth, $day_count,$showyear))));
echo '<div id="calendar_wrap">';
echo '<div class="title_bar">';
echo '<div class="previous_month"></div>';
echo 'div class="show_month">' . $showmonth . '/' . $showyear . '</div>';
echo '<div class="next_month"></div>';
echo '</div>';
echo '<div class="week_days">';
echo '<div class="days_of_the_week">Sun</div>';
echo '<div class="days_of_the_week">Mon</div>';
echo '<div class="days_of_the_week">Tue</div>';
echo '<div class="days_of_the_week">Wed</div>';
echo '<div class="days_of_the_week">Thur</div>';
echo '<div class="days_of_the_week">Fri</div>';
echo '<div class="days_of_the_week">Sat</div>';
echo '<div class="clear"></div>';
echo '</div>';
/* Previous Month Filler Days */
if ($pre_days != 0) {
for($i = 1 ; $i<=$pre_days;$i++) {
echo '<div class="non_cal_day"></div>';
}
}
/* Current Month */
for($i=1; $i<= $day_count; $i++) {
echo '<div class="cal_day">';
echo '<div class="day_heading">' . $i . '</div>';
echo '</div>';
}
/* Next Month Filler Days */
if ($post_days != 0) {
for ($i=1; $i<=$post_days; $i++) {
echo '<div class="non_cal_day"></div>';
}
}
echo '</div>';
?>
and the css file calCss.css
#calendar_wrap {
width: 924px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.title_bar {
width: 100%;
height: 30px;
}
.previous_month {
float: left;
width: 308px;
height: 30px;
text-align: left;
}
.show_month {
float: left;
width: 308px;
height: 30px;
text-align: center;
}
.next_month {
float: left;
width: 308px;
height: 30px;
text-align: right;
}
.week_days {
width: 100%;
}
.days_of_week {
float: left;
width: 14%;
text-align: center;
}
.cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #9C9;
}
.day_heading {
position: relative;
float: left;
width: 40px;
height: 16px;
padding: 6px;
color: #000;
font-family: Arial;
font-size: 14px;
}
.openings {
width: 100%;
clear:left;
text-align: center;
}
.non_cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #CCC;
}
.clear {
clear: both;
}
my problem is show_calendar.php is not showing any css only text of the days of teh week and numbers in the month. Im not sure what i could be doing wrong, does anyone have any ideas? Im using xampp local server to view the php file. Thanks
I see just one small mistake:
you forgot one < here:
echo 'div class="show_month">' . $showmonth . '/' . $showyear . '</div>';
I tested it like that and works fine for me..
If you are using an IDE like ( dreamweaver ) for example , make sure that you set the Web URL for your localhost to (localhost/myProject) not (localhost/myProject/index.php) .. because it sometimes makes error , reaching the css directory .. I had that error , and that fixed it , hope it works for you :)
I've checked everything and found no reason why this shouldn't work. Probably your css file could not be loaded. You should check what you browser console says.
This is how you can debug this problem:
start the script in your browser
press shift + strg + j to start the developer tools (this shortcut works vor Forefox and Chrome f12 if you got IE)
select 'console'
check if there is an a loading error for your css
If you're on windows then the second problem source could be hidden file extensions. Maybe your filename isn't calCss.css but calCss.css.txt or simmilar. This is only a guess but I had this type of problem before. If it applies to your problem this is how you can display hidden file extensions