css проблема форматирования цвета фона

0

У меня проблема с белым фоном на моем главном div. Я должен был указать фиксированный px, а это 750px. Я не хочу этого делать, я хочу просто использовать авто. Это потому, что мне нужно использовать один и тот же файл CSS для других страниц, и они будут разными высотами. Кроме того, при использовании значения height: auto на div div man, его доцент охватывает весь контент в этом div.

Вот ссылка, чтобы увидеть, как это выглядит: http://jsfiddle.net/#&togetherjs=KksjUfFlxS

Пожалуйста, помогите мне решить эту проблему.

Вот мой код HTML:

<!doctype html>
<head>
<meta charset="UTF-8">

<title>Home || Web Design Coursework</title>

<meta name="description" content="">

<meta name="author" content="Elliott Davidson">

<meta name="language" content="english">

<link rel="shortcut icon" href="images/favicon.ico">

<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">

</head>

<body>

<div id="container">

    <!-- start of header -->

    <div id="header">

        <img src="images/header-image.png" width="980" height="170" alt="kayaking header logo" /> </div>

    </div><!-- end of header -->

    <!-- start of navigation bar -->

    <div id="navmenu">

        <ul id="list-nav">

            <li id="topnavleft"><a href="index.html">Home</a></li>

            <li><a href="design.html">Design</a></li>

            <li><a href="about.html">About</a></li>

            <li><a href="kayaking-di">Kayaking Disciplines</a></li>

            <li id="topnavright"><a href="links.html">Useful links</a></li>

        </ul><!-- ul end list-nav -->

    </div><!-- div end navmenu -->

    <div id="mainbody">

        <div id="homepagevideo">

            <iframe width="560" height="315" src="http://www.youtube.com/embed/3WabVsBugGQ?rel=0" frameborder="0" allowfullscreen></iframe>

        </div><!-- end div homepagevideo -->

        <div id="homepagekayakingdisciplines">

            <h1 id="homepageh1kayakingdiscipline">Kayaking Disciplines</h1>

            <p>Aliquid delicatissimi et vix. Ut cum tation ridens. Mea ei impetus gubergren, sit natum doming quodsi et. Usu cu sonet debitis. Mea nullam tamquam ea. Ex vis vocibus splendide, ut eum ullum assum impedit.</p>

            <p>Decore facete mei ei. Eam ea maluisset dissentias, graece labore ocurreret has eu. Cu usu quem officiis maiestatis, cu quis assueverit mea. Primis deserunt consectetuer quo et, vim numquam aliquam eruditi ut.</p>

            <p>Sint erroribus imperdiet ex quo, et sit habeo dolorum molestiae, commodo dissentiet no duo. Mucius essent repudiare te pri, te tale accumsan reprimique pro. Mel cu ignota argumentum. Vis dolor efficiantur ex, ei mei reque oporteat percipitur. Sea corrumpit voluptaria referrentur ea, ei sensibus definitionem vel. No verterem elaboraret sit, velit apeirian vim ea.</p>

        </div><!-- end div homepagekayakingdisciplines -->

        <div id="homepagedesign">

            <h2>Design</h2>

            <p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis. Eum dicant mollis denique cu, an fastidii ocurreret instructior sit. His discere mediocrem no, an sit recteque tincidunt.</p>

<p>Mea ea animal inciderint, cum nulla saepe libris an. Modo meliore argumentum vel ei, mei cu option facilisis. Et enim detraxit vix. In clita mollis feugiat quo. Nobis soluta pri te, cum brute latine cotidieque ei.</p>

        </div><!-- end div homepagedesign -->

        <div id="homepageaboutme">

            <h3>About</h3>

            <p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>

        </div><!-- end div homepageaboutme -->

        <div id="homepagelinks">

            <h3>Links</h3>

            <p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>

        </div><!-- end div homepagelinks -->

    </div><!-- end div mainbody -->

    <div id="footer">

        <div id="footerimage">

            <img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />

            <div id="footertext"> 

                <div id="footernavmenu">

                    <ul id="list-footer-nav">

                        <li><a href="index.html">Home</a></li>

                        <li><a href="design.html">Design</a></li>

                        <li><a href="about.html">About</a></li>

                        <li><a href="kayaking-di">kayaking Disciplines</a></li>

                        <li><a href="links.html">Useful links</a></li>

                    </ul><!-- ul end list-footer-nav -->

                </div><!-- div end footernavmenu -->

                <div id="copyright">

                    <div class="copyrigttext">

                        Copyright  2013 Elliott Davidson, All Rights Reserved.

                    </div><!-- end div copyrighttext -->

                </div><!-- end div copyright -->

            </div><!-- end div footertext -->          

        </div><!-- footer image --> 

    </div><!-- end of footer -->

</div><!-- end of container -->

</body>
</html>

Вот мой код CSS:

@charset "UTF-8";
/* CSS Document */

#html, body{
    background-color : #32B7FF;
    font-family: Tahoma;
}

#container {
    margin-left : auto;
    margin-right : auto;
    width:980px;
    height:auto;
}

/********************************** header **********************************/


/********************************** nav bar **********************************/

#navmenu {
    width : 980px;
    margin-left : auto;
    margin-right : auto;
    height: 33px;
}

ul#list-nav {
    list-style : none;
    padding : 0;
    background-color : #32B7FF;
    font-family:Tahoma, Geneva, sans-serif;
    border-radius:10px 10px 0 0;
    overflow:hidden;
}

ul#list-nav li {
    display : inline;
    width : 980px;
    height : 33px;
}

ul#list-nav li a {
    text-decoration : none;
    padding : 8px 0;
    width : 196px;
    background : #1173A8;
    color : #fff;
    float : left;
    text-align : center;
}

ul#list-nav li a:hover {
    background : #4B98C1;
}

ul#list-nav li a:active {
    background : #4B98C1;
}

ul#list-nav li:first-child, ul#list-nav li:last-child {
   border-radius:10px;
}

/********************************** mainbody **********************************/

#mainbody {
    background-color:#FFF;
    width:980px;
    height:750px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-19px;
}

#homepagevideo {
    padding:10px;
    width:auto;
    height:auto;
    float:left;
}

#homepageh1kayakingdiscipline {
    padding-top:5px;
}

#homepagekayakingdisciplines {
    text-align:justify;
    padding-left:10px;
    padding-right:10px;
}

#homepagedesign {
    width:470px;
    padding-left:10px;
    padding-bottom:10px;
    padding-right:10px;
    float:left;
    height:auto;

}

#homepageaboutme {
    width:470px;
    padding-left:10px;
    padding-top:10px;
    padding-right:10px;
    float:right;
    height:auto;

}

#homepagelinks {
    width:470px;
    padding-left:10px;
    padding-bottom:10px;
    padding-right:10px;
    float:right;
    height:auto;
}

/********************************** footer **********************************/

#footer {
    margin-left:auto;
    margin-right:auto;
    height:175px;
    width:980;
}

#footertext {
    position:absolute;
    width:980px;
    height:auto;
    bottom: 0
}

#footerimage {
    margin-left:auto;
    margin-right:auto;
    width:980px;
    height:140px;
    position: relative;
}

#footernavmenu {
    width : 540px;
    right:0px;
    margin-right:0px;
    float:left;
    color:#FFF;
}



ul#list-footer-nav li {
    display : inline;
    padding-right: 8px;
}

ul#list-footer-nav li a {
    text-decoration : none;
    width:auto;
    float : left;
    color:#FFF;
    padding:6px;
}

ul#list-footer-nav li a:hover {
    color:#4B98C1;
}

ul#list-footer-nav li a:active {
    color:#4B98C1;
}

#copyright {
    width:440px;
    height:auto;
    right:0;
    position: absolute;
    bottom: 0;
    margin: 1em;
    text-align: right;
    color:#FFF;
}

.copyrighttext {

}
  • 0
    Как вы думаете, мы могли бы помочь вам, увидев полный код вашей веб-страницы? Спросите в краткой форме.
  • 0
    Как бы я сделал это хранится локально на моем компьютере?
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ

Вам просто нужно добавить overflow:auto; к вашему #mainbody. Это оно.

#mainbody {
    background-color:#FFF;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-19px;
    overflow:auto; /* Use THIS one */
}

РАБОЧАЯ ДЕМО

Поделиться
  • 0
    Попробуйте background-size:cover; и background-size:contain; - @ user3070541
  • 0
    Где вы их добавляете? - @ user3070541
Показать ещё 4 комментария
0

Вы можете сделать это, добавив это как до закрытия mainbody div, как это

HTML

<div class="clear"></div>

CSS:

.clear {
clear:both;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню