1. 首頁
  2. 問答
  3. 其中的包裝或div將不會去我的網站上的某些頁面的底部

其中的包裝或div將不會去我的網站上的某些頁面的底部

2013-11-20 11 views
2

在我的網站上，所有的文字頁面，保持在頁面底部的包裝。出於某種原因，在包含圖像的頁面上，包裝不會到達底部，也不會包含圖像的div。其中的包裝或div將不會去我的網站上的某些頁面的底部

下面是HTML

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Just Joel</title> 
    <link href="../CSS/JJ.css" rel="stylesheet" type="text/css" /> 
    <link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css"> 
    <link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css"> 

     <meta charset="utf-8" /> 

     <script type="text/javascript" src="../js/jquery-1.4.3.js"></script> 
     <script type="text/javascript" src="../js/jquery.corner.js"></script> 
<script type='text/javascript' src="../js/slideshow.js"></script> 


     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 
<link href="../../../CSS/JJ.css" rel="stylesheet" type="text/css"> 

    </head> 

    <body> 

    <div id="wrapperfull"> 

    <div id="header"> 
    <a href="index.html"><img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header"></a> 
    </div><!-- end header div --> 

    <div class="navigation"> 
    <div class="menu-holder"> 
    <ul class="menu"> 
       <li><a href="../../index.html">Home</a> 
       </li> 
       <li><a href="../../about.html">About</a> 
       </li> 
       <li><a href="#">Work</a> 

      <ul class="submenu"> 
       <li><a href="../../print.html">Print</a> 
       </li> 
       <li><a href="../../branding.html">Branding</a> 
       </li> 
       <li><a href="../../photography.html">Photography</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="../../blog.html">Blog</a> 
     </li> 
     <li><a href="../../inspired.html">Inspired</a> 
     </li> 
     <li><a href="../../contact.html">Contact</a> 
     </li> 
     </ul> 
     </div> 
    <!-- menu-holder end --> 
    </div><!-- end navigation div --> 


    <div class="blog-container"> 
    <div id="sidebarwrapper"> 

<div id="sidebar"> 


    <h1>TREE TOP NEWS</h1> 
    <br> 
    <p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p> 

    <p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p> 


    </div><!--sidebar!--> 
    </div> 


<div class="project"> 

    <img src="../../../Images/Tree Top News/P7158702.jpg" alt="Tree Top" class="image" height="378" width="580"> 
    <img src="../../../Images/Tree Top News/P7158703.jpg" alt="Tree Top" class="image" height="378" width="580"> 
    <img src="../../../Images/Tree Top News/P7158711.jpg" alt="Tree Top" class="image" height="378" width="580"> 
    <img src="../../../Images/Tree Top News/P7158701.jpg" alt="Tree Top" class="image" height="378" width="580"> 
    <img src="../../../Images/Tree Top News/Tree Top News 2010-6.jpg" alt="Tree Top" class="image" height="378" width="580"> 

    </div> 

    </div> 

    </div> 

    </body> 
    </html>

這裏是CSS

#wrapperfull { 
min-height: 100%; 
width: 1050px; 
border: none; 
margin-top: 0px; 
background-color: #FFF; 
position: relative; /* for the absolute positioned footer */ 
margin-right: auto; 
margin-bottom: auto; 
padding-top: 0.1px; 
padding-right: 30px; 
padding-bottom: 0px; 
padding-left: 30px; 
    } 

    #head { 
height: 100px; 
width: 1050px; 
border: none; 
margin: auto; 
background-color: #FFF; 
position: fixed; 
    } 

    #header { 
height: 135px; 
width: 1045px; 
font-family: Helvetica, sans-serif; 
position: fixed; 
background-color: #FFF; 
margin-top: 0px; 
    } 

    #footer { 
