2017-02-21 4 views
0

Ich habe eine Flaschen-App, die ich baue, die ich versuche, besser aussehen zu lassen, aber die Farben füllen nicht wie erwartet. Irgendeine Idee, warum die Farben nicht richtig durchkommen. (Ich habe es in IE und Chrome angesehen und es ist das gleiche).CSS-Stil, der nicht ordnungsgemäß ausgefüllt wird

Example of Output - Colors are not correct

Die Ordnerstruktur ist (es gibt auch andere HTML-Dateien, aber sie spielen keine Rolle, das Problem für Neue):

main/site_tables.py 
main/templates/view.html 
main/static/style.css 

Der Python-Code (site_tables.py) ist:

#Import various necessary packages 
from flask import render_template, Flask, request 
import pandas 
from pandas.tseries.holiday import USFederalHolidayCalendar 
import datetime 
import urllib2 
import os.path 

#Start App from Flask 
app = Flask(__name__) 

#Set IP Address and Port for outputting web address 
out_IP_address = "0.0.0.0" 
out_port = 5000 

#Set location for original files being read in and edit file locations 
#Kept seperate for audit reasons 
origLoc = "C:/Orig" 
editLoc = "C:/Edit" 

#Set name of files prefix 
fileName = "Rand_Calls" 

#Define holidays for long period of time 
cal = USFederalHolidayCalendar() 
holidays = cal.holidays(start='2017-01-01', end='2030-12-31').to_pydatetime() 

#Set first empty link - tables 
@app.route("/tables/") 
#Set dynamically populated links tables/date where date is formatted YYYYMMDD 
@app.route("/tables/<date>",methods=['GET', 'POST']) 
def j_show_html(date): 
    #date provided by webaddress for example: date = "20170214" 
    #Format date to datetime 
    date2 = datetime.datetime.strptime(date,"%Y%m%d") 
    if request.method == "GET": 
     #If date hasn't occured; display why missing 
     if date2 > datetime.datetime.today() - datetime.timedelta(days=2): 
      return render_template('future.html', 
      labels = urllib2.unquote(date.encode('ascii','ignore'))) 
     #If date was a holiday; display why missing 
     elif date2 in holidays: 
      return render_template('holiday.html', 
      labels = urllib2.unquote(date.encode('ascii','ignore'))) 
     #If date was a weekend; display why missing 
     elif date2.weekday() in (5,6): 
      return render_template('weekend.html', 
      labels = urllib2.unquote(date.encode('ascii','ignore'))) 
     #Load report; if not edited before then from original location 
     else: 
      if os.path.isfile(editLoc+"/"+fileName+"_"+date+"_"+date+".xlsx"): 
       report = pandas.read_excel(editLoc+"/"+fileName+"_"+date+"_"+date+".xlsx") 
      else: 
       report = pandas.read_excel(origLoc+"/"+fileName+"_"+date+"_"+date+".xlsx") 
      return render_template('view.html', 
      tables=[report.to_html(index=False)], 
#   titles = ['na'], 
      labels = urllib2.unquote(date.encode('ascii','ignore'))) 

#Call the app 
if __name__ == "__main__": 
    app.run(host=out_IP_address,port=out_port,debug=True) 

Die HTML-Datei (view.html) ist:

<!-- Jinja2 code for table page creation --> 
<!doctype html> 
<title>{{labels}}</title> 
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}"> 
<div class=page contenteditable=""> 
    <h1>QA_Report_{{labels}}</h1> 
    {% for table in tables %} 
    {{ table|safe }} 
    {% endfor %} 
</div> 

Die CSS-Datei ist (style.css) ist:

body   { font-family: sans-serif;} 
a, h1, h2  { color: #d03027; } /*Color = Specific Red */ 
h1, h2   { margin: 0; } 
h1    { border-bottom: 2px solid #ceccd0; } /*Color - Light Grey*/ 
h2    { font-size: 1.2em; } 

table.dataframe, .dataframe th, .dataframe td 
{ 
    border: none; 
    border-bottom: 1px solid #ceccd0; /*Color = Light Grey*/ 
    border-collapse: collapse; 
    text-align:left; 
    padding: 10px; 
    margin-bottom: 40px; 
    font-size: 0.9em; 
} 

tr:nth-child(odd)  { background-color:#ffffff; } /*Color = White   */ 
tr:nth-child(even) { background-color:#004977; color:#ffffff; } /*Color = Specific Blue */ 
tr:hover   { background-color:#d03027; } /*Color = Specific Red */ 
+0

Wie soll es aussehen? –

+0

Dasselbe, aber die Farben, die im CSS angegeben sind, sollten zu einem anderen visuellen Aussehen führen. Ich habe das CSS kommentiert, um zu zeigen, was die Farben grob sein sollen. – JJFord3

Antwort

0

das Problem herausgefunden.

Die Webseite wurde zwischengespeichert. Ich habe den Verlauf des Browsers gelöscht und die Änderungen kamen zustande. (Wenn Sie die Seite mit Strg + Umschalt + R neu laden, werden auch neue Änderungen möglich).

Veröffentlichen Sie dies als eine Antwort für den Fall, dass es jedem hilft, in das gleiche Problem zu kommen.

+0

Es könnte auch sein, dass Ihre style.css nicht geladen wurde. In Zukunft wäre es hilfreich, wenn Sie die Struktur Ihres Projekts und den Speicherort der einzelnen Dateien angeben würden. Außerdem wäre es einfacher für Menschen, wenn Sie die Namen der Dateien in den Code-Snippets angeben. – swbandit

+0

Danke. Die wechselnden Zeilenfarben haben mich daran erinnert, dass etwas geladen wurde, aber ich sehe deine Punkte und habe die Frage aktualisiert. – JJFord3

Verwandte Themen