当我最小化窗口时,网站被破坏

时间:2014-12-25 22:57:44

标签: html css window width minimize

实际上我正在使用PHP和CSS创建一个站点。但不幸的是,我预计会有一个非常烦人的问题。当我最小化浏览器窗口时,网站被彻底销毁。我的一张照片出现在不同的地方......

看看。

ABOVE: Normal, BELOW: When I minimize window

你有任何想法如何解决它?

HTML:

<div id="container">
          <div id="menu"> 
                <div style="float: left;">Hi,</div>
                    <div style="float: right; margin-right: 10px;">
                        <a href="#"><img src="images/ico/message.png"/></a> 
                        <a href="#"><img src="images/ico/avatar.png"/></a>
                    </div>
            </div>
          <div id="sidebar">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec elit lacinia, iaculis neque nec, laoreet risus. Vestibulum faucibus nulla eu justo vulputate, vel varius lacus dapibus. 
          </div>
            <div id="main">
            <div id="left_grid"><img src="images/11.jpg" style="width: 260px;"/></div>
            <div id="right_grid"><img src="images/9.jpg" style="width: 260px;"/></div>
            </div>
          <h1>Quick three steps</h1>
          <div id="main_max">
              <div id="left_image"><img src="images/computer.png" style=""/></div>
              <div id="center_image"><img src="images/motivate.png" style=""/></div>
              <div id="right_image"><img src="images/goals.png" style=""/></div>
          </div>
          <div id="footer"> &copy;2014</div>
        </div>

CSS:

    #container { 
    width: 780px;
    margin: 0 auto;
    background: #FFFFFF;
    }
    #menu {
    font-size: 13px;
    width: 740px;
    height: 20px;
    font-weight: bold;
    color: #fff;
    background: #375c73; 
    border-top: 1px dashed white;
    padding: 6px 0 6px 40px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }
    #sidebar {
    float: left;
    width: 160px;
    padding: 15px 0 0 10px;
    font-size: 13px;
    }
    #left_grid {
    float: left;
    width: 270px;
    margin: 0;
    }
    #right_grid {
    margin: 0;
    }
    #main { 
    min-width: 550px;
    width: 560px;
    margin: 0 0 0 180px;
    padding: 15px 40px 30px 0;
    color: #444444;
    font-size: 13px; 
    line-height: 18px;
    } 
    #main_max {
    width: 770px;
    height: 120px;
    padding: 0px 10px 30px 12px;
    color: #444444;
    font-size: 13px; 
    line-height: 18px;
    }

0 个答案:

没有答案