Html 使元素位置固定，而宽度=100%保持有效_Html_Css_Web

Html 使元素位置固定，而宽度=100%保持有效

html css web

Html 使元素位置固定，而宽度=100%保持有效,html,css,web,Html,Css,Web,我目前在html和css方面有问题（仍在学习这两种语言）。我正在尝试制作一个标准布局，其中一个div中的图像固定在页面顶部，在它下面是一个水平导航栏、一个页脚，中间是一个新闻模块这就是它目前的样子：您已经可以看到问题（实际上是2）。我无法将列表放置在导航栏图像上，也无法使页脚图像与导航图像一样宽这是我的html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

我目前在html和css方面有问题（仍在学习这两种语言）。我正在尝试制作一个标准布局，其中一个div中的图像固定在页面顶部，在它下面是一个水平导航栏、一个页脚，中间是一个新闻模块

这就是它目前的样子：

您已经可以看到问题（实际上是2）。我无法将列表放置在导航栏图像上，也无法使页脚图像与导航图像一样宽

这是我的html：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel = "stylesheet" href = "/servis/Stilovi/standardstyle.css">
        <title>Granulo - RE d.o.o</title>
    </head>

    <body>
        <!-- Element koji cini header -->
        <div id = "headers">
            <img id="aparat_slika" src="/servis/Resursi/Slike/aparat_slika.png" alt="Slika nije ucitana">
            <img id="logo_slika" src="/servis/Resursi/Slike/granulo_logo.png" alt="Slika nije ucitana">
            <p id="naziv_firme">GRANULO - RE d.o.o</p>
            <p id="djelatnost_firme" class="djelatnost">Promet, inženjering i servis protivpožarnih uređaja<br>Bojnička 47, Sarajevo</p>
        </div>
        <!-- Element koji cini vertikalni meni -->
        <nav id = "navbar">
            <ul id="lista_meni">
                <li ><a class="djelatnost" href="#">Link 1</a></li>
                <li ><a class="djelatnost" href="#">Link 2</a></li>
                <li ><a class="djelatnost" href="#">Link 3</a></li>
                <li ><a class="djelatnost" href="#">Link 4</a></li>
                <li ><a class="djelatnost" href="#">Link 5</a></li>
            </ul>
            <img id="navbar_bg" src="/servis/Resursi/Slike/horizontal_stripe.png" alt="Slika nije ucitana">
        </nav>
        <!-- Element u kojem se nalaze novosti -->
        <div id = "news"></div>
        <!-- Element koji cini footer -->
        <div id = "footers">
            <img id="footer_image" src="/servis/Resursi/slike/horizontal_stripe.png" alt="Slika nije ucitana">
        </div>
    </body>


</html>

首先，我建议将您的代码包装在包装器中，而不是为您的实际主体留出空白，类似这样

<div class="container">
    <div id = "headers">...</div>
    <nav id = "navbar">...</div>
    <div id = "news">...</div>
    <div id = "footers">...</div>
</div>

第二，你的页脚是

位置：固定的所以它不会服从任何容器宽度，在这种情况下它不会服从右边距：10%的主体，您可以使用如下小技巧修复它：
#footers {
    position: fixed;
    bottom: 0;
    left: 50%; /* tells your footer to be horizontally centered */
    margin-left: -502px; /* This need to be half of the width (+2px because of the 1px added as a border for both left and right site in this case) */
    width: 1000px;
    border: solid 1px black;
}

最后，要使导航栏/链接位于标题图像上方，请添加一个位置：绝对到类.navbar

这里有一个。我没有像你说的那样把它和你的头像链接在一起，而是position:absolute
是一种方法，您只需使用它。

解决.navbar
因新位置而离开集装箱的问题：绝对
wrap.navbar
在一个新的div中，或者更好地将属于标题的所有内容包装在一个新的div类中，并将标签position:relative添加到这个新类中你所说的列表是什么意思？我没有看到任何清单。我看到的唯一问题是页脚超出了假定的大小div中id为navbar的无序列表。它不是在图像上。
body{
    background-color: white;
}
.container{
    width:1000px;
    margin: 0 auto;
}

#footers {
    position: fixed;
    bottom: 0;
    left: 50%; /* tells your footer to be horizontally centered */
    margin-left: -502px; /* This need to be half of the width (+2px because of the 1px added as a border for both left and right site in this case) */
    width: 1000px;
    border: solid 1px black;
}