html页面和外部CSS中相互重叠的元素无法正常工作_Html_Css

html页面和外部CSS中相互重叠的元素无法正常工作

html css

html页面和外部CSS中相互重叠的元素无法正常工作,html,css,Html,Css,我不熟悉html和css，我对很多元素都有困难。我的页面中的元素彼此重叠。另外一个我一直存在的问题是CSS不能正常工作，从而导致图片和其他元素的大小错误等等这是我的HTML代码 <!doctype html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="homepageuni.css">

我不熟悉html和css，我对很多元素都有困难。我的页面中的元素彼此重叠。另外一个我一直存在的问题是CSS不能正常工作，从而导致图片和其他元素的大小错误等等

这是我的HTML代码

        <!doctype html>
        <html lang="en">

        <head>
        <link rel="stylesheet" type="text/css" href="homepageuni.css">
        <meta charset="utf-8">
        <meta name="homepage" content="a homepage for the survey website">

        <title> Kingston University Survey Homepage</title>
        </head>
        <body>

        <img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/>
        <div id = "buttons">
        <button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
        <button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>

        <a href="http://www.w3schools.com/html/">LogIn</a>
        </div>
        <br/><br/><br/><br/><br/><br/>
        <img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />

        <div id="footer">
        <p> copyright </p> 
        <img src="facebookpic.png" alt="facebookpic" />
        <br/>
        <img src="twitterpic.jpg" alt="twitterpic"/>
        </body>
        </div>
        </html>

我不确定哪些元素应该在哪里，但要确保结束体标记是结束html标记之前的最后一个标记。将结束div标记移到其前面

以下是一些经过修改的CSS：

在你的按钮css中，你没有说明你使用的位置是哪种类型的：相对的；位置：绝对位置；位置：固定；在uni css中，最大高度为150px，但高度为250px。此外，任何类型的填充都会将您声明的值添加到宽度中，因此元素的宽度将为宽度：250+50 padding lefts非常感谢，但是uni徽标现在位于页面的moddile中。如何将其移动到页面的左上角？以及如何调整按钮的大小？我正在尝试使宽度更大，我尝试发布一个线框，但stackoverflow还不允许我粘贴图像…您可以从uni id中删除margin:0 auto，margin:0 auto是一种将块元素居中的简单方法。那会把它移回左边。至于按钮，您可能需要考虑在按钮标签上使用输入标签，然后可以用CSS高度和宽度属性来相应地调整输入元素的样式。这可能也有帮助。非常感谢，因为你，这个标志现在已经被处理好了。然而，这两个确实需要是某种按钮或选项卡，用户可以点击它们并导航到另一个页面，而不是在用户输入信息的地方输入…非常感谢您的帮助，我是否可以使用其他选项？明白了。。。带有锚定标签的按钮应该可以工作，或者您可以制作带有锚定标签的内联ul导航。您可以添加id或类，并在这里获得相当的创意。

    #middlepic
    {
        display: block;
        margin-left: auto;
        margin-right: auto;

    }

    #uni
    {
        display: block;  
        padding-left:50px;
        max-height: 150px;
        max-width: 200px;
        width: 250px;
        height: 250px;
    }

    #buttons
    {

        top: 50%;
        left: 50%;
        margin-right: auto;
        margin-left: auto;
        width: 300px;
        height: 40px;
    }

    #footer
    {
    width: 100px;
    height:100px;
    }

#middlepic
{
    display: block;
    margin: 0 auto;
}

#uni
{
    margin: 0 auto;
    display: block;
    width: 250px;
    height: 200px;
}

#buttons
{
    margin: 0 auto;
    width: 300px;
    line-height: 40px;
}

#footer
{
width: 100%;
height:100px;
display: inline-block;
text-align: center;
}