3列html适合chrome确定但它在Firefox中搞砸了

时间：2014-07-21 00:20:08

标签： php html css html5 css3

我目前正在通过项目学习php我试图实现一个3列网站。 1列是主列。其他两列设置为display：none。当指针通过twitter或facebook图标时，它们会出现在onmouseover事件中。我如何在firefox和chrome

中使用这些列

这是一个链接http://slavesofdestiny.com/yenisite/ 

     //style.css

    .main-part h1{
    font-weight: 500; 
    letter-spacing: 0.8px;
}

p, h1, a{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: rgba(255,255,255,0.75);  
}
p{
    font-size: 16px;
}

body{
    background-attachment: fixed;
    background-position: center;
    background-color: black;
    background-image: url(http://www.slavesofdestiny.com/imgs/sodarkaplan.jpg);
}
// navigator
.navigator{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: black;
    border: 2px solid white;
}
.header-image{
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    height: auto;
}

/* Navigation Items */

ul ul {
    display: none;
}

ul li:hover > ul {
    display: block;
}
ul {
    border: 1px solid black;
    font-size: 20px;
    display: block;
    background: rgba(0,0,0,1); 
    background: linear-gradient(top,  rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));  
    background: -moz-linear-gradient(top,  rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9)); 
    background: -webkit-linear-gradient(top,  rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9)); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 2px;
    border-radius: 5px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
ul:after {
    content: ""; 
    clear: both; 
    display: block;
}
ul li {
    display: block;
    float: left;
}
ul li:hover {
    border-radius: 10px;
    background: rgba(95, 0, 0, 0.4);
    background: linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
    background: -moz-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
    background: -webkit-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
}
ul li:hover a {
    color: rgba(255, 255, 255, 1); 
}

ul li a {
    display: block; 
    padding: 10px 15px;
    color: white; 
    text-decoration: none;
}

.social-media{
    padding: 0px;
    padding-left: 3px;
    padding-right: 3px; 
    padding-top: 4.7px; 
    padding-bottom: 4.7px;
}

/*Content Part*/
.body-part{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 0px;
    width: 1200;
    min-height: 800px;
    border-radius: 5px; 
}

.container{
    float: left;
    position: relative;
    text-align: center;
    display: inline-block;
    margin-top: -20px;
    width: 800px;
    min-height: 800px;
    background-color: rgba(0,0,0,0.6);
    padding: 0;
    //border-radius: 10px; 
}

#sideBarRight{
    position: relative;
    float: right;
    width: 200px;
    display: none;
    vertical-align: top;
}

#sideBarLeft{
    position: relative;
    float: left; 
    width: 200px;
    vertical-align: top;
}

.side-bar{
    display: inline-block;
    position: relative;
    min-height: 50px;
    vertical-align: top;
}

.main-part{
    display: inline-block;
    padding-top: 10px; 
    width: 780px;
    min-height: 800px;
    margin: auto; 
    padding-bottom: 10px;
}

.main-part div{
    width: auto;
    background-color:rgba(150,150,150,0.36);
    border: 1px solid black;
    //border-radius: 20px;
    padding: 15px; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    box-shadow: 8px 8px 5px #000000;
}

.main-part div img{
    //max-height: 600px;
    max-width: 800px;
}

.main-part h1{
    padding: 10px;
}
.main-part p{
    padding: 10px;
}

#facebook-div{
    background-color: #ffffff;
    display: none;
}


     //index.php

    <?php

?>
<body>
    <div class="navigator">
        <?php include 'header.php'; ?>
    </div>
    <div class="body-part" >
        <div id="sideBarLeft" class="side-bar" style="float: left;">
            <div id="facebook-div" style="float: left;">
                <?php include 'leftSideBar.php'; ?>
            </div>
        </div>
        <div class="container" onmouseover="document.getElementById('sideBarRight').style.display = 'none'; document.getElementById('facebook-div').style.display = 'none';">
            <div class="main-part">
               <?php include 'postSelect.php' ?>
            </div>
                <?php include 'footer.php';?>
        </div>
        <div id="sideBarRight" class="side-bar">
            <?php include 'sidebar.php';?>  
        </div>

    </div><!--end body-part-->
</body>

1 个答案:

答案 0 :(得分：0)

可能会有所帮助的一些事情：

相关问题
最新问题