Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 我的页面没有延伸到整个页面_Html_Css - Fatal编程技术网

Html 我的页面没有延伸到整个页面

Html 我的页面没有延伸到整个页面,html,css,Html,Css,我有两个问题。第一个是,当我在html标记中写入内容时,我无法在运行页面时使用超链接。另一个也是主要的原因是,我的代码不会延伸到整个页面 以下是我为页面样式设计而编写的css body { background: #B2906F; font-family: arial; margin: 0; height: 100%; } .maincontainer{ width: 100%; margin: 0 auto; } .picture{

我有两个问题。第一个是,当我在html标记中写入内容时,我无法在运行页面时使用超链接。另一个也是主要的原因是,我的代码不会延伸到整个页面

以下是我为页面样式设计而编写的css

body {
    background: #B2906F;
    font-family: arial;
    margin: 0;
    height: 100%;
}

.maincontainer{
    width: 100%;
    margin: 0 auto;
}


.picture{
    display: inline;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: -1;
    background-size: 100%;
}

.button{
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    background-color: #05280c;
}
.button-primary:hover {
    background-color: #05370c;
}

h1  {
    display: inline;
    margin: 0;
    background-color: #2c421f;
    padding: 5px;
    position: absolute;
}

ul{
    margin: 0;
    display: inline;
    padding: 0px 0px 0px 250px;
}
ul li {
    display: inline-block;
    list-style-type: none;
    padding: 15px 10px;
    color: #050c0c;
    margin: 0;
    border-radius: 5px;
}

ul li a {
    color: black;
}

footer{
    clear: both;
}

nav {
    color: 
    height: 100%;
    margin: 0;
    background-color: #2c421f;
}
这是我为页面编写的html。任何帮助都会很棒。我被困在这里好几天了

<!DOCTYPE html>
<html>

<head>
    <title>NWWolfPack</title>
    <link href="main.css" rel="stylesheet" />
</head>

<body>
    <div class="maincontainer">
        <h1>NW Wolf Pack</h1>
        <div class="picture"><img src="camo.jpg" width="100%" height="150">
            <header>
                <nav>
                    <ul>
                        <li class="button"><strong>Home</strong></li>
                        <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li>
                        <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li>
                        <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <footer>2017 Dillan Hall</footer>
</body>

</html>

NWWolfPack
西北狼群
  • 主页
2017迪兰厅
遵循以下步骤:

正文{
背景:#B2906F;
字体系列:arial;
保证金:0;
身高:100%;
}
.主集装箱{
宽度:100%;
保证金:0自动;
}
.图片{
显示:内联;
保证金:0;
填充:0;
位置:固定;
左:0;
右:0;
z指数:-1;
背景大小:100%;
}
.按钮{
填充:10px 15px;
文字装饰:无;
边界半径:5px;
背景色:#05280c;
}
.主按钮:悬停{
背景色:#05370c;
}
h1{
显示:内联;
保证金:0;
背景色:#2c421f;
填充物:5px;
位置:绝对位置;
}
保险商实验室{
保证金:0;
显示:内联;
填充:0px 0px 0px 250px;
}
ulli{
显示:内联块;
列表样式类型:无;
填充:15px 10px;
颜色:#050c0c;
保证金:0;
边界半径:5px;
}
ullia{
颜色:黑色;
}
页脚{
明确:两者皆有;
}
导航{
颜色:高度:100%;
保证金:0;
背景色:#2c421f;
}

西北狼群
  • 主页

2017 Dillan Hall
正是css中.picture上的
位置:已修复
,导致了您的问题。另外,我刚刚注意到您的主容器没有结束div。

从类中删除
位置:已修复
图片

.picture{
    display: inline;
    margin: 0;
    padding: 0;

    z-index: -1;
    background-size: 100%;
}
而且你的超链接似乎在工作……这不是你的意思吗?

使用这个:

<!DOCTYPE html>
<html>

<head>
    <title>NWWolfPack</title>
    <link href="main.css" rel="stylesheet" />



</head>

<body>
    <div class="maincontainer">
        <h1>NW Wolf Pack</h1>
        <div class="picture"><img src="http://www.dvd-ppt-slideshow.com/images/ppt-background/background-5.jpg" width="100%" height="150">
            <header>
                <nav>
                    <ul>
                        <li class="button"><strong>Home</strong></li>
                        <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li>
                        <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li>
                        <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <footer>2017 Dillan Hall</footer>
</body>

</html>

NWWolfPack
西北狼群
  • 主页
2017迪兰厅
风格:

<style>
    button{
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    background-color: #05280c;
}
.button-primary:hover {
    background-color: #05370c;
}

h1  {
    display: inline;
    margin: 0;
    background-color: #2c421f;
    padding: 5px;
    position: absolute;
}

ul{
    margin: 0;
    display: inline;
    padding: 0px 0px 0px 250px;
}
ul li {
    display: inline-block;
    list-style-type: none;
    padding: 15px 10px;
    color: #050c0c;
    margin: 0;
    border-radius: 5px;
}

ul li a {
    color: black;
}

footer{
    clear: both;
}

nav {
    color: 
    height: 100%;
    margin: 0;
    background-color: #2c421f;
}
    </style>

钮扣{
填充:10px 15px;
文字装饰:无;
边界半径:5px;
背景色:#05280c;
}
.主按钮:悬停{
背景色:#05370c;
}
h1{
显示:内联;
保证金:0;
背景色:#2c421f;
填充物:5px;
位置:绝对位置;
}
保险商实验室{
保证金:0;
显示:内联;
填充:0px 0px 0px 250px;
}
ulli{
显示:内联块;
列表样式类型:无;
填充:15px 10px;
颜色:#050c0c;
保证金:0;
边界半径:5px;
}
ullia{
颜色:黑色;
}
页脚{
明确:两者皆有;
}
导航{
颜色:
身高:100%;
保证金:0;
背景色:#2c421f;
}

希望这对你有帮助。如果还有其他问题,请告诉我?

问题是什么…?:|对不起,我说得太过分了。我只想让我的css从左到右贯穿整个页面。目前它只进行了一半,检查代码中的begin和end div标记。我不认为你打算把头像导航放在图片分区里。