Question

我是网站的新手，所以我希望我能以正确的方式和正确的方式提出要求。我有一个网站，我在菜单栏下面有一个图像。我试图让它留在容器内，如果图像太大或太小，它将扩展到容器。我试过max-height：100％;和最大宽度：100％;没有运气。

我遇到的另一个问题是尝试将页脚缩放到页面的20％，并让内容整齐地浮动在其中。

通过将代码更改为此，我几乎解决了一个问题 HTML：

<div id="slideshow_container">
<ul> 
<li>
<img src="images/banner_image.jpg" alt="banner1" />
</li> 
</ul>

这个CSS：

#slideshow_container 
{
    float:inherit;
    max-height: 600px; 
    background: url(../images/banner_image.jpg) repeat-x; 
}

这是我的jsfiddle：http://jsfiddle.net/DPMC87/8cxnmxgo/

所有的帮助和解释都非常感激，因为我正试图修复它。

<title>Home</title>
<link rel="stylesheet" type="text/css" href="stylesheets/reset.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />

<div id="header">

    <div class="container">

    <h1><a href="index.html">This</a></h1>

    <div id="main_menu">

        <ul>
            <li class="first_list"><a href="index.html" class="main_menu_first main_current">home</a></li>
            <li class="first_list"><a href="#" class="main_menu_first">about us</a></li>
            <li class="first_list"><a href="#" class="main_menu_first">Design</a></li>
            <li class="first_list with_dropdown">
            <li class="first_list"><a href="#" class="main_menu_first">Gallery</a></li>
            <li class="first_list"><a href="#" class="main_menu_first">Store</a></li>
        </ul>

    </div> <!-- END #main_menu -->

    </div> <!-- END .container -->

</div> <!-- END #header -->

<div id="main_content">

    <div id="slideshow_area">

    <div class="container">

        <div id="slideshow_container">

            <ul>
                <li><img src="images/banner_image.jpg" alt="banner1" /></li>
            </ul>


        </div> <!-- END #slideshow_container -->

    </div> <!-- END .container -->

    </div> <!-- END #slideshow_area -->




    <div id="latest_works">

        <h3>LATEST DESIGNS</h3>



        <div id="carousel_wrapper">

            <ul>
                <li id="work01">
                    <a href="#"><img src="images/sample_view.gif" alt="work01" /></a>
                </li>
                <li id="work02">
                    <a href="#"><img src="images/sample_view.gif" alt="work02" /></a>
                </li>
                <li id="work03">
                    <a href="#"><img src="images/sample_view.gif" alt="work03" /></a>
                </li>
                <li id="work04">
                    <a href="#"><img src="images/sample_view.gif" alt="work04" /></a>
                </li>
            </ul>

        </div> <!-- END #carousel_wrapper -->

    </div> <!-- END #latest_works -->

    <div id="bottom_content">

        <div id="news">

            <h3>News</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nulla sapien, at aliquam erat. Sed vitae massa tellus. Aliquam commodo
            aliquam metus, sed iaculis nibh tempus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci
            luctus et ultrices posuere cubilia Curae; Etiam nec nisi in nisl euismod fringilla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nulla sapien, at aliquam erat. Sed vitae massa tellus. Aliquam commodo
            aliquam metus, sed iaculis nibh tempus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci
            luctus et ultrices posuere cubilia Curae; Etiam nec nisi in nisl euismod fringilla</p>

        </div> 

        <div id="clients">


    </div> <!-- END #bottom_content -->

</div> <!-- END #main_content -->

<div id="footer">

    <div class="container">


        <div id="footer_explore" class="footer_info">

            <h4>explore</h4>
            <ul>
                <li><a href="index.html">home</a></li>
                <li><a href="#">about us</a></li>
                <li><a href="#">Design</a></li>
                <li><a href="portfolio.html">portfolio</a></li>
            </ul>

        </div> <!-- END #footer_about -->

        <div id="footer_browse" class="footer_info">

            <h4>browse</h4>
            <ul>
                <li><a href="contact.html">contact us</a></li>
                <li><a href="#">terms of service</a></li>
                <li><a href="#">privacy policy</a></li>
            </ul>

        </div> <!-- END #footer_about -->

        <div id="footer_connect" class="footer_info">

            <h4>connect with us</h4>

            <ul>
                <li><a href="http://www.facebook.com" id="facebook" title="Facebook">Facebook</a></li>
                <li><a href="http://www.twitter.com" id="twitter" title="Twitter">Twitter</a></li>
                <li><a href="http://www.pinterest.com" id="pinterest" title="Pinterest">Pinterest</a></li>
            </ul>

        </div> <!-- END #footer_about -->
        <br>
        <p id="copyright">&copy; copyright blah blah


    </div> <!-- END .container -->

</div> <!-- END #footer -->

图像不在容器内，并调整页脚以整齐地包含物品

0 个答案: