div＃畫廊不顯示

由於某種原因，我的#gallery div沒有顯示出來。這裏有一個jsFiddle link，預先感謝任何幫助解決這個問題。div＃畫廊不顯示

這裏是我的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; 
}

來源

2011-04-18 daniel.tosaba

你不必叫 '畫廊' – 2011-04-18 14:46:35

[Rü確保肯定的'id'？ – 2011-04-18 14:49:15

@neil，確實......但真正的問題被@stealthyninja發現並回答。 – 2011-04-18 15:06:24

@ daniel.tosaba：更改

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

到

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

來源

2011-04-18 14:49:30 stealthyninja

@ daniel.tosaba：更新了jsFiddle - http://jsfiddle.net/wm3Uh/9/ – stealthyninja 2011-04-18 14:57:10

優秀。這是非常有用的知道！非常感謝 – 2011-04-18 17:33:58

你錯過了從你的css的畫廊id選擇器的外觀，我根本找不到它。

來源

2011-04-18 14:59:52

我想這可能是有益的：

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>

來源

2011-06-23 22:31:25 chanuka

div＃畫廊不顯示

回答

相關問題