歌剧布局问题适用于小提琴而不是现场网站 - 如何

时间：2011-04-15 10:36:43

标签： html css opera 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Look Around You</title>
</head>
<body>
    <div id="fade"></div>
    <div id="wrapper">

    <div id="header">
        <div id="logo">
            <h1><a href="http://lookaroundyou.net">Look Around You</a></h1>
        </div>
        <div id="search">
            <input type="text"/>
            <input type="button" value="search"/>
        </div>
        <p class="clear"/>
        <div id="horNav">
            <ul class="horNav">
                <li><a class="home" href="#">HOME</a></li>
                <li><a class="submit" href="#">SUBMIT</a></li>
            </ul>
            <ul class="horLeft">
                 <li><a class="tags" href="#">TAGS</a></li>
            </ul>
            <ul class="advertisment">
                <li ><a class="contact" href="#">CONTACT</a></li>
            </ul>
            <ul class="horRight">
                 <li><a class="hello" href="#">HELLO</a></li>
            </ul>

        </div>
    </div>

        <div id="posts">
            <p></p>
        </div>
        <div id="verNav">
            <p></p>
            <div id="category">
                <ul></ul>
            </div>
            <div id="country">
                <ul></ul>
            </div>
        </div>
        <div id="adverts">
            <p>adverts</p>
        </div>

        <div id="footer">
            <ul class="horNav">
                <li class="horNav"><a href="#">TOP</a></li>
            </ul>
        </div>

    </div>
</body>
</html>

@font-face {
    font-family: 'QuicksandBook';
    src: url('Quicksand_Book-webfont.eot');
    src: url('Quicksand_Book-webfont.eot?#iefix') format('eot'),
         url('Quicksand_Book-webfont.woff') format('woff'),
         url('Quicksand_Book-webfont.ttf') format('truetype'),
         url('Quicksand_Book-webfont.svg#webfontQNKLE8Me') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBold';
    src: url('Quicksand_Bold-webfont.eot');
    src: url('Quicksand_Bold-webfont.eot?#iefix') format('eot'),
         url('Quicksand_Bold-webfont.woff') format('woff'),
         url('Quicksand_Bold-webfont.ttf') format('truetype'),
         url('Quicksand_Bold-webfont.svg#webfont41HQJ7Rv') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{
    margin:0;
    padding:0;
    font: 12px arial,helvetica,verdana,sans-serif;
    color:black;
    list-style: none;
    text-decoration: none;
    text-align: left;
}
body{
    text-align: center;
}

html{
    overflow-y: scroll;
}
    #wrapper{
        width:85%;
        margin:0 auto;
        min-width:720px;
        max-width:1000px;
    }
/*    #header, #logo, #category,#country{
        width: 100%;
        float:left;
    }*/
    #header{
        margin-top: 15px;
        width: 100%;
}
    #logo{
     max-width: 400px;
     float: left;
    }
    #search{
        float: right;
        max-width: 200px;
    }


    #horNav{
    border-bottom: 2px solid #d5d5d5;
    border-top: 2px solid #d5d5d5;
    padding: 2px 0;
    overflow: hidden;
    display: block;
    width: 100%;
    }

    input{
        display: inline;
}


#posts{
    width:50%;
    max-width: 522px;
    z-index: 200;
}
div.post{
    position: relative;
}
#verNav{
    width:20%;
    margin:0 2%;
    max-width: 130px;
}

#adverts{
    width:25%;
}
#posts,#verNav,#adverts{
    float:left;
}

#posts div.post,#verNav div, #adverts div{
    margin-top:25px;
}

#posts embed, #posts object{
    width: 100%;
    max-width: 512px;
    height: 288px;
}
#pages{
    display: block;
    overflow: hidden;
    width: 100%;
}

#footer{
    width:100%;
border-bottom: 2px solid #d5d5d5;
border-top: 2px solid #d5d5d5;
padding: 2px 0;
    clear:both;
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

#mysql{
    margin-top: 20px;
}

#mysql label{
    float: left;
    width: 100px;
}

#mysql label,#mysql input{
    font-size: 14px;
    margin-bottom: 4px;
}
#mysql input{
    border:1px solid black;
}
#mysql input:textarea{
    width: 150px;
}
.clear{
    clear: both;
}


#logo h1 a{
    font-style:italic;
    text-decoration: none;
    font-size: 44px;
}

    #horNav a{
/*        background: black;*/
    }

#category{
    display: none;
}

#verNav p{
    font-weight: bold;
    font-style: italic;
    margin-bottom: 10px;
}


#verNav li{
    /*padding: 1px 0;
    border-top: 1px #b8baba solid;*/

}

#verNav ul{
/*    margin-right: 75px;*/
/*    border-bottom: 1px #b8baba solid;*/

}

#verNav a, #verNav li{
    font-family: 'QuicksandBook';
    font-size: 13px;
    color:#6b6f70;
}
#verNav li{
        margin-bottom:1px;
}
#verNav p{
font-family: 'QuicksandBook';
    font-size: 13px;
color:#14b2c3;


}

    .horNav li{
        float:left;
        border-right:2px solid #e6e6dc;
    }

    .horLeft{
        float: left;
    }

    .horRight{
        float: right;
}

    .advertisment li{
        float:right;
        border-left:2px solid #e6e6dc;
    }

    #horNav a,#footer a{
        display:block;
        padding:3px 3px;
        -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     border-radius: 20px;
/*        color:white;*/
font-family: HELVETICA NEUE;
        font-size: 18px;
/*        height: 37px;*/
    }

    #horNav li, #footer li{
        padding: 0 2px;
}

    #horNav a:hover, #footer a:hover{
        background:#e6e6dc;
    }
    .home{
        color: #e23598;
}
.submit{
    color: #ffd236;
}
.tags{
    color: #a5c43a;
}
.hello{
    color: #ffd236;
}
.contact{
    color: #a5c43a;
}
#verNav a:hover{
    background: #e6e6dc;
}

iframe{
    border: none;
    font-size: 14px;
}

#posts div{
    border-bottom: 2px black solid;
    margin-bottom: 20px;
}

#posts iframe{
    border: none;
    width:100%;
    height:288px;
    max-width: 512px;
}

.title{
    font-size: 20px;
    font-family: 'QuicksandBold';
    color: #6b6f70;
}

.description{
    font-family: HELVETICA NEUE;
    font-size: 14px;
    border-bottom: 1px grey dotted;
    margin-top: 14px;
    padding-bottom: 5px;
    text-align: justify;
}

.info{
    font-family: HELVETICA NEUE;
    font-size: 14px;
color: #6b6f70;
    padding: 5px 0;
}

.category,.country{
        font-family:helevetica neue;
        font-size:14px;
color: #6b6f70;


}

#fade{
    position: fixed;
    top: 0;
    left: 0;
    background: #5f5f5f;
    z-index: -100;
    width: 100%;
    height: 100%;
    opacity:0;
}

FIDDLE VERSION
LIVE VERSION

P.S。我在谈论div＃search在我的实时版本中位于div＃logo下，但在jsfiddle中正常工作？有问题的浏览器OPERA。

非常感谢

1 个答案:

答案 0 :(得分：0)

JSFiddle会忽略您的Doctype并使用HTML 5 Doctype。这会触发标准模式。

您的Doctype（没有URI的HTML 4 Transitional）会触发Quirks模式。

如果您想使用Transitional，请使用规范中指定的Doctype，而不是缩写。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
相关问题
最新问题