in reply to Re^5: split the text file to multiple arrays
in thread split the text file to multiple arrays

Any one has the idea why I put the script and the css sheet to the same folder it will apply the style to the web page, but if I leave the script in different folder, it will not apply css style. And if I remote log in to the server as the administrator to open the html page. It shows all styles, but if I did not remote log in as administrator it will not show all the css styles on page???

 code
Nirvana is Now or Never

Replies are listed 'Best First'.
Re^7: split the text file to multiple arrays
by huck (Prior) on Jul 11, 2017 at 05:43 UTC

    How did you load the css html file. For simple css i just tend to put it inline.

[reply]

      sorry for late reply i was sick. I downloaded the w3 css file then modify the last row to add the control bar image I want the top section in dark blue and the control bar has to be below with 0 margin. For some reason it always leaves the white space. I put the script, the css file and control bar image in one file names Extra 

       #!/usr/bin/perl
#!/usr/bin/perl
use strict;
use warnings;
use Time::Piece;
    

# current date/time
my $t = localtime;
my $date = $t->wdayname.' '.$t->dmy('/');
my $time = $t->hms;

# input data
my $dest = "C:/Perl-Script/Extra/";
my %hdata = build_hash($dest."Bulletin.txt");

# output html
open OUT, ">". $dest."Bulletin.html" or die "$!";
print OUT qq(
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
   <title>OLMC Bulletin</title>
    <head>
    <style type="text/css">
     #h4   { color: #0; font-size: 1em; }
     th   { background-color: #e0e0e0 }
     td   { background-color: #ffffff }
     
   </style>     

    <meta name="viewport" content="width=device-width, initial-scale=1
+">
    <link rel="stylesheet" type='text/css' media='screen' href="/Perl-
+Script/Extra/w3.css">

</head>
<body>
    <div class="w3-container w3-blue">
    <h2>Daily Activities Report</h2>
    <h3>Bulletin Date $date  $time</h3>
    </div>
    <div class="w3-control-bar" </div>
    
);

foreach my $key (keys %hdata) {
        
  if (($key eq '"$Person Absences?"')
   || ($key eq '"$Replacement Person?"')
   || ($key eq '"$Room Changes?"')){
    
    my $h4 = $key;
    $h4 =~ s/[\"\$\?]//g;
    print OUT qq!<h4>$h4</h4>
    <table border="1" width="100%" style="border-color:#e0e0e0" cellpa
+dding="5" align="left">\n!;              
    my @arrays = @{$hdata{$key}}; 
    for my $i (1..$#arrays) {
      print OUT '<tr>';
      my @col = split(/,/,$arrays[$i]);
                    
      for my $j (0..$#col) {
        $col[$j] =~ s/"//g;
        my $td = ($i==1)? "th" : "td";
        print OUT qq!<$td align="left">$col[$j]</$td>!;
        
      };
      print OUT "</tr>\n";      
    };
    print OUT "</table>&nbsp;<br>\n";
  };
}
print OUT "</body></html>";
close OUT;

#-------------------------------------
# This subroutine split text file to 
# number of arrays for data processing
# -------------------------------------
sub build_hash{
  
  my $infile = shift;
  my %data;
  my $last ='';
  open my $ifh,'<',$infile or die "$!";
  while (my $line=<$ifh>) { 
    chomp $line; 
    if ( substr($line,0,2) eq '"$' 
      || substr($line,0,1) eq '$') { 
      $last = $line; 
    } 
    push @{$data{$last}},$line;   
  }
  close $ifh;
  return %data;
}

      [download]
      /* W3.CSS 4.04 Apr 2017 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal g
+it.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{marg
+in:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,se
+ction,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-ali
+gn:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:
+none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-d
+ecoration:underline;text-decoration:underline dotted}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.
+5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20p
+x}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:
+400;margin:10px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.w3-image{max-width:100%;height:3px}img{margin-bottom:-5px}a{color:inh
+erit}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;widt
+h:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-stri
+ped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr
+:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-c
+olor:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8p
+x 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:fir
+st-child,.w3-table-all td:first-child{padding-left:16px}
.w3-main,#main{transition:margin-left .4s}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-b
+lock;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:non
+e;outline:none;display:block}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;
+float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;t
+ext-align:left;border:none;outline:none;white-space:normal;float:none
+}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{displ
+ay:block;width:100%}
.w3-responsive{overflow-x:auto}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:bef
+ore,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-paddin
+g:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:befor
+e,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{f
+loat:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:
+24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width
+:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{wid
+th:91.66666%}.w3-col.s12{width:99.99999%}
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16
+.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{w
+idth:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col
+.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333
+%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16
+.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width
+:58.33333%}.w3-col.l8{width:66.66666%}
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{wid
+th:91.66666%}.w3-col.l12{width:99.99999%}}
.w3-content{max-width:980px;margin:auto}.w3-rest{overflow:hidden}
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}
+.w3-cell-bottom{vertical-align:bottom}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!
+important}.w3-show-inline-block{display:inline-block!important}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!im
+portant}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w
+3-mobile .w3-dropdown-content{position:relative}    
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:1
+00%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3
+-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-
+dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-
+dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-but
+ton{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{paddi
+ng-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{
+display:none!important}.w3-sidebar.w3-collapse{display:block!importan
+t}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display
+:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main
+{margin-left:0!important;margin-right:0!important}}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.
+w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;l
+eft:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-toprigh
+t{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-b
+ottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:transl
+ate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate
+(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:transla
+te(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:trans
+late(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform
+:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-displa
+y-container:hover span.w3-display-hover{display:inline-block}.w3-disp
+lay-hover{display:none}
.w3-display-position{position:absolute}
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!impor
+tant}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{b
+order-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{
+border-right:1px solid #ccc!important}
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bo
+ttom:6px solid #ccc!important}
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-r
+ight:6px solid #ccc!important}
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!impo
+rtant}
.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!import
+ant}.w3-margin-bottom{margin-bottom:16px!important}
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-rig
+ht:16px!important}
.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16
+px!important}.w3-padding-large{padding:12px 24px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!importan
+t}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!impor
+tant}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!importan
+t}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!impor
+tant}
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!importan
+t}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-transparent,.w3-hover-none:hover{background-color:transparent!impo
+rtant}
.w3-hover-none:hover{box-shadow:none!important}
/* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:
+#ffc107!important}
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#0
+0ffff!important}
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#0
+02d56!important}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;backgro
+und-color:#87CEEB!important}
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:
+#795548!important}
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#0
+0bcd4!important}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-g
+ray:hover{color:#fff!important;background-color:#607d8b!important}
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:
+#4CAF50!important}
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;backg
+round-color:#8bc34a!important}
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-colo
+r:#3f51b5!important}
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:
+#f0e68c!important}
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#c
+ddc39!important}
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-colo
+r:#ff9800!important}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;backg
+round-color:#ff5722!important}
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e
+91e63!important}
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-colo
+r:#9c27b0!important}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;backg
+round-color:#673ab7!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44
+336!important}
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#f
+df5e6!important}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#0
+09688!important}
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-colo
+r:#ffeb3b!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:
+#fff!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:
+#000!important}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000
+!important;background-color:#bbb!important}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-lig
+ht-gray:hover{color:#000!important;background-color:#f1f1f1!important
+}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-g
+ray:hover{color:#fff!important;background-color:#616161!important}
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-
+color:#ffdddd!important}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;backgro
+und-color:#ddffdd!important}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;backg
+round-color:#ffffcc!important}
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;backgroun
+d-color:#ddffff!important}
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#ffeb3b!important}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-g
+ray:hover{color:#757575!important}
.w3-text-amber{color:#ffc107!important}
.w3-text-aqua{color:#00ffff!important}
.w3-text-light-blue{color:#87CEEB!important}
.w3-text-brown{color:#795548!important}
.w3-text-cyan{color:#00bcd4!important}
.w3-text-blue-grey,.w3-text-blue-gray{color:#607d8b!important}
.w3-text-light-green{color:#8bc34a!important}
.w3-text-indigo{color:#3f51b5!important}
.w3-text-khaki{color:#b4aa50!important}
.w3-text-lime{color:#cddc39!important}
.w3-text-orange{color:#ff9800!important}
.w3-text-deep-orange{color:#ff5722!important}
.w3-text-pink{color:#e91e63!important}
.w3-text-purple{color:#9c27b0!important}
.w3-text-deep-purple{color:#673ab7!important}
.w3-text-sand{color:#fdf5e6!important}
.w3-text-teal{color:#009688!important}
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gra
+y,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.
+w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!importa
+nt}
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!imp
+ortant}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!impor
+tant}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!i
+mportant}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!import
+ant}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!import
+ant}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-
+border-gray:hover{border-color:#bbb!important}
.w3-control-bar{background-color:#002d56;margin-top:0;margin-bottom:0;
+background-image:url("/Perl-Script/Extra/ControlBar.jpg"); height:3px
+;}

      [download]
      Nirvana is Now or Never
[reply]
[d/l]
[select]

        Any one has the idea why I put the script and the css sheet to the same folder it will apply the style to the web page, but if I leave the script in different folder, it will not apply css style.

        This sounds like a problem in relative file accessing, but i dont see that in the html, so i dont know.

        And if I remote log in to the server as the administrator to open the html page. It shows all styles, but if I did not remote log in as administrator it will not show all the css styles on page???

        This sounds like permission problems. https://msdn.microsoft.com/en-us/library/bb727008.aspx

        For some reason it always leaves the white space.

        This sounds like margins problems. there are margins below a h3 to consider. See https://stackoverflow.com/questions/6489481/css-how-to-omit-the-spacing-between-an-h3-and-a-p-element

        You have included a lot of useless css to try todo what you want. I would instead try to do it by just including the few items i needed in the style segment you included in your head segment or by just including the modifications i wanted inside style="..." sections of the actual commands. 

            <div class="w3-container" style="padding:0px;margin:0px;color:#fff
+!important;background-color:#002d56!important}">
    <h2 style="padding:0px;margin:0px;">Daily Activities Report</h2>
    <h3 style="padding:0px;margin:0px;">Bulletin Date $date  $time</h3
+>
    </div>
    <div class="w3-control-bar" style="padding:0px;margin:0px;" </div>

        [download]

        This is getting way past perl and into css, i do not claim to be strong at css but can often get what i want via chainsaws

[reply]
[d/l]
        For some reason it always leaves the white space 
        <div class="w3-control-bar" </div>
            missing > here ^

        [download]

        also you have 2 head tags here

        <head>
   <title>OLMC Bulletin</title>
    <head>
        poj
[reply]
[d/l]

In Section Seekers of Perl Wisdom