Question

由于某种原因，我的#gallery div没有出现。这是一个jsFiddle link，感谢您提前解决这个问题。

这是我的HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="<?php echo "{$_SERVER['PATH_INFO']}"?>/css/style.css"
              type="text/css" rel="stylesheet"/>
        <title></title>
    </head>
    <body>
        <div id="wrapper">
            <div id="mysql">
                <form name="mysql" action="mysql.php" method="post" target="mysqlfrm">
                    <div><label for="url">url/gallery:</label><input type="text" id="url" name="url"/></div>
                    <div><label for="title">title:</label><input type="text" id="title" name="title"/></div>
                    <div><label for="desc">description:</label><input type="text" id="desc" name="description"/></div>
                    <div><label for="country">country:</label><input type="text" id="country" name="country"/></div>
                    <div><label for="categories">categories:</label><input type="text" id="categories" name="category"/></div>
                    <p class="clear"/>
                    <input type="submit" value="insert"/>
                    <input type="reset" value="clear"/>
                </form>
                <iframe id="mysqlfrm" name="mysqlfrm"/>
            </div>
            <div id="gallery">
                <form name="gallery" action="upload.php" method="post" enctype="multipart/form-data" target="uploadFrm">
                <input id="image" name="file[]" type="file"/>
                <input type="submit" value="upload"/>
                <input id="galName" name="galName" type="text"/>
                </form>
                <div id="fList"></div>
                <iframe id="uploadFrm" name="uploadFrm"></iframe>
            </div>
        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="<?php echo $_SERVER['PATH_INFO']?>/js/multifile.js"></script>
    </body>
</html>

这是我的CSS：

*{
    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{
     float: left;
    }
    #search{
        float: right;
        vertical-align: bottom;
    }


    #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: 280px;
}
#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;*/

}

#posts div.tube{
    border-bottom: none;
}

#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:280px;
    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;
}

Answer 1

@ daniel.tosaba：改变

<iframe id="mysqlfrm" name="mysqlfrm"/>

到

<iframe id="mysqlfrm" name="mysqlfrm"></iframe>

Answer 2

你从你的css中找不到你的css画廊ID选择器，我根本找不到它。

Answer 3

我认为这可能会有所帮助：

DEMO

<style type="text/css" ><!--
    #gallery_box
    {
        width:728px;
        height:545px;
        border:solid #cccccc 1px;
        margin:20px auto 0px;
        padding:5px;
        -moz-box-shadow:0px 18px 40px #ccc;
        -webkit-box-shadow:0px 14px 40px #ccc;
        box-shadow:0px 5px 30px #ccc;
    }
    #thumbnail
    {
        width:160px;
        height:160px;
        background:#f6f6f6;
        border:solid #cccccc 1px;
        border:solid #cccccc 1px;
        margin:5px;
        padding:5px;
        float:left;
        text-align:center;
        position: relative;
        line-height: 156px;
        -moz-box-shadow:4px 4px 4px #ccc;
        n-webkit-box-shadow:4px 4px 4px #ccc;
        box-shadow: 4px 4px 4px #ccc;
    }
    img
    {
        border:none;
        -moz-box-shadow:0px 8px 10px #ccc;
        -webkit-box-shadow:0px 8px 10px #ccc;
        box-shadow: 0px 8px 10px #ccc;
    } 
    a
    {
        color:#0066FF; text-decoration:none;
    }
    a:hover
    {
        color:#0099FF;
    }  
--></style>

<div id="gallery_box" >
    <div id="thumbnail">
        <a href="" ></a>
    </div>  
</div>

div＃gallery没有出现

3 个答案: