Difference between revisions of "Template:Macquarie Australia/TestCSS"
(Changed caption to inline-block) |
(Add new class with center text) |
||
| (33 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
[[File:MqAust_Burpey_v46-bubblePetri44_Summary03.png|965px|link=]] | [[File:MqAust_Burpey_v46-bubblePetri44_Summary03.png|965px|link=]] | ||
| − | <html> | + | <html lang="en-AU"> |
<style type="text/css"> | <style type="text/css"> | ||
| Line 21: | Line 21: | ||
/* background-color: #009933; middle harmony websafe green plain colour background */ | /* background-color: #009933; middle harmony websafe green plain colour background */ | ||
background-color: #ccffcc; /* pale websafe green background */ | background-color: #ccffcc; /* pale websafe green background */ | ||
| + | } | ||
| + | |||
| + | #navigation a { /* top menu style */ | ||
| + | display:block; /* leave this block to keep the nav the same */ | ||
| + | float: left; /* has to be left for nav to work */ | ||
| + | font-size: medium; | ||
| + | padding: 1.56em; | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | background-color: #66cc66; /* light green */ | ||
| + | color: #000000; /* #000000 is black font */ | ||
} | } | ||
| Line 48: | Line 58: | ||
/* background-color: #f2f2f2; */ | /* background-color: #f2f2f2; */ | ||
/* border-bottom: 1px solid #ccc; */ | /* border-bottom: 1px solid #ccc; */ | ||
| + | border-collapse: collapse; /* Prevents a double line for both th td borders */ | ||
| + | border: 0px; | ||
/* no colours, borders, width, or float here */ | /* no colours, borders, width, or float here */ | ||
} | } | ||
| Line 61: | Line 73: | ||
padding: 4px; | padding: 4px; | ||
/* border-top: 6px solid #EE3e53; */ | /* border-top: 6px solid #EE3e53; */ | ||
| + | } | ||
| + | |||
| + | .honyWhite { /* Creates unique HONY table class */ | ||
| + | border-collapse: collapse; /* Prevents a double line for both th td borders */ | ||
| + | width: 100%; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | .centreItInline { /* Horizontal positioning */ | ||
| + | display: block; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | } | ||
| + | |||
| + | .centreStuffInline { /* Horizontal positioning */ | ||
| + | text-align: center; | ||
} | } | ||
| Line 97: | Line 125: | ||
font-size: 16px; | font-size: 16px; | ||
color: #ffffff; | color: #ffffff; | ||
| + | border: 0; | ||
| + | border-spacing: 0; | ||
| + | text-align: center; | ||
| + | padding: 0; | ||
} | } | ||
| Line 151: | Line 183: | ||
font-family: Verdana, Geneva, sans-serif; | font-family: Verdana, Geneva, sans-serif; | ||
color: #66cc66; /* websafe light green */ | color: #66cc66; /* websafe light green */ | ||
| + | } | ||
| + | |||
| + | /* Class honyWhite styling */ | ||
| + | |||
| + | .honyWhite table { /* default table formatting */ | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | color: #000000; /*black*/ | ||
| + | table-layout: fixed; /* prevents auto-resizing of column widths */ | ||
| + | border-spacing: 10px 10px; | ||
| + | } | ||
| + | |||
| + | .honyWhite th { /* default table header formatting */ | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | border: 0px solid white; | ||
| + | color: #000000; /*black*/ | ||
| + | font-size: 14px; | ||
| + | padding: 8px; | ||
| + | } | ||
| + | |||
| + | .honyWhite td { /* default table detail formatting */ | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | border: 0px solid white; | ||
| + | color: #000000; /*black*/ | ||
| + | font-size: 14px; | ||
| + | padding: 8px; | ||
| + | vertical-align: text-top; | ||
| + | } | ||
| + | |||
| + | .honyCol40 { /* For fixed table Column width */ | ||
| + | width: 40%; | ||
| + | } | ||
| + | |||
| + | .honyWhite a { /* default table detail formatting */ | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | display:inline; /* here to keep hyperlinks inline */ | ||
| + | font-weight: bold; | ||
| + | color: #0645ad; /*hyperlink blue*/ | ||
| + | text-decoration: underline; | ||
} | } | ||
| Line 167: | Line 237: | ||
display: block; /* here to keep the caption underneath the figure */ | display: block; /* here to keep the caption underneath the figure */ | ||
text-align: left; | text-align: left; | ||
| + | } | ||
| + | |||
| + | /* WRAPPED IMAGE Class styling */ | ||
| + | |||
| + | figure.wrappedImage { /* Styling for figures in hony class */ | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | font-size: 14px; | ||
| + | display: table; /* Required for text wrapping in caption */ | ||
| + | width: 450px; /* This can be any width, so long as it's narrower than any image */ | ||
| + | margin-top: 1em; | ||
| + | margin-bottom: 1em; | ||
| + | margin-left: 0px; | ||
| + | margin-right: 0px; | ||
| + | } | ||
| + | |||
| + | figcaption.wrappedImage { /* Styling for figure captions - class */ | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | font-size: 14px; | ||
| + | /* display: block; here to keep the caption underneath the figure */ | ||
| + | text-align: left; | ||
| + | display: table-row; /* Required for text wrapping in caption */ | ||
| + | } | ||
| + | |||
| + | img.wrappedImage { /* Styling for figure captions - class */ | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | /* TEXT IN COLUMNS Class styling */ | ||
| + | |||
| + | .divideTextTwoColumns { | ||
| + | /* Create multiple columns */ | ||
| + | -webkit-column-count: 2; /* Chrome, Safari, Opera */ | ||
| + | -moz-column-count: 2; /* Firefox */ | ||
| + | column-count: 2; | ||
| + | /* Gap between columns */ | ||
| + | -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ | ||
| + | -moz-column-gap: 40px; /* Firefox */ | ||
| + | column-gap: 40px; | ||
| + | /* Line between columns */ | ||
| + | -webkit-column-rule: 1px dashed #009933; /* Chrome, Safari, Opera */ | ||
| + | -moz-column-rule: 1px dashed #009933; /* Firefox */ | ||
| + | column-rule: 1px dashed #009933; | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | font-size: 12px; | ||
} | } | ||
| Line 266: | Line 380: | ||
color: #0645ad; /*hyperlink blue*/ | color: #0645ad; /*hyperlink blue*/ | ||
text-decoration: underline; | text-decoration: underline; | ||
| − | display:inline; | + | /* display:inline; here to keep hyperlinks inline - N.B. made no difference figure caption */ |
} | } | ||
| Line 299: | Line 413: | ||
/* } */ | /* } */ | ||
| − | + | caption { /* styling for table captions */ | |
| − | + | /* none yet */ | |
| − | + | ||
} | } | ||
| − | + | figure { /* Styling for figure captions - class */ | |
font-family: Verdana, Geneva, sans-serif; | font-family: Verdana, Geneva, sans-serif; | ||
| − | + | background-color: #ffffff; | |
| + | padding: 5px; | ||
| + | /* display: table; */ | ||
| + | } | ||
| + | |||
| + | figure img { | ||
| + | display: block; | ||
| + | /* width: 100%; */ | ||
} | } | ||
figcaption { /* Styling for figure captions - class */ | figcaption { /* Styling for figure captions - class */ | ||
font-family: Verdana, Geneva, sans-serif; | font-family: Verdana, Geneva, sans-serif; | ||
| − | display: inline-block; | + | /* display: inline-block; here to keep the caption underneath the figure */ |
| + | display: inline; /* trying to remove hyperlink block? */ | ||
color: #000000; /*black*/ | color: #000000; /*black*/ | ||
text-align: left; | text-align: left; | ||
| + | /* display: table-caption; */ | ||
| + | /* table-layout: auto; */ | ||
| + | caption-side: bottom; | ||
| + | background: #ffffff; | ||
| + | padding: 0 5px 5px; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | ul { | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | list-style-type: circle; | ||
| + | } | ||
| + | |||
| + | ol { | ||
| + | font-family: Verdana, Geneva, sans-serif; | ||
| + | list-style-type: circle; | ||
} | } | ||
Latest revision as of 13:14, 7 September 2015
