Question

我目前在使用html和css时遇到问题（仍在学习两者）。我试图制作一个标准布局，将图像固定在页面的顶部，在它下面有一个水平导航栏，一个页脚和一个新闻模块。

这就是它目前的样子：

http://pokit.org/get/?05aadb16da601f1aa68bc3321e891107.jpg

您已经可以看到问题（实际上是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>

我的css：

@import url(http://fonts.googleapis.com/css?family=Roboto:700);
body{
    margin-left: 10%;
    margin-right: 10%;
    background-color: white;
}

ul{
    list-style-type: none;
}

/* images */
#aparat_slika{
    float:right;
}

#logo_slika{
    float:left;
}

#navbar_bg{
    width: 100%;
    margin: 0;
    padding: 0;
}

#footer_image{
    width: 100%;
}

/* div style */
#headers{
    background-color: #e6e1e1;
    width: 100%;
    float: right;
    border: 1px solid black;
}

#naziv_firme{
    font-family: 'Roboto', bold;
    font-size: 30pt;
    float: top;
    margin-top: 10px;
}

#navbar{
    width: 100%;
    border: solid 1px black;
    float: right;
    padding: 0;
    text-align: center;
}

#navbar ul{
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navbar ul li{
    margin: 0;
    padding: 50px;
    display: inline;
}
#navbar  a:visited{
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
}

#navbar ul a:active{
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
}

#navbar ul a:hover{
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
    background-color: #227755;
}

#footers{
    position: fixed;
    bottom: 0;
    width: 100%;
    border: solid 1px black;
}

#news{
    border:solid 1px black;
}

/* Klasa za male natpise za firme */
.djelatnost{
    font-family: 'Roboto', italic;
    font-size: 10pt;
    float:top;
    margin-top: -40px;
    color: black;
}

.linkSize{
    height: 120px;
}

Answer 1

首先我建议将你的代码包装在一个包装内，而不是为你的实际身体提供保证金，就像这样

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

CSS

body{
    background-color: white;
}
.container{
    width:1000px;
    margin: 0 auto;
}

第二个你的页脚是position:fixed;所以它不会服从任何容器宽度，在这种情况下它不会服从身体的margin-right: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;
}

最后让你的导航栏/链接位于标题图片上方，为position: absolute;课程添加.navbar

这是 online example 。我没有像你说的那样用你的链接覆盖标题图片，但position: absolute;就是这样做的方法，你只需要玩弄它。
解决.navbar由于新div中的新position:absolute;换行.navbar而关闭容器的问题，或者甚至更好地将所有属于您的标题的内容包装在新的div中div类并将标记position: relative;

添加到此新类中

固定元素位置，宽度= 100％保持有效

1 个答案: