完整样式表

Question

我需要知道的是如何使我的CSS配置为div / element碰撞检测。现在，我意识到要求碰撞检测的其他问题与我需要的相反;要 NOT 修复它，但要创建它，这就是我的意思;例如，我需要一个#altnav元素，它是一个侧边栏，它将持续到达，直到它使用#footer标记到达min-height: 100%元素。它目前所做的只是向下达到100％，但在我的页面中的某个点停止（http://www.thehideout.somee.com/games.html以查看我的意思）。另一个示例是我的#wrap元素，border-left: 2px solid #000000;标记超过了#footer元素;我需要它来停止在页脚元素。所以我要问的是如何检测元素是否与另一个元素发生碰撞，并停止在该元素处。优先是关键;我宁愿首先修复带有页脚的侧边栏，而不是#wrap和border标记。这是关键元素的CSS代码，其次是整个css，另一个#element导致了这一点。

#wrap  {
    width: 760px;
    margin: auto;
}

#altnav  {
    margin-top: 35px;
    margin-bottom: 10px;
    float: right;
    width: 190px;
    border-left: 2px dashed #000000;
    border-bottom: 2px dashed #000000;
    min-height: 100%;
    background: orange;
}
#altnav p  {
    color: black;
    font-family: terminal;
    font-size: 14px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}
#altnav h2  {
    text-align: center;
    color: black;
    font-family: terminal;
    font-size: 18px;
}

#body  {
    padding-top: 50px;
    width: 570px;
    font-family: Arial, Verdana, Terminal;
    font-size: 14px;
}

#footer  {
    width: 730px;
    height: 60px;
    clear: both;
    font-family: Tahoma, Arial, Terminal, San-Serif;
    font-size: 10px;
    color: #c9c9c9;
    border-top: 1px solid #efefef;
    padding: 13px 25px;
    line-height: 18px;
}
#footer li  {
    padding: 0px 2px 0px 2px;
    float: right;
    display: inline;
    text-align: left;
    font-family: Terminal, Arial, San-Serif, Tahoma;
    font-size: 10px;
}
#footer a  {
    font-family: Terminal, Arial, San-Serif, Tahoma;
    font-size: 10px;
    color: #c9c9c9;
    text-decoration: none;
}
#footer a:hover  {
    font-family: Terminal, Arial, San-Serif, Tahoma;
    font-size: 10px;
    color: red;
    text-decoration: underline;
}
#footer #footnav  {
    display: inline;
    width: 310px;
    float: right;
    text-align: left;
    position: relative;
    bottom: 65px;
}

<小时/>

完整样式表

html, body  {
    margin: 0;
    padding: 0;

}
.hidden {
    display: none;
}
body {
    background-position: center;
    background-repeat: no-repeat;
    font-size: 12px;
    color: #666666;
}
@font-face {
    font-family: 'karmatic_arcaderegular';
    src: url('fonts/ka1-webfont.eot');
    src: url('fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ka1-webfont.woff2') format('woff2'),
         url('fonts/ka1-webfont.woff') format('woff'),
         url('fonts/ka1-webfont.ttf') format('truetype'),
         url('fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
#wrap  {
    width: 760px;
    margin: auto;
}
#header {
    height: 60px;
        width: auto;
    background: #db6d16
                url(VexIMG/header.png);
}
#navigation  {
    width: 760px;
    height: 35px;
    position: absolute;
    border-bottom: 2px solid #000000;
    background: orange;
    padding: 0px;
}
#navigation .padding  {
    padding: 2px;
}
#navigation .navlinks  {
    position: absolute;
    top: 1px; left: 0px;
}
#navigation .navlinks ul  {
    margin: 0px;
    padding: 0px;
    text-align: center;
    list-style-type: none;
    width: 760px;
    height: 35px;
}
#navigation .navlinks li {
    position: relative;
    top: 5px;
    margin: 0px 5px 0px 5px;
    list-style-type: none;
    display: inline;
}
#navigation .navlinks li a  {
    color: #000000;
    padding: 5px 0px 9px 0px;
    text-decoration: none;
    font-size: 18px;
    font-family: karmatic_arcaderegular;
    padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover  {
    margin: 0px;
    color: #ffffff;
    background: orange;
    text-decoration: underline;  
} 
#altnav  {
    margin-top: 35px;
    margin-bottom: 10px;
    float: right;
    width: 190px;
    border-left: 2px dashed #000000;
    border-bottom: 2px dashed #000000;
    min-height: 100%;
    background: orange;
}
#altnav p  {
    color: black;
    font-family: terminal;
    font-size: 14px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}
#altnav h2  {
    text-align: center;
    color: black;
    font-family: terminal;
    font-size: 18px;
}
#body  {
    padding-top: 50px;
    width: 570px;
    font-family: Arial, Verdana, Terminal;
    font-size: 14px;
}
#body .secret img  {
    width: 150px;
    height: 100px;
    border: 2px solid black;
}   
#body .game  {
    padding: 3px 3px 10px 3px;
}
#body .game img  {
    align: center;
    float: left;
    width: 175px;
    height: 101px;
    border: 2px ridge #ff0000;
}
#body .game caption  {
    padding-left: 1px;
}
#body .space  {
    padding-top: 10px;
        padding-bottom: 10px;
    border-top: 4px ridge red;
    border-bottom: 4px ridge red;
}
#body .game caption  {
    margin-top: 2px;
    float: right;
    font-family: Terminal, Arial, Verdana, San-Serif;
    font-size: 12px;
    color: #000000;
    border-bottom: 2px dashed #e9e9e9;
}
#body .game a  {
    font-family: Terminal, Arial, San-Serif, Tahoma;
    font-size: 10px;
    color: #c9c9c9;
    text-decoration: none;
}
#body .game a:hover  {
    font-family: Terminal, Arial, San-Serif, Tahoma;
    font-size: 10px;
    color: red;
    text-decoration: underline;
}
#footer  {
    width: 730px;
    height: 60px;
    clear: both;
    font-family: Tahoma, Arial, Terminal, San-Serif;
    font-size: 10px;
    color: #c9c9c9;
    border-top: 1px solid #efefef;
    padding: 13px 25px;
    line-height: 18px;
}
#footer li  {
    padding: 0px 2px 0px 2px;
    float: right;
    display: inline;
    text-align: left;
    font-family: Terminal, Arial, San-Serif, Tahoma;
    font-size: 10px;
}
#footer a  {
    font-family: Terminal, Arial, San-Serif, Tahoma;
    font-size: 10px;
    color: #c9c9c9;
    text-decoration: none;
}
#footer a:hover  {
    font-family: Terminal, Arial, San-Serif, Tahoma;
    font-size: 10px;
    color: red;
    text-decoration: underline;
}
#footer #footnav  {
    display: inline;
    width: 310px;
    float: right;
    text-align: left;
    position: relative;
    bottom: 65px;
}

CSS Div Margin＆＃34;元素碰撞检测＆＃34;

完整样式表

0 个答案: