我创建了一个div框元素，其中包含有关游戏中构建过程的信息。一切正常，但我有设计问题;三个div元素相互交叉，如何将它们排成一行，并在页面底部使它们不相互重叠？
我在下面的代码段中添加了完整的div css和部分html;我试图添加display: inline;，但它不会做到这一点。
我在这里做错了吗？ 因为我尝试了所有其他帖子类似于此没有任何效果，所以这个问题没有得到回答或重复。
/* Overwiev bottom */
.content-box-s {
margin: 0 0 5px 1px;
float: left;
width: 222px;
overflow: hidden;
bottom: -140px;
position: fixed;
-webkit-transition: all 0.95s ease-in-out;
-moz-transition: all 0.95s ease-in-out;
-o-transition: all 0.95s ease-in-out;
transition: all 0.95s ease-in-out;
}
.content-box-s:hover {
margin: 0 0 5px 1px;
width: 222px;
float: left;
overflow: hidden;
position: fixed;
bottom: 0;
}
.content-box-s .header {
background: url("../images/Build_tmp/b9de2f5b06c823d628d22c4067ee35.gif") no-repeat;
height: 32px;
font-size: 11px;
}
.content-box-s .content {
background: url("../images/Build_tmp/bd764e9b39a1a48ad708039fda1bde.gif") repeat-y;
padding: 0 15px;
}
.content-box-s p {
padding: 5px 20px;
}
.content-box-s .footer {
background: url("../images/Build_tmp/174d5c09f617701fcaf1664a414869.gif") no-repeat;
height: 21px;
margin-top: -8px;
}
div.content-box-s .header h3 {
color: #6f9fc8;
font-size: 11px;
font-weight: 700;
padding-top: 10px;
width: 222px;
text-align: center;
}
.contentbox {
margin: 0 3px 0 2px;
}
#buttonz .contentbox .header .c-left,
#buttonz .contentbox .header .c-right,
#buttonz .contentbox .header,
#buttonz .contentbox .footer,
#buttonz .contentbox .footer .c-left,
#buttonz .contentbox .footer .c-right,
.contentbox .header .c-left,
.contentbox .header .c-right,
.contentbox .header,
.contentbox .footer,
.contentbox .footer .c-left,
.contentbox .footer .c-right {
background-image: url("../images/Build_tmp/191d6af9367f608bbee2743866c489.png");
background-repeat: repeat-x;
background-position: 0 -1px;
}
#buttonz .contentbox .header,
.contentbox .header {
height: 30px;
line-height: 30px;
position: relative;
}
#buttonz .contentbox .header .c-left,
#buttonz .contentbox .header .c-right,
.contentbox .header .c-left,
.contentbox .header .c-right {
height: 30px;
position: absolute;
top: 0;
width: 35px;
}
#buttonz .contentbox .header .c-left,
.contentbox .header .c-left {
background-position: 0 -33px;
left: -2px;
right: auto;
}
#buttonz .contentbox .header .c-right,
.contentbox .header .c-right {
background-position: 100% -66px;
left: auto;
right: -2px;
}
#buttonz .contentbox .content,
.contentbox .content {
border-left: 5px double #000;
border-right: 5px double #000;
background: #0d1014;
margin: 0 2px;
position: relative;
z-index: 2;
}
#buttonz .contentbox .footer,
.contentbox .footer {
background-position: 0 -100px;
height: 21px;
position: relative;
bottom: 5px;
left: 7px;
}
#buttonz .contentbox .footer .c-left,
#buttonz .contentbox .footer .c-right,
.contentbox .footer .c-left,
.contentbox .footer .c-right {
height: 21px;
position: absolute;
top: 0;
width: 35px;
}
#buttonz .contentbox .footer .c-left,
.contentbox .footer .c-left {
background-position: 0 -125px;
left: -8px;
right: auto;
}
#buttonz .contentbox .footer .c-right,
.contentbox .footer .c-right {
background-position: 100% -150px;
left: auto;
right: -8px;
}
#inhalt .content-box-s .build-faster.disabled:hover .build-faster-img {
background-position: -25px -75px;
}
#inhalt .content-box-s .build-faster:hover .build-finish-img {
background-position: 0 -25px;
}
#inhalt .content-box-s .build-faster.disabled:hover .build-finish-img {
background-position: 0 -75px;
}
#inhalt .content-box-s .content {
min-height: 46px;
height: auto!important;
height: 46px;
padding-top: 2px;
position: relative;
}
#inhalt .content-box-s .content td.idle {
padding: 10px 0;
text-align: center;
width: 177px;
}
#inhalt .content-box-s .content td.idle a:link,
#inhalt .content-box-s .content td.idle a:visited,
#inhalt .content-box-s .content td.idle a:active {
display: block;
color: #fff;
text-decoration: none;
}
.no-touch #inhalt .content-box-s .content td.idle a:hover {
text-decoration: underline;
}
#inhalt .content-box-s .content table.construction {
margin: 0;
padding: 3px;
font-size: 11px;
}
#inhalt .content-box-s .content table.construction.active {
background: #171d23;
background: -moz-linear-gradient(top, #171d23 0, #101419 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #171d23), color-stop(100%, #101419));
background: -webkit-linear-gradient(top, #171d23 0, #101419 100%);
background: -o-linear-gradient(top, #171d23 0, #101419 100%);
background: -ms-linear-gradient(top, #171d23 0, #101419 100%);
background: linear-gradient(top, #171d23 0, #101419 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#171d23', endColorstr='#101419', GradientType=0);
border: 1px solid #171d23;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 100%
}
#inhalt .content-box-s .content table.queue {
margin-top: 5px;
}
#inhalt .content-box-s .transport_ecke {
background: url("../images/Build_tmp/ae6b67d617f5b4a9ad508219ca02b8.png");
margin: 0 0 -18px 0;
padding: 1px 5px 2px 0;
position: relative;
text-align: right;
top: -16px;
width: 35px;
}
#inhalt .content-box-s .build-faster {
color: #fff;
float: left;
margin: auto;
width: 50%;
width: 162px;
}
#inhalt .content-box-s .build-faster-img,
#inhalt .content-box-s .build-finish-img {
background: url("../images/Build_tmp/f67f646a967bc6e4f54dcfcc2c3f2b.png") -25px 0 no-repeat;
float: left;
height: 25px;
margin: 1px 7px 0 7px;
width: 25px;
}
#inhalt .content-box-s .order_dm {
margin-left: 7px;
}
#inhalt .content-box-s .build-faster.disabled .build-faster-img {
background-position: -25px -50px;
}
#inhalt .content-box-s .build-finish-img {
background-position: 0 0;
}
#inhalt .content-box-s .build-faster.disabled .build-finish-img {
background-position: 0 -50px;
}
#inhalt .content-box-s .dm_cost,
#inhalt .content-box-s .buy_dm {
color: #848484;
display: inline-block;
}
#inhalt .content-box-s .dm_cost .oldPrice {
text-decoration: line-through;
font-style: italic;
}
img.queuePic {
border: 1px solid #141e26;
border-radius: 3px;
}
a:hover img.queuePic {
border-color: #e7ae46;
}
#inhalt .content-box-s .construction .first {
padding-left: 0;
padding-top: 8px;
position: relative;
width: 43px;
}
#inhalt .content-box-s .construction .first div {
position: relative;
}
#inhalt .content-box-s .construction .data .desc {
padding-left: 12px;
width: 130px;
vertical-align: middle;
}
#inhalt .content-box-s .construction .data .timer {
color: #fff;
}
#inhalt .content-box-s .construction .data .ausbau {
padding-top: 8px;
}
#inhalt .content-box-s .level {
color: #a26d00;
}
#inhalt .content-box-s .construction .data .timeProdShip {
padding-top: 5px;
}
#inhalt .content-box-s .construction .data .timeProdAll {
padding: 5px 0 0 12px;
}
#inhalt .content-box-s .construction .data .timeProdAll .shipAllCountdown,
#inhalt .content-box-s .construction .data .timeProdShip .shipCountdown {
color: #fff;
font-weight: 700;
}
#inhalt .content-box-s .content table.construction tr.queue td {
color: #848484;
padding: 4px 0;
text-align: center;
width: 30px;
}
#inhalt .content-box-s .queue_link {
color: #fff;
display: block;
font-size: 11px;
margin: 0 2px;
text-align: center;
text-decoration: none;
width: 32px;
}
#box #inhalt .buildingimg .construction .pusher a.timeLink:link,
#box #inhalt .buildingimg .construction .pusher a.timeLink:visited,
.no-touch #box #inhalt .buildingimg .construction .pusher a.timeLink:hover,
#box #inhalt .buildingimg .construction .pusher a.timeLink:active {
background: transparent none;
cursor: pointer;
display: inline;
}
#box #inhalt .buildingimg .construction .pusher {
filter: alpha(opacity=60);
-moz-opacity: .6;
-khtml-opacity: .6;
opacity: .6;
background-color: #000;
position: absolute;
z-index: 1;
width: 100%
}
table.construction #Countdown,
table.construction #researchCountdown,
table.construction .shipCountdown {
font-weight: 700;
}
#stationbuilding .construction a,
#stationbuilding .construction a:active {
display: block;
height: 100px;
width: 100px;
background: url("../images/Build_tmp/0349d693b02c1927643248e4167cf8.gif") no-repeat;
color: #ff9600;
text-decoration: none;
position: absolute;
z-index: 3;
}
.no-touch #stationbuilding .construction a:hover,
#stationbuilding .construction a.active {
background: url("../images/Build_tmp/9c93d3dba7052ea7fd1758007e7959.gif") no-repeat;
}
.no-touch #resources #buttonz ul#building li a:hover,
.no-touch #resources-moon #buttonz ul#building li a:hover,
#resources #buttonz ul#building li a.active,
#resources #buttonz ul#building li a.active:link,
#resources-moon #buttonz ul#building li a.active,
.no-touch #resources #buttonz ul#building li div.construction a:hover,
.no-touch #resources-moon #buttonz ul#building li div.construction a:hover,
#resources-moon #buttonz ul#building li a.active:link {
background: url("../images/Build_tmp/ce2e012805bae16d3bc0967600eb58.gif") no-repeat;
color: #ff9600;
text-decoration: none;
}
.no-touch #resources #buttonz ul#building li div.construction a:hover,
.no-touch #resources-moon #buttonz ul#building li div.construction a:hover {
background: url("../images/Build_tmp/9c93d3dba7052ea7fd1758007e7959.gif") no-repeat;
}
.dark_highlight {
background: #181e25 url("../images/Build_tmp/5fbbb1876fcff20a8a265c06862495.png") 0 -1030px repeat-x;
background: -moz-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d3743), color-stop(100%, #181e25));
background: -webkit-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -o-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -ms-linear-gradient(top, #2d3743 0, #181e25 100%);
background: linear-gradient(to bottom, #2d3743 0, #181e25 100%);
border: 1px solid black;
border-color: #28323e #222b34 #232a34 #222b34;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
-moz-box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
font-size: 11px;
color: #fff;
display: inline-block;
padding: 3px 0;
text-decoration: none!important;
}
.dark_highlight:hover {
background: #2d3743 url("../images/Build_tmp/5fbbb1876fcff20a8a265c06862495.png") 0 -1080px repeat-x;
background: -moz-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #181e25), color-stop(100%, #2d3743));
background: -webkit-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -o-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -ms-linear-gradient(top, #181e25 0, #2d3743 100%);
background: linear-gradient(to bottom, #181e25 0, #2d3743 100%);
border: 1px solid black;
border-color: #232b34 #232b34 #29323d #232b34;
-webkit-box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
-moz-box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
}
#planet1 {
background-repeat: no-repeat;
height: 300px;
margin: 2px 2px 2px 2px;
position: relative;
width: 679px;
}
#planet1 .palnet_block_info {
color: #fff;
background: rgba(0, 0, 0, 0.8);
-moz-border-radius: 0px 2px 2px 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
position: absolute;
line-height: 18px;
padding: 5px 8px;
}
#planet1 .palnet_block_info span {
color: #27db7d;
}
#planet1 .palnet_block_info2 {
color: #fff;
background: rgba(0, 0, 0, 0.8);
-moz-border-radius: 0px 2px 2px 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
position: absolute;
text-align: center;
line-height: 18px;
padding: 20px 10px;
bottom: 0px;
width: 100%;
}
.planet2 {
display: inline-block;
text-align: center;
margin: 2px 2px 2px 2px;
transition: opacity .2s, visibility .2s;
}
.planet2 .img_img {
width: 220px;
text-align: center;
height: 130px;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.planet2:hover {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
-moz-box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
}
.planet2 .img_description {
background: rgba(0, 0, 0, 0.7);
color: #fff;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}<div id="inhalt">
<div class="content-box-s">
<div class="header">
<h3>Buildings</h3>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<tbody>
<tr>
<td colspan="2" class="idle">
<a class="tooltip" data-tooltip-content="There is no buildings done at the moment. Click here to get to your buildings page." href="../game/game.php?page=buildings">
You are not building anything at the moment.
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"></div>
</div>
<div class="content-box-s">
<div class="header">
<h3>Research</h3>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<table cellpadding="0" cellspacing="0" class="construction active">
<tr>
<th colspan="2">Computer Technology</th>
</tr>
<tr class="data">
<td class="first" rowspan="3">
<form action="game.php?page=overview" method="post" class="build_form">
<input type="hidden" name="cmd" value="cancel_tech">
<button type="submit" class="del" title="Cancel expansion of Computer Technology To Level (22)">
<div>
<a >
<img class="queuePic" width="40" height="40" src="./styles/theme/gow/gebaeude/108.gif" alt="Computer Technology">
</a>
<a>
<img src="../game/styles/images/del_build.jpg" height="15" width="15" />
</a>
</div>
</button>
</form>
</td>
<td class="desc ausbau">Improve to Level<span class="level"> (22)</span>
</td>
</tr>
<tr class="data">
<td class="desc">Duration:</td>
</tr>
<tr class="data">
<td class="desc timer">
<span id="Countdown" class="countdown2" secs="15461"></span>
</td>
</tr>
<tr class="data">
<td colspan="2">
<form action="game.php?page=overview" method="post" class="build_form">
<input type="hidden" name="queuetype" value="1">
<input type="hidden" name="cmd" value="fast_tech">
<button type="submit" class="build_submit dark_highlight onlist tooltip" data-tooltip-content="Build instantly with Antimatter.<br> Price : 858 AM" style="float: right; line-height: 18px; margin-right: 13px;">
<a class="build-faster" >
<div class="build-faster-img" alt="Halve time"></div>
<span class="build-txt">Instant build.</span>
<span class="dm_cost overmark">858 AM</span>
<span class="order_dm">Purchase with AM.</span>
</a>
</button>
</form>
</td>
</tr>
</table>
</div>
<div class="footer"></div>
</div>
<div class="content-box-s">
<div class="header">
<h3>Hangar</h3>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<table cellpadding="0" cellspacing="0" class="construction active">
<tr>
<th colspan="2">Solar Satellite</th>
</tr>
<tr class="data">
<td class="first" rowspan="3">
<form action="game.php?page=overview" method="post" class="build_form">
<input type="hidden" name="cmd" value="cancel_hangar">
<button type="submit" class="del" title="Cancel building. Solar Satellite">
<div>
<a>
<img class="queuePic" width="40" height="40" src="./styles/theme/gow/gebaeude/212.gif" alt="Computer Technology">
</a>
<a>
<img src="../game/styles/images/del_build.jpg" height="15" width="15" />
</a>
</div>
</button>
</form>
</td>
<td class="desc ausbau">Units to build<span class="level"> (995920)</span>
</td>
</tr>
<tr class="data">
<td class="desc">Duration:</td>
</tr>
<tr class="data">
<td class="desc timer">
<span id="Countdown" class="countdown2" secs="4881.9607843137"></span>
</td>
</tr>
<tr class="data">
<td colspan="2">
<form action="game.php?page=overview" method="post" class="build_form">
<input type="hidden" name="modo" value="1">
<input type="hidden" name="cmd" value="fast_hang">
<button type="submit" class="build_submit dark_highlight onlist tooltip" data-tooltip-content="Build instantly with Antimatter.<br> Price : 272 AM" style="float: right; line-height: 18px; margin-right: 13px;">
<a class="build-faster" >
<div class="build-faster-img" alt="Halve time"></div>
<span class="build-txt">Instant build.</span>
<span class="dm_cost overmark">272 AM</span>
<span class="order_dm">Purchase with AM.</span>
</a>
</button>
</form>
</td>
</tr>
</table>
</div>
<div class="footer"></div>
</div>
答案 0 :(得分：0)
/* Overwiev bottom */
.content-box-s {
margin: 0 0 5px 1px;
float: left;
width: 222px;
overflow: hidden;
-webkit-transition: all 0.95s ease-in-out;
-moz-transition: all 0.95s ease-in-out;
-o-transition: all 0.95s ease-in-out;
transition: all 0.95s ease-in-out;
position: fixed;
bottom: -140px;
}
.content-box-s:nth-child(1) {
left: 0;
bottom: 0;
}
.content-box-s:nth-child(2) {
left: 222px;
}
.content-box-s:nth-child(3) {
left: 442px;
}
.content-box-s:hover {
margin: 0 0 5px 1px;
width: 222px;
float: left;
overflow: hidden;
bottom: 0;
}
.content-box-s:hover #inhalt {
bottom: 0;
}
.content-box-s .header {
background: url("../images/Build_tmp/b9de2f5b06c823d628d22c4067ee35.gif") no-repeat;
height: 32px;
font-size: 11px;
}
.content-box-s .content {
background: url("../images/Build_tmp/bd764e9b39a1a48ad708039fda1bde.gif") repeat-y;
padding: 0 15px;
}
.content-box-s p {
padding: 5px 20px;
}
.content-box-s .footer {
background: url("../images/Build_tmp/174d5c09f617701fcaf1664a414869.gif") no-repeat;
height: 21px;
margin-top: -8px;
}
div.content-box-s .header h3 {
color: #6f9fc8;
font-size: 11px;
font-weight: 700;
padding-top: 10px;
width: 222px;
text-align: center;
}
.contentbox {
margin: 0 3px 0 2px;
}
#buttonz .contentbox .header .c-left,
#buttonz .contentbox .header .c-right,
#buttonz .contentbox .header,
#buttonz .contentbox .footer,
#buttonz .contentbox .footer .c-left,
#buttonz .contentbox .footer .c-right,
.contentbox .header .c-left,
.contentbox .header .c-right,
.contentbox .header,
.contentbox .footer,
.contentbox .footer .c-left,
.contentbox .footer .c-right {
background-image: url("../images/Build_tmp/191d6af9367f608bbee2743866c489.png");
background-repeat: repeat-x;
background-position: 0 -1px;
}
#buttonz .contentbox .header,
.contentbox .header {
height: 30px;
line-height: 30px;
position: relative;
}
#buttonz .contentbox .header .c-left,
#buttonz .contentbox .header .c-right,
.contentbox .header .c-left,
.contentbox .header .c-right {
height: 30px;
position: absolute;
top: 0;
width: 35px;
}
#buttonz .contentbox .header .c-left,
.contentbox .header .c-left {
background-position: 0 -33px;
left: -2px;
right: auto;
}
#buttonz .contentbox .header .c-right,
.contentbox .header .c-right {
background-position: 100% -66px;
left: auto;
right: -2px;
}
#buttonz .contentbox .content,
.contentbox .content {
border-left: 5px double #000;
border-right: 5px double #000;
background: #0d1014;
margin: 0 2px;
position: relative;
z-index: 2;
}
#buttonz .contentbox .footer,
.contentbox .footer {
background-position: 0 -100px;
height: 21px;
position: relative;
bottom: 5px;
left: 7px;
}
#buttonz .contentbox .footer .c-left,
#buttonz .contentbox .footer .c-right,
.contentbox .footer .c-left,
.contentbox .footer .c-right {
height: 21px;
position: absolute;
top: 0;
width: 35px;
}
#buttonz .contentbox .footer .c-left,
.contentbox .footer .c-left {
background-position: 0 -125px;
left: -8px;
right: auto;
}
#buttonz .contentbox .footer .c-right,
.contentbox .footer .c-right {
background-position: 100% -150px;
left: auto;
right: -8px;
}
#inhalt .content-box-s .build-faster.disabled:hover .build-faster-img {
background-position: -25px -75px;
}
#inhalt .content-box-s .build-faster:hover .build-finish-img {
background-position: 0 -25px;
}
#inhalt .content-box-s .build-faster.disabled:hover .build-finish-img {
background-position: 0 -75px;
}
#inhalt .content-box-s .content {
min-height: 46px;
height: auto!important;
height: 46px;
padding-top: 2px;
position: relative;
}
#inhalt .content-box-s .content td.idle {
padding: 10px 0;
text-align: center;
width: 177px;
}
#inhalt .content-box-s .content td.idle a:link,
#inhalt .content-box-s .content td.idle a:visited,
#inhalt .content-box-s .content td.idle a:active {
display: block;
color: #fff;
text-decoration: none;
}
.no-touch #inhalt .content-box-s .content td.idle a:hover {
text-decoration: underline;
}
#inhalt .content-box-s .content table.construction {
margin: 0;
padding: 3px;
font-size: 11px;
}
#inhalt .content-box-s .content table.construction.active {
background: #171d23;
background: -moz-linear-gradient(top, #171d23 0, #101419 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #171d23), color-stop(100%, #101419));
background: -webkit-linear-gradient(top, #171d23 0, #101419 100%);
background: -o-linear-gradient(top, #171d23 0, #101419 100%);
background: -ms-linear-gradient(top, #171d23 0, #101419 100%);
background: linear-gradient(top, #171d23 0, #101419 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#171d23', endColorstr='#101419', GradientType=0);
border: 1px solid #171d23;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 100%
}
#inhalt .content-box-s .content table.queue {
margin-top: 5px;
}
#inhalt .content-box-s .transport_ecke {
background: url("../images/Build_tmp/ae6b67d617f5b4a9ad508219ca02b8.png");
margin: 0 0 -18px 0;
padding: 1px 5px 2px 0;
position: relative;
text-align: right;
top: -16px;
width: 35px;
}
#inhalt .content-box-s .build-faster {
color: #fff;
float: left;
margin: auto;
width: 50%;
width: 162px;
}
#inhalt .content-box-s .build-faster-img,
#inhalt .content-box-s .build-finish-img {
background: url("../images/Build_tmp/f67f646a967bc6e4f54dcfcc2c3f2b.png") -25px 0 no-repeat;
float: left;
height: 25px;
margin: 1px 7px 0 7px;
width: 25px;
}
#inhalt .content-box-s .order_dm {
margin-left: 7px;
}
#inhalt .content-box-s .build-faster.disabled .build-faster-img {
background-position: -25px -50px;
}
#inhalt .content-box-s .build-finish-img {
background-position: 0 0;
}
#inhalt .content-box-s .build-faster.disabled .build-finish-img {
background-position: 0 -50px;
}
#inhalt .content-box-s .dm_cost,
#inhalt .content-box-s .buy_dm {
color: #848484;
display: inline-block;
}
#inhalt .content-box-s .dm_cost .oldPrice {
text-decoration: line-through;
font-style: italic;
}
img.queuePic {
border: 1px solid #141e26;
border-radius: 3px;
}
a:hover img.queuePic {
border-color: #e7ae46;
}
#inhalt .content-box-s .construction .first {
padding-left: 0;
padding-top: 8px;
position: relative;
width: 43px;
}
#inhalt .content-box-s .construction .first div {
position: relative;
}
#inhalt .content-box-s .construction .data .desc {
padding-left: 12px;
width: 130px;
vertical-align: middle;
}
#inhalt .content-box-s .construction .data .timer {
color: #fff;
}
#inhalt .content-box-s .construction .data .ausbau {
padding-top: 8px;
}
#inhalt .content-box-s .level {
color: #a26d00;
}
#inhalt .content-box-s .construction .data .timeProdShip {
padding-top: 5px;
}
#inhalt .content-box-s .construction .data .timeProdAll {
padding: 5px 0 0 12px;
}
#inhalt .content-box-s .construction .data .timeProdAll .shipAllCountdown,
#inhalt .content-box-s .construction .data .timeProdShip .shipCountdown {
color: #fff;
font-weight: 700;
}
#inhalt .content-box-s .content table.construction tr.queue td {
color: #848484;
padding: 4px 0;
text-align: center;
width: 30px;
}
#inhalt .content-box-s .queue_link {
color: #fff;
display: block;
font-size: 11px;
margin: 0 2px;
text-align: center;
text-decoration: none;
width: 32px;
}
#box #inhalt .buildingimg .construction .pusher a.timeLink:link,
#box #inhalt .buildingimg .construction .pusher a.timeLink:visited,
.no-touch #box #inhalt .buildingimg .construction .pusher a.timeLink:hover,
#box #inhalt .buildingimg .construction .pusher a.timeLink:active {
background: transparent none;
cursor: pointer;
display: inline;
}
#box #inhalt .buildingimg .construction .pusher {
filter: alpha(opacity=60);
-moz-opacity: .6;
-khtml-opacity: .6;
opacity: .6;
background-color: #000;
position: absolute;
z-index: 1;
width: 100%
}
table.construction #Countdown,
table.construction #researchCountdown,
table.construction .shipCountdown {
font-weight: 700;
}
#stationbuilding .construction a,
#stationbuilding .construction a:active {
display: block;
height: 100px;
width: 100px;
background: url("../images/Build_tmp/0349d693b02c1927643248e4167cf8.gif") no-repeat;
color: #ff9600;
text-decoration: none;
position: absolute;
z-index: 3;
}
.no-touch #stationbuilding .construction a:hover,
#stationbuilding .construction a.active {
background: url("../images/Build_tmp/9c93d3dba7052ea7fd1758007e7959.gif") no-repeat;
}
.no-touch #resources #buttonz ul#building li a:hover,
.no-touch #resources-moon #buttonz ul#building li a:hover,
#resources #buttonz ul#building li a.active,
#resources #buttonz ul#building li a.active:link,
#resources-moon #buttonz ul#building li a.active,
.no-touch #resources #buttonz ul#building li div.construction a:hover,
.no-touch #resources-moon #buttonz ul#building li div.construction a:hover,
#resources-moon #buttonz ul#building li a.active:link {
background: url("../images/Build_tmp/ce2e012805bae16d3bc0967600eb58.gif") no-repeat;
color: #ff9600;
text-decoration: none;
}
.no-touch #resources #buttonz ul#building li div.construction a:hover,
.no-touch #resources-moon #buttonz ul#building li div.construction a:hover {
background: url("../images/Build_tmp/9c93d3dba7052ea7fd1758007e7959.gif") no-repeat;
}
.dark_highlight {
background: #181e25 url("../images/Build_tmp/5fbbb1876fcff20a8a265c06862495.png") 0 -1030px repeat-x;
background: -moz-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d3743), color-stop(100%, #181e25));
background: -webkit-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -o-linear-gradient(top, #2d3743 0, #181e25 100%);
background: -ms-linear-gradient(top, #2d3743 0, #181e25 100%);
background: linear-gradient(to bottom, #2d3743 0, #181e25 100%);
border: 1px solid black;
border-color: #28323e #222b34 #232a34 #222b34;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
-moz-box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
box-shadow: 0 1px 3px 0 black, inset 0 1px 1px 0 hsl(213, 22%, 32%);
font-size: 11px;
color: #fff;
display: inline-block;
padding: 3px 0;
text-decoration: none!important;
}
.dark_highlight:hover {
background: #2d3743 url("../images/Build_tmp/5fbbb1876fcff20a8a265c06862495.png") 0 -1080px repeat-x;
background: -moz-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #181e25), color-stop(100%, #2d3743));
background: -webkit-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -o-linear-gradient(top, #181e25 0, #2d3743 100%);
background: -ms-linear-gradient(top, #181e25 0, #2d3743 100%);
background: linear-gradient(to bottom, #181e25 0, #2d3743 100%);
border: 1px solid black;
border-color: #232b34 #232b34 #29323d #232b34;
-webkit-box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
-moz-box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
box-shadow: 0 1px 3px 0 black, inset 0 -1px 1px 0 hsl(213, 27%, 26%);
}
#planet1 {
background-repeat: no-repeat;
height: 300px;
margin: 2px 2px 2px 2px;
position: relative;
width: 679px;
}
#planet1 .palnet_block_info {
color: #fff;
background: rgba(0, 0, 0, 0.8);
-moz-border-radius: 0px 2px 2px 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
position: absolute;
line-height: 18px;
padding: 5px 8px;
}
#planet1 .palnet_block_info span {
color: #27db7d;
}
#planet1 .palnet_block_info2 {
color: #fff;
background: rgba(0, 0, 0, 0.8);
-moz-border-radius: 0px 2px 2px 0px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
position: absolute;
text-align: center;
line-height: 18px;
padding: 20px 10px;
bottom: 0px;
width: 100%;
}
.planet2 {
display: inline-block;
text-align: center;
margin: 2px 2px 2px 2px;
transition: opacity .2s, visibility .2s;
}
.planet2 .img_img {
width: 220px;
text-align: center;
height: 130px;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.planet2:hover {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
-moz-box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
box-shadow: 0px 0px 30px 0px rgba(255, 99, 71, 0.5);
}
.planet2 .img_description {
background: rgba(0, 0, 0, 0.7);
color: #fff;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}<div id="inhalt">
<div class="content-box-s">
<div class="header">
<h3>Buildings</h3>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<tbody>
<tr>
<td colspan="2" class="idle">
<a class="tooltip" data-tooltip-content="There is no buildings done at the moment. Click here to get to your buildings page." href="../game/game.php?page=buildings">
You are not building anything at the moment.
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"></div>
</div>
<div class="content-box-s">
<div class="header">
<h3>Research</h3>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<table cellpadding="0" cellspacing="0" class="construction active">
<tr>
<th colspan="2">Computer Technology</th>
</tr>
<tr class="data">
<td class="first" rowspan="3">
<form action="game.php?page=overview" method="post" class="build_form">
<input type="hidden" name="cmd" value="cancel_tech">
<button type="submit" class="del" title="Cancel expansion of Computer Technology To Level (22)">
<div>
<a >
<img class="queuePic" width="40" height="40" src="./styles/theme/gow/gebaeude/108.gif" alt="Computer Technology">
</a>
<a>
<img src="../game/styles/images/del_build.jpg" height="15" width="15" />
</a>
</div>
</button>
</form>
</td>
<td class="desc ausbau">Improve to Level<span class="level"> (22)</span>
</td>
</tr>
<tr class="data">
<td class="desc">Duration:</td>
</tr>
<tr class="data">
<td class="desc timer">
<span id="Countdown" class="countdown2" secs="15461"></span>
</td>
</tr>
<tr class="data">
<td colspan="2">
<form action="game.php?page=overview" method="post" class="build_form">
<input type="hidden" name="queuetype" value="1">
<input type="hidden" name="cmd" value="fast_tech">
<button type="submit" class="build_submit dark_highlight onlist tooltip" data-tooltip-content="Build instantly with Antimatter.<br> Price : 858 AM" style="float: right; line-height: 18px; margin-right: 13px;">
<a class="build-faster" >
<div class="build-faster-img" alt="Halve time"></div>
<span class="build-txt">Instant build.</span>
<span class="dm_cost overmark">858 AM</span>
<span class="order_dm">Purchase with AM.</span>
</a>
</button>
</form>
</td>
</tr>
</table>
</div>
<div class="footer"></div>
</div>
<div class="content-box-s">
<div class="header">
<h3>Hangar</h3>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0" class="construction active">
<table cellpadding="0" cellspacing="0" class="construction active">
<tr>
<th colspan="2">Solar Satellite</th>
</tr>
<tr class="data">
<td class="first" rowspan="3">
<form action="game.php?page=overview" method="post" class="build_form">
<input type="hidden" name="cmd" value="cancel_hangar">
<button type="submit" class="del" title="Cancel building. Solar Satellite">
<div>
<a>
<img class="queuePic" width="40" height="40" src="./styles/theme/gow/gebaeude/212.gif" alt="Computer Technology">
</a>
<a>
<img src="../game/styles/images/del_build.jpg" height="15" width="15" />
</a>
</div>
</button>
</form>
</td>
<td class="desc ausbau">Units to build<span class="level"> (995920)</span>
</td>
</tr>
<tr class="data">
<td class="desc">Duration:</td>
</tr>
<tr class="data">
<td class="desc timer">
<span id="Countdown" class="countdown2" secs="4881.9607843137"></span>
</td>
</tr>
<tr class="data">
<td colspan="2">
<form action="game.php?page=overview" method="post" class="build_form">
<input type="hidden" name="modo" value="1">
<input type="hidden" name="cmd" value="fast_hang">
<button type="submit" class="build_submit dark_highlight onlist tooltip" data-tooltip-content="Build instantly with Antimatter.<br> Price : 272 AM" style="float: right; line-height: 18px; margin-right: 13px;">
<a class="build-faster" >
<div class="build-faster-img" alt="Halve time"></div>
<span class="build-txt">Instant build.</span>
<span class="dm_cost overmark">272 AM</span>
<span class="order_dm">Purchase with AM.</span>
</a>
</button>
</form>
</td>
</tr>
</table>
</div>
<div class="footer"></div>
</div>