source: main/trunk/ibisph-view/src/content/xml/html_content/topic/healthoutcome/Introduction.xml @ 19812

Last change on this file since 19812 was 19812, checked in by GarthBraithwaite_STG, 4 months ago

view content - temp commit before changing topic dir names #2.

File size: 7.8 KB
Line 
1<?xml version="1.0" encoding="ISO-8859-1"?>
2
3<HTML_CONTENT xmlns:ibis="http://www.ibisph.org">
4
5        <TITLE>Health Outcomes Topic Pages</TITLE>
6        <HTML_CLASS>Topic</HTML_CLASS>
7
8        <OTHER_HEAD_CONTENT>
9        </OTHER_HEAD_CONTENT>
10
11        <CONTENT>
12
13<style>
14.TopImageNavigation
15{
16        width: 100%;
17}
18
19.TopImageNavigation .Container
20{
21        display: inline-block;
22        position: relative;
23        background:     transparent 0 0 no-repeat;
24        background-size:        contain;
25        font-size: 0;
26        margin: 0;
27        padding: 0;
28        width: 240px;
29        height: 240px;
30}
31
32.TopImageNavigation .Container .Overlay
33{
34        text-align: center;
35        vertical-align: middle;
36        display: inline-block;
37        position: absolute;
38        color: white;
39        bottom: 0;
40        left: 0;
41        height: 60px;
42        width:100%;
43        background-color: rgb(7, 7, 7, 0.5);
44        font-size: 1.25rem;
45        padding-top: 1.25rem;
46}
47
48
49.TopImageNavigation #healthoutcome
50{
51        background-image: url("../../view/image/topic/healthoutcome-bw.jpg");
52}
53.TopImageNavigation #healthcare
54{
55        background-image: url("../../view/image/topic/healthcare-bw.jpg");
56}
57.TopImageNavigation #risk
58{
59        background-image: url("../../view/image/topic/risk-bw.jpg");
60}
61.TopImageNavigation #population
62{
63        background-image: url("../../view/image/topic/population-bw.jpg");
64}
65
66.TopImageNavigation #healthoutcome:hover,
67.TopImageNavigation #healthoutcome.On
68{
69        background-color: transparent;
70        background-image: url("../../view/image/topic/healthoutcome.jpg");
71}
72.TopImageNavigation #healthcare:hover,
73.TopImageNavigation #healthcare.On
74{
75        background-color: transparent;
76        background-image: url("../../view/image/topic/healthcare.jpg");
77}
78.TopImageNavigation #risk:hover,
79.TopImageNavigation #risk.On
80{
81        background-color: transparent;
82        background-image: url("../../view/image/topic/risk.jpg");
83}
84.TopImageNavigation #population:hover,
85.TopImageNavigation #population.On
86{
87        background-color: transparent;
88        background-image: url("../../view/image/topic/population.jpg");
89}
90
91</style>
92                <nav class="TopImageNavigation">
93                        <a id="healthoutcome" ibis:href="topic/healthoutcome/Introduction.html" class="Container On">
94                                <span class="Overlay">Health <br/>Status
95                                </span>
96                        </a>
97                        <a id="healthcare" ibis:href="topic/healthcare/Introduction.html" class="Container">
98                                <span class="Overlay">Health Care <br/>Services
99                                </span>
100                        </a>
101                        <a id="risk" ibis:href="topic/risk/Introduction.html" class="Container">
102                                <span class="Overlay">Lifestyle and <br/>Risk Factors
103                                </span>
104                        </a>
105                        <a id="population" ibis:href="topic/population/Introduction.html" class="Container">
106                                <span class="Overlay">Population <br/>Characteristics
107                                </span>
108                        </a>
109                </nav>
110
111                <img ibis:src="image/HealthModelforTopics.png" style="display: inline-block; float:right; width: 35%; margin-right: 2.5rem; padding-top: 1rem;"></img>
112                <h2>About Health Outcomes</h2>
113                <p>
114                The World Health Organization defines health as, "a state of complete physical,
115                mental and social well-being and not merely the absence of disease or infirmity."
116                The topics in this category include the various measures we use as "indicators"
117                of population health status.
118                </p>
119
120                <h2>Usage Instructions</h2>
121                <p>
122                        Please select one of the topics below to see more information as well
123                        as navigation links to that topic's related Health Indicator reports
124                        and the related user queryable Health Datasets.  Use the above naviagtion
125                        images to change to a different Topic Category.
126                </p>
127
128                <div class="Container">
129                        <nav>
130                                <ul class="TextIconBlocks">
131                                        <li><a ibis:href="topic/healthoutcome/mch/Detail.html">
132                                                <img ibis:src="image/icon/topic/white/mch.png" alt="Pram icon" title="Go to Mothers and Infants Topic Page"/>
133                                                Mothers and Infants
134                                        </a></li>
135                                        <li><a ibis:href="topic/healthoutcome/death/Detail.html">
136                                                <img ibis:src="image/icon/topic/white/death.png" alt="Headstone icon" title="Go to Leading Causes of Death Topic Page"/>
137                                                Leading Causes of Death
138                                        </a></li>
139                                        <li><a ibis:href="topic/healthoutcome/disease/infectious/Detail.html">
140                                                <img ibis:src="image/icon/topic/white/infectious.png" alt="Coughing icon" title="Go to Infectious Disease Topic Page"/>
141                                                Infectious Diseases
142                                        </a></li>
143
144                                        <li><a ibis:href="topic/healthoutcome/cancer/Detail.html">
145                                                <img ibis:src="image/icon/topic/white/cancer.png" alt="Ribbon icon" title="Go to Cancer Topic Page"/>
146                                                Cancer
147                                        </a></li>
148                                        <li><a ibis:href="topic/healthoutcome/disease/chronic/Detail.html">
149                                                <img ibis:src="image/icon/topic/white/chronic.png" alt="Pain/Chronic Disease icon" title="Go to Chronic Disease Topic Page"/>
150                                                Chronic Diseases and Conditions
151                                        </a></li>
152                                        <li><a ibis:href="topic/healthoutcome/injury/Detail.html">
153                                                <img ibis:src="image/icon/topic/white/injury.png" alt="PersonCrutches icon" title="Go to Injury and Violence Topic Page"/>
154                                                Injury and<br/>Violence
155                                        </a></li>
156                                        <li><a ibis:href="topic/healthoutcome/substance/Detail.html">
157                                                <img ibis:src="image/icon/topic/white/substance.png" alt="Pills icon" title="Go to Substance Abuse Topic Page"/>
158                                                Substance Use
159                                        </a></li>
160                                        <li><a ibis:href="topic/healthoutcome/mental/Detail.html">
161                                                <img ibis:src="image/icon/topic/white/mental.png" alt="YinYang icon" title="Go to Mental Health Topic Page"/>
162                                                Mental Health
163                                        </a></li>
164                                        <li><a ibis:href="topic/healthoutcome/measures/Detail.html">
165                                                <img ibis:src="image/icon/topic/white/measures.png" alt="Ruler icon" title="Go to Summary Measures of Health Status Topic Page"/>
166                                                Summary<br/>Measures of<br/>Health Status
167                                        </a></li>
168                                </ul>
169                        </nav>
170                </div>
171
172                <h2>How to find Data and Information on this Site</h2>
173                The "Topics" section has a page that contains information for each topic.
174                Along with this information are links to the associated Indicator
175                Reports and Dataset Queries. The Indicator Reports provide graphs, maps,
176                public health context, and data tables.  Many of the topic areas have
177                queryable datasets that you can use to create your own tables, charts, and maps. 
178                These data query results pages will also have dataset details, including data
179                sources and tips on how data can or cannot be used.
180        </CONTENT>
181
182
183
184
185<xstyle>
186.TopImageNavigation
187{
188display: flex;
189 flex-direction:         row;
190 flex-wrap:         nowrap;
191/*
192 justify-content:         center;
193 align-items:         center;
194*/
195}
196
197.TopImageNavigation .Container
198{
199flex-grow: 1;
200flex-shrink: 1;
201flex-basis: auto;
202
203/*
204flex: 25%;
205        position: relative;
206        font-size: 0;
207        margin: 0;
208        padding: 0;
209                float: right;
210                max-width: 25%;
211*/
212}
213
214.TopImageNavigation .Container img
215        {
216
217                display: inline-block;
218 object-fit: scale-down ;
219        font-size: 0;
220        width: 25%;
221/* */
222        }
223
224.xTopImageNavigation .Container .Overlay
225{
226        display: inline-block;
227        position: absolute;
228        bottom: 0;
229        left: 0;
230        height: 40px;
231        width:25%;
232        background-color: rgb(7, 7, 7, 0.5);
233}
234
235.TextIconBlocks
236{
237/*
238        display:                                grid;
239        grid-auto-flow:                 row;
240        grid-template-rows:             auto;
241        grid-template-columns:  repeat(auto-fit, minmax(120px, 1fr));
242        justify-items:                  center;
243*/
244        font-size: 0;
245}
246
247.TextIconBlocks h3
248{
249        text-align:                     center;
250}
251
252.TextIconBlocks li
253{
254vertical-align: top;
255        display:                        inline-block;
256        padding:                        1px;
257}
258.TextIconBlocks li > a 
259{
260        display:                        block;
261        background-color:       #336699;
262        width:                          110px;
263        height:                         120px;
264        padding:                        12px 0 0 0;
265        vertical-align:         top;
266        font-size:                      14px;
267        text-align:             center;
268        color:                          white;
269}
270.TextIconBlocks li a:hover
271{
272        background-color:       var(--background-color-hover);
273        color:                          var(--color-hover);
274}
275.TextIconBlocks li a img
276{
277        display:                        block;
278        height:                         32px;
279        margin:                         0 auto 5px auto;
280        background-color:       inherit;
281}
282
283</xstyle>
284
285
286
287
288
289
290
291
292
293
294</HTML_CONTENT>
295
296
Note: See TracBrowser for help on using the repository browser.