CODEWITHSUNDEEP
htmlcsspython-2.7tomcat7cgi
Karthick S
Karthick S

Reputation: 3304

Referring to css from a HTML page generated by a Python CGI script

About a week ago, I inherited a monitoring and notification tool which is written in Python. I am tasked with creating a proof of concept for a dashboard based on the data that the tool has collected over the years. Unfortunately, I am new to Python and have never done CGI programming - so a perfect mismatch. :) I am using tomcat7 because it is already installed in the machine.

The problem is that I am not able to get my generated HTML page to read the CSS file. My directory structure under webapps/myapp is as follows:

$ tree
  .
  ├── graphpages.css
  ├── index.html
  ├── META-INF
  │   └── context.xml
  └── WEB-INF
      ├── cgi
      │   ├── hello_world.cgi
      │   └── page1.cgi
      └── web.xml

I have tried to refer to the CSS in my HTML as follows:

<link rel="stylesheet" type="text/css" media="screen" href="../graph_pages.css" />

Tried moving the file graph_pages.css under WEB-INF/ and also by creating a directory htdocs/ under WEB-INF/ and placing the file inside that. Meaning:

$ tree
.
+-- index.html
+-- META-INF
¦   +-- context.xml
+-- WEB-INF
    +-- cgi
    ¦   +-- hello_world.cgi
    ¦   +-- page1.cgi
    +-- graphpages.css
    +-- web.xml

and

$ tree
.
+-- index.html
+-- META-INF
¦   +-- context.xml
+-- WEB-INF
    +-- cgi
    ¦   +-- hello_world.cgi
    ¦   +-- page1.cgi
    +-- htdocs
    ¦   +-- graphpages.css
    +-- web.xml

Of course, I updated the generated HTML too. But no help at all.

My browser is able to open the CSS file in the first directory structure above but not in the other two cases.

Please help me understand what the directory structure should be and how I can get the CSS to have an effect on the page.

Upvotes: 0

Views: 1011

Answers (1)

dwkd
dwkd

Reputation: 2896

When having graphpages.css at the root level with index.html use the web root / as the starting point as opposed to a relative path ../:

<link rel="stylesheet" type="text/css" media="screen" href="/graphpages.css" />

Note: You have some references to graphpages.css and graph_pages.css. Please make sure you're consistent with the file name

Upvotes: 2

Related Questions