position: absolute; 
width: 1050px; 
height: 85px; 
bottom: 0; 
padding: 0px; 
margin-bottom: 150px; 
    } 

    .footer-style { 
padding: 40px; 
    } 

    h1 { 
font-family: "geogtq md"; 
color: #00BDE5; 
font-size: 25px; 
text-decoration: none; 
margin-top: 35px; 
    } 

    h1:hover { 
color: #007889; 
font-size: 25px; 
    } 

    h2 { 
font-family: Helvetica, sans-serif; 
color: #00BDE5; 
font-size: 25px; 
text-decoration: none; 
    } 

    h2:hover { 
color: #007889; 
font-size: 25px; 
    } 

    p { 
font-family: Helvetica, sans-serif; 
color: #01778B; 
font-size: 12px; 
text-align: justify; 
    } 

    img { 
float: right; 
    } 

    html { 
margin: 0; 
padding: 0; 
border: none; 
height: 100%; 
    } 

    body { 
margin: 0; 
padding: 0; 
border: none; 
height: 100%; 
background-image: url(../Images/stripe_70d2cce6f1e8675c4b38e18625444054.png); 
background-repeat: repeat; 
    } 

    /* because of the box model anong with the height and set width, you'll want to have padding, border, and margin set to 0. Auto left and right margins are ok for centering. */ 


    .container { 
    height: 100%; 
    width: 1050px; 
    margin-top:120px; 
    display: inline-block; 
    background-color: #FFF; 
    } 

    .heading { 
height: 90px; 
width: 750px; 
float: left; 
margin-top: 70px; 
position: fixed; 
background-color: #FFF; 
margin-bottom: 35px; 
margin-left: auto; 
    } 

    .blog-container { 
    min-height: 100%; 
    width: 700px; 
    margin-top: 170px; 
margin-right: 0px; 
    background-color: #FFF; 
    } 

    .work-container { 
    min-height: 100%; 
    width: 585px; 
    margin-top: 70px; 
    background-color: #FFF; 
    } 

    .slideshow { 
width: 900px; 
list-style: none; 
position: relative; 
margin-top: 25px; 
    } 

    ul.slideshow li { 
position: absolute; 
left: -2px; 
top: -9px; 
display: inline; 
    } 

    .navigation { 
height: 150px; 
width: 600px; 
margin-top: 0px; 
margin-left: auto; 
padding-top: 20px; 
font-family: Helvetica, sans-serif; 
position: fixed; 
background-color: #FFF; 
    } 

    .menu-holder ul { 
height: 120px; 
    padding: 0; 
    list-style-type: none; 
    } 

    .menu-holder ul li { 
position: relative; 
float: left; 
line-height: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 100px; 
margin-left: 0px; 
padding-top: 0px; 
padding-right: 10px; 
padding-bottom: 0; 
padding-left: 0px; 
    } 

    .menu-holder ul li:hover ul { 
    display: block; 
float: left; 
color: #000; 
    } 
    .menu-holder ul li a { 
font-family: Helvetica, sans-serif; 
font-size: 15px; 
display: block; 
color: #00BDE5; 
text-decoration: none; 
padding-top: 15px; 
padding-right: 10px; 
padding-bottom: 15px; 
padding-left: 0px; 
    } 

    .menu-holder ul li a:hover { 
color: #007985; 
    } 

    .menu-holder ul li ul { 
    float: none; 
    display: none; 
    position: absolute; 
    top: 35px; 
    left: -10px; 
    margin: -1px 0 0px 10px; 
    padding: 5px 10px 5px 10px; 
    white-space: nowrap; 
    } 
    .menu-holder ul li ul:hover { 
    display: block; 
    } 
    .menu-holder ul li ul li { 
    position: static; 
     float: none; 
     display: inline; 
     padding: 0px 0px 0px 0px; 
     margin: 0px 0px 0px -10px; 
margin-right: 20px; 
    } 

    .menu-holder ul li ul li a { 
    display: inline; 
    margin: 0 0px 0 0px; 
    -webkit-border-radius: 0; 
    } 

    a:link { 
text-decoration: none; 
color: #000; 
font-family: Helvetica, sans-serif; 
    } 

    a:hover { 
text-decoration: none; 
color: #000; 
font-family: Helvetica, sans-serif; 
    } 

    ul { 
    font-size: 15px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
margin-right: 40px; 
    } 

    ul li, ul li ul li { 
display: inline; 
position: relative; 
float: left; 
color: #00BDE5; 
    } 

    li ul { 
    display: none; 
    width: 450px; 
margin-right: 20px; 
    } 

    ul ul li a { 
    font-family: Helvetica, sans-serif; 
font-size: 15px; 
text-decoration: none; 
    margin-right: 15px; 
    white-space: nowrap; 
    color: #00BDE5; 
margin-right: 20px; 
    } 

    li:hover ul { 
    display: inline; 
    position: absolute;  
    } 

    li:hover li { 
    float: none; 
    font-size: 15px; 
    margin-top:3px; 
    } 

    .services1 a { 
    font-family: Helvetica, sans-serif; 
font-size: 12px; 
color: #00BDE5; 
    float: left; 
    list-style-type: none; 
    } 

    a:link { 
text-decoration: none; 
color: #00BDE5; 
font-family: Helvetica, sans-serif; 
text-align: center; 
    } 

    a:hover { 
text-decoration: none; 
color: #007889; 
font-family: Helvetica, sans-serif; 
text-align: center; 
    } 

    /* Thumb size 230 x 150 px */ 

    .work_thumbs { 
width:1000px; 
margin: 0px auto 0 auto; 
float: left; 
    } 

    .work_thumbs li { 
margin: 0px 15px 15px 0px; 
list-style-type: none; 
display: block; 
float: left; 
display: inline; 
font-family: Helvetica, sans-serif; 
color: #FFF; 
overflow: hidden; 
    } 

    .work_thumbs li a { 
float: inherit; 
display: block; 
width: 230px; 
padding-bottom: 20px; 
font-family: Helvetica, sans-serif; 
color: #00BDE5; 
height: 180px; 
border: 1px solid #02BDE5; 
overflow: hidden; 
text-align: centre; 
font-size: 12px; 
    } 

    .work_thumbs li .type { 
color: #01BDE6; 
    } 

    .work_thumbs li a:hover { 
background-color: #ceeef6; 
border-bottom: 1px solid #02BDE5; 
text-decoration: none; 
color: #007789; 
font-family: Helvetica, sans-serif; 
text-align: centre; 
    } 

    .work_thumbs li .thumb { 
margin-bottom: 15px; 
display:block 
    } 

    .project { 
width: 580px; 
height: 1000px; 
margin-top: 0px; 
margin-right: 100px; 
left: auto; 
background-color: #fff; 
    } 

    .single .header { 
position:static 
    } 

    .single #sidebar a { 
