CSS无法使用PHP脚本

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