Page 1 of 1

CSS vs php fiasco

Posted: Wed Jul 26, 2017 10:30 pm
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

Re: CSS vs php fiasco

Posted: Fri Jul 28, 2017 5:18 am
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.