CSS vs php fiasco

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
cap2cap10
Forum Contributor
Posts: 158
Joined: Mon Apr 14, 2008 11:06 pm

CSS vs php fiasco

Post by cap2cap10 »

Hello again, members of the php technorati. I humbly ask for your guidance in coding for a calendar application. I can't seem to get the css to work with the php code to create a calendar that is verticle, not horizontal. Here is the code:

Code: Select all

                    <?php

                           /* Set the default timezone */
                            date_default_timezone_set("America/Montreal");

                               /* Set the date */
                              $date = strtotime(date("Y-m-d"));

                            $day = date('d', $date);
                            $month = date('m', $date);
                             $year = date('Y', $date);
                              $firstDay = mktime(0,0,0,$month, 1, $year);
                              $title = strftime('%B', $firstDay);
                             $dayOfWeek = date('D', $firstDay);
                             $daysInMonth = cal_days_in_month(0, $month, $year);
                           /* Get the name of the week days */
                        $timestamp = strtotime('next Sunday');
                        $weekDays = array();
                        for ($i = 0; $i < 7; $i++) {
	               $weekDays[] = strftime('%a', $timestamp);
	              $timestamp = strtotime('+1 day', $timestamp);
                     }
                     $blank = date('w', strtotime("{$year}-{$month}-01"));
                     ?>
                   <!DOCTYPE HTML>
                    <html lang="en">
                   <head>
    

	<title> Calendar</title>
    
               <style>
              .outer_contnr {
                position:fixed;
                 top: 20px; 
                 left: 200px;  
                 width:600px;
                height:420px;
               background-color: #C2B145;
  
               border-color:#1C1C1C;
               border-style: solid;
               border-width: 1px;
               border-left-width: 5px;
               border-bottom-width: 5px;
               border-radius: 6px;
               z-index: 1;
               }
               .head {
               position: fixed;
             width:600px;
   
              background-color:#1C1C1C ;
              font:bold 16px Verdana;
              color:#C2B145 ;
    
    
             }
            .week {
              position: relative;
              top: 20px;
              width:600px;  
               background-color:#1C1C1C ;
 
             color:#C2B145 ;  
             }
            .week_day {
            float: left;
            width:85px;  
             background-color:#1C1C1C ;
              font:bold 26px Verdana;
             color:#C2B145 ;  
    
              }
            .days_contnr {
            position: relative;
             top: 25px;
           width:600px;  
    
    
    
           }
           .day_contnr {
            float: left;
           width:80px;
           height:45px;
            background-color: #1C1C1C;
  
           border-color:#FCF403;
           border-style: solid;
           border-width: 1px;
            border-left-width: 3px;
            border-bottom-width: 3px;  
             border-radius: 6px;   
          color: #FCF403;  
    
            }
 
          .empty_contnr {
          float: left;
          width:80px;
          height:40px;
          background-color: #1C1C1C;
  
           border-color:#FCF403;
           border-style: solid;
           border-width: 1px;
           border-left-width: 3px;
          border-bottom-width: 3px;  
             border-radius: 6px;   
             color: #FCF403;  
    
             }
              .day_contnr:active {
                 float: left;
               width:80px;
               height:40px;
               background-color: #FCF403;
  
                border-color:#1C1C1C;
               border-style: solid;
               border-width: 1px;
               border-left-width: 3px;
                border-bottom-width: 3px;  
                border-radius: 6px;   
               color: #1C1C1C;  
    
              }
              .res_list {
    
    
              }
               .even_row {
    
    
                }
            .odd_row {
    
    
               }
           foot {
    
    
    
             }
            </style>   
             </head>

           <body bgcolor="#FFFFFF">
              <table class='table table-bordered' style="table-layout: fixed;">
	       <tr>
		<th colspan="7" class="text-center"> <?php echo $title ?> <?php echo $year ?> </th>
	       </tr>
	       <tr>
		<?php foreach($weekDays as $key => $weekDay) : ?>
			<td class="text-center"><?php echo $weekDay ?></td>
		<?php endforeach ?>
	        </tr>
	        <tr>
		<?php for($i = 0; $i < $blank; $i++): ?>
			<td></td>
		<?php endfor; ?>
		<?php for($i = 1; $i <= $daysInMonth; $i++): ?>
			<?php if($day == $i): ?>
				<td><strong><?php echo $i ?></strong></td>
			<?php else: ?>
				<td><?php echo $i ?></td>
			<?php endif; ?>
			<?php if(($i + $blank) % 7 == 0): ?>
				</tr><tr>
			<?php endif; ?>
		<?php endfor; ?>
		<?php for($i = 0; ($i + $blank + $daysInMonth) % 7 != 0; $i++): ?>
			<td></td>
		<?php endfor; ?>
	      </tr>
              </table>

                <div id="outer" class="outer_contnr">
               <div class="head"> <center><?php echo $title ?>   <?php echo $year ?></center>   </div>
               <div class="week">
               <?php foreach($weekDays as $key => $weekDay) : ?>
			<div class="week_day"><?php echo $weekDay ?></div>
		<?php endforeach ?>
             </div>

              <div class="days_contnr">
               <div class="empty_contnr">
               <?php for($i = 0; $i < $blank; $i++): ?>
              </div><div class="day_contnr">
		<?php endfor; ?>
		<?php for($i = 1; $i <= $daysInMonth; $i++): ?>
			<?php if($day == $i): ?>
               <div class="day_contnr"><strong><?php echo $i ?></strong></div>
                       <?php else: ?>
				<div class="day_contnr"><?php echo $i ?></div>
			<?php endif; ?>
			<?php if(($i + $blank) % 5 == 0): ?>
				</div><div class="day_contnr">
			<?php endif; ?>
		<?php endfor; ?>
		<?php for($i = 0; ($i + $blank + $daysInMonth) % 5 != 0; $i++): ?>
			<div class="day_contnr"></div>
		<?php endfor; ?>

             </div></div>

             </div>
So, the css is interfereing with the php logic. Can anyone show me how to make the calendar function with the css. What you will notice that the calendar is a horizontal one, but the days are somewhat vertical. What I would really like to accomplish here is a vertical calander with the weekdays on the leftside and the day(number) corresponding to the correct week day. Thanks in advance.

Batoe
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: CSS vs php fiasco

Post by Celauran »

cap2cap10 wrote:So, the css is interfereing with the php logic.
How so? Everything is all tangled together, but I don't see where/how the CSS could possibly be interfering. When you remove the CSS, everything works? Please clarify what the expected behaviour is and what the actual behaviour is. Please be sure to include any error messages you are receiving.
Post Reply