Граница не охватывает весь сайт - элементы из потока? - PullRequest
0 голосов
/ 19 сентября 2011

Здравствуйте, я попытался выяснить, как загрузить свою работу в Интернете, но не могу найти простой бесплатный веб-хостинг для загрузки моих HTML и CSS в ... поэтому я предоставил еще один скриншот. Надеюсь, мои вопросы не слишком раздражают - помощь ваших парней до сих пор была потрясающей.

http://postimage.org/image/27n77o1xg/

Проблема, которую я испытываю в настоящее время, заключается в том, что граница вокруг моего тела не отражает все. Как я недавно узнал, я предполагаю, что это означает, что элемент находится вне потока из-за плавающего? Однако я не уверен, как это исправить в этом случае.

Мой HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <link rel="stylesheet" type="text/css" href="swaggersstyle.css">
        <title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script> 
</head>


<body>
    <img src="final.jpg" id="banner">
    <ul id="nav">
        <li class="links"><a href="index.html">Home</a></li>
        <li class="links"><a href="planning.html">Location</a></li>
        <li class="links"><a href="construction.html">Facilities</a></li>
        <li class="links"><a href="evaluation.html">Attractions</a></li>
        <li id = "endlink"><a href="evaluation.html" id="lastlink">Bookings</a></li>
    </ul>


<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>

<div id="mainc">

    <p>Make Yourself at Home</p>
    <p>Swaggers Backpackers is a converted old house located within     walking distance of all the best parts of Oamaru. Explore the old   victorian era buildings and shops of the city centre, or see the    penguin colonies down the street. Swaggers is owned and operated    by camp mum Agra, who makes all guests feel welcome, informed,  and perhaps a bit mothered. </p>

    <div class="slideshow"> 
        <img src="1.jpg" width="600" height="450" /> 
        <img src="2.jpg" width="600" height="450" /> 
        <img src="3.jpg" width="600" height="450" /> 
    </div> 


</div>   



<div id ="footer">
<p> fsafasfasf </p>
</div>

</body>
</html>

и мой CSS:

html{
    font-family: sans-serif;
    background-color:#464E54;
    height: 100%;
}

body{
    width: 960px;
    margin: auto;
    background-color: white;
    border: 3px solid black;
    padding: 0;
    height: 100%;
}

#banner{
    padding: 0px;
    margin: 0;
    display: block;
}

#nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    border-bottom: 1px solid #7f7f7f;
    border-top: 1px solid #7f7f7f;

}

#mainc {
    float: left;
    width: 654px;
    background-color: white;
    margin: 0;
    padding-left: 8px;
    padding-right: 4px;
    height: 100%;
}

#leftcolumn {
    padding-left: 3px;
    float: left;
    background-color: #dad8bf;
    width: 290px;
    border-right: 1px solid #7f7f7f;
    height: 100%;
}

#footer {
    clear: both;
    position: relative;
    bottom: 0.5px;
    margin: 0;
    background-color: #dad8bf;
    border-top: 1px solid #7f7f7f;
}

#footer p{
    margin: 0;
}

.links {
    float: left;
    margin: 0px;
    border-right: 1px solid #7f7f7f;
}

#endlink {
    float: left;
    margin: 0px;
    border-right: none;
}

#lastlink{
    display: block;
    width: 184px;
    font-weight: bold;
    color: #444444;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}

#lastlink:hover{
    background-color: #999999;
}

a:link {

    display: block;
    width: 183px;
    font-weight: bold;
    color: #444444;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}

a:visited {

    display: block;
    width: 183px;
    font-weight: bold;
    color: #444444;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}

a:hover {
    background-color: #999999;
}

a:active{
    background-color: #999999;
}

.slideshow {
    height: 483px;
    width: 632px;
    margin: auto;
    padding: 0px;
}

.slideshow img {
    padding: 0px;
    border: 1px solid #ccc;
    background-color: #eee;
}

заранее спасибо, ребята !!

Ответы [ 3 ]

6 голосов
/ 19 сентября 2011

Это происходит потому, что ваше тело имеет фиксированную высоту 100%. Измените метку тела css следующим образом:

height:auto;
min-height: 100%

, если это не работает, добавьте следующее с помощью:

overflow:auto;
1 голос
/ 19 сентября 2011

Вероятно, лучше НЕ использовать элемент body для вашего контейнера.Вместо этого просто добавьте

<div class="container"></div>

вокруг вашего кода и в вашем CSS измените html на body и body на div.container.

body{
    font-family: sans-serif;
    background-color:#464E54;
    height: 100%;
}

div.container{
    width: 960px;
    margin: auto;
    background-color: white;
    border: 3px solid black;
    padding: 0;
}

Редактировать: Я полностью пропустил 100%, вот и все.

0 голосов
/ 19 сентября 2011

Добавить переполнение: скрыто для вашего элемента тела. Когда элементы плавают, он не будет толкать высоту родительского контейнера, если не будет более ясного

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...