color:#000; 
    } 

    .single #sidebar a:hover { 
color:#4f4f4f 
    }  

    .image { 
margin: 0px; 
padding-bottom:50px; 
    } 

    /* Set fixed top margin */ 

    #sidebar { 
width: 273px; 
height: 200px; 
left: 50%; 
top: 165px; 
background-color: #FFF; 
padding: 10px 20px 10px 10px; 
color:#00C0EE; 
font-family: Helvetica, sans-serif; 
position: fixed; 
color: #007789; 
font-size: 15px; 
    } 

    #sidebar h1 { 
font-family: Helvetica, sans-serif; 
padding: 5px 0 15px 0; 
font-weight: normal; 
font-size: 18px; 
color: #00C0EE; 
    } 

    #sidebar p { 
padding-bottom: 15px; 
font-family: Helvetica, sans-serif; 
color: #007789; 
height: 100%; 
    } 

    #sidebarwrapper { 
right: 822px; 
position: absolute; 
width: 205px; 
height: 200px; 
top: 248px; 
    } 

    * { 
margin: 0; padding: 0; 
    } 

    #page-wrap { 
width: 600px; 
margin: 15px auto; 
position: relative; 
    } 

    #sidebar ul { 
background: #EEE; 
padding: 10px; 
    } 

    li { 
float: left; 
display: inline; 
    } 

    #main { 
width: 700px; 
float: left; 
    }

http://jsfiddle.net/Q6Lze/

來源

2013-11-20 user3015137

+1

使用jsfiddle.net請！ – agconti

回答

1

你需要一個clearfix清除其中包含的浮動。這迫使格包含漂浮的圖片佔據這個空間，而不是崩潰到本身：

.project:after { 
    display: table; 
    content: ''; 
    clear: both; 
}

或者只是把它添加到div:after代替

來源

2013-11-20 22:14:20 brouxhaha

+0

非常感謝，一直在竊聽我一會，救生員 – user3015137

相關問題

 相關問題