123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- <style type="text/css">
- #screen-container {
- position: relative;
- margin: 0;
- padding: 0;
- color: rgb(204, 204, 204);
- display: block;
- margin-left: auto;
- margin-right: auto;
- white-space: nowrap;
- min-width: 1564px;
- min-height: 540px;
- height: 100%;
- font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
- }
- .header-info {
- text-align: center;
- }
- .ui-section {
- text-align: center;
- /* border: 1px solid crimson; */
- margin: 0;
- padding: 0;
- display: block;
- background-size: contain;
- }
- #top-left {
- position: absolute;
- top: 0;
- left: 0;
- /* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_top_tile_left.png'); */
- background: url('./Static/spacegameguiset/window_top_tile_left.png');
- height: 350px;
- width: 502px;
- background-repeat: no-repeat;
- background-position: left bottom;
- margin-left: 100px;
- }
- #top-middle {
- position: absolute;
- top: 0;
- left: 500px;
- /* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_top_tile_center_repeat.png'); */
- background: url('./Static/spacegameguiset/window_top_tile_center_repeat.png');
- background-repeat: repeat-x;
- background-position: left bottom;
- height: 350px;
- width: calc(100% - 1554px);
- margin-left: 100px;
- }
- #top-right {
- position: absolute;
- top: 0;
- right: 0;
- /* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_top_tile_right.png'); */
- background: url('./Static/spacegameguiset/window_top_tile_right.png');
- height: 350px;
- width: 868px;
- background-repeat: no-repeat;
- background-position: right bottom;
- margin-right: 86px;
- }
- #left-side {
- position: absolute;
- top: 334px;
- left: 0;
- /* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_middle_left.png'); */
- /* background: url('./Static/spacegameguiset/window_middle_left.png'); */
- /* height: 890px; */
- width: 108px;
- background-repeat: no-repeat;
- background-position: right middle;
- margin-left: 10px;
- }
- #main {
- position: absolute;
- top: 342px;
- left: 118px;
- /* height: 870px; */
- width: calc(100% - 224px);
- min-width: 1382px;
- }
- #right-side {
- position: absolute;
- top: 334px;
- right: 0;
- /* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_middle_right.png'); */
- /* background: url('./Static/spacegameguiset/window_middle_right.png'); */
- /* height: 890px; */
- width: 108px;
- background-repeat: no-repeat;
- background-position: left middle;
- }
- #bottom-left {
- position: absolute;
- bottom: 0;
- left: 0;
- /* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_bottom_tile_left.png'); */
- background: url('./Static/spacegameguiset/window_bottom_tile_left.png');
- height: 202px;
- width: 1031px;
- background-repeat: no-repeat;
- background-position: left top;
- }
- #bottom-middle {
- position: absolute;
- bottom: 0;
- left: 1029px;
- /* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_bottom_tile_center_repeat.png'); */
- background: url('./Static/spacegameguiset/window_bottom_tile_center_repeat.png');
- background-repeat: repeat-x;
- background-position: left top;
- height: 202px;
- width: calc(100% - 1558px);
- }
- #bottom-right {
- position: absolute;
- bottom: 0;
- right: 0;
- /* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_bottom_tile_right.png'); */
- background: url('./Static/spacegameguiset/window_bottom_tile_right.png');
- height: 202px;
- width: 443px;
- background-repeat: no-repeat;
- background-position: right top;
- margin-right: 86px;
- }
- </style>
- <div id="screen-container">
- <div id="top-left" class="ui-section"></div>
- <div id="top-middle" class="ui-section"></div>
- <div id="top-right" class="ui-section"></div>
- <div id="left-side" class="ui-section"></div>
- <div id="main" class="ui-section"></div>
- <div id="right-side" class="ui-section"></div>
- <div id="bottom-left" class="ui-section"></div>
- <div id="bottom-middle" class="ui-section"></div>
- <div id="bottom-right" class="ui-section"></div>
- </div>
|