Question

我是HTML和CSS的初学者。当我尝试最小化窗口时，页脚上的内容堆叠在一起。此外，当我最小化将底部移动到顶部时，页脚也被推到顶部。

以下是html和css

的链接

谢谢

<!DOCTYPE html>
<html>
    <head>
        <title> Samuel Selvarajah</title>
        <link rel="shortcut icon" href="Logo.ico">
        <link rel="stylesheet" type="text/css" href="homepage.css">
        <link rel="stylesheet" type="text/css" href="bootstrap.css"> 
        <link rel="stylesheet" type="text/css" href="bootstrap-responsive...

    </head>

    <body>
        <div class = "container">
        <div id = "menu-bar">
            <img src = "Logo1.ico"/>
            <ul>
                <li> about </li>
                <li> projects </li>
                <li> resume </li>
                <li> contact </li>
            </ul>
            <p id = "linkin"><strong> in </strong></p>
            <p id = "facebook"><strong> f </strong></p>
            <img id = "github" src = "25231.png"/>
        </div>
        <div id = "footer">
            <ul>
                <li> about </li>
                <li> projects </li>
                <li> resume </li>
                <li> contact </li>
           </ul>
        </div>
    </div>

    </body>

</html> 



body{
background-image: url("hp.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow:auto;
}

.container{
width: 700px;
height: 700px;
}

#menu-bar{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 85px;
background-image: url("http://i.stack.imgur.com/C5qGr.png");    
}

div img{
position: fixed;
zoom: 30%;
top: 10px;
left: 350px;
}

#menu-bar ul{
list-style-type: none;
margin: 0px;
padding: 0px; 
position: relative;
left: 400px;
top: 30px;
}

#menu-bar li{
display: inline;
font-family: Trebuchet MS;
font-size: 18px;
padding: 26px;
color: white;
}

#linkin{
position: fixed;
margin: 0px;
padding:0px;
font-family: Segoe UI, Myriad Pro, Myriad, Liberation Sans, Nimbus Sans L,    Helvetica Neue, Helvetica, Arial, sans-serif;
color: white;
top: 28px;
left: 1130px;
font-size: 33px;
}

#facebook{
position: relative;
margin: 0px;
padding:0px;
font-family: Segoe UI, Myriad Pro, Myriad, Liberation Sans, Nimbus Sans L,   Helvetica Neue, Helvetica, Arial, sans-serif;
color: white;
top: 8px;
left: 1040px;
font-size: 33px;
}

#github{
position: fixed;
left: 7180px;
zoom: 15%;
top: 150px;
}

#footer{
position: absolute;
bottom: -200px;
left: 0px;
width: 100%;
height: 39px;
background-image: url("http://i.stack.imgur.com/C5qGr.png");

}

#footer ul{
list-style-type: none;
margin: 0px;
padding: 0px; 
bottom: 10px;
left: 435px;
position: absolute;
}

#footer li{
display: inline;
font-family: Trebuchet MS;
padding: 18px;
font-size: 16px;
position: relative;
color: white;
}

Answer 1

请参阅this。

它需要很多改进，但它会让你开始。

也尽量不要在你的CSS中使用ID（＃）。

最小化窗口所有内容都被压扁

1 个答案: