-1

Why does my homepage have a width of 1024 px. And every page after that has a width of 1280 px? Even as full screen this is how it loads up. How why?

Specs: Browser : Chrome Pages located on local machine. html very simple here is the css...

root { 
    display: block;
}
#leftcol a{text-decoration: none;}
#leftcol{   
    left: 10%;
    width: 200px;
    height: 100%;
    margin-top: 0px;
    position: absolute;
    opacity:0.6;
    color: white;
    font-size: 2em;
}
#left-placeholder{
    height: 100%;
    width: 10%;
    float: left;
}
#left-pusher{
    height: 100%;
    width: 200px;
    float: left;
}
.left-column-item{
    background: url('images/bgnav.jpg');
    height: 33.334%;
    background-size: 100%;
    opacity:0.6;
    color: white;
}
.left-column-item:hover{
    background: url('images/bgnav.jpg');
    height: 33.334%;
    background-size: 100%;
    opacity: 1;
}
#content{
    text-align: center;
    color: white;
    font-size: 5em;
    height: 100%;
    width: 70%;
    float:left;
}

body{
    background: url('images/background.jpg');
    background-size: 100%;
    margin: 0;
    min-height: 100%;
    width: 100%}
html, body
{
    height: 100%;
}

//html for homepage: 

<html>
    <head>
        <title></title>
        <LINK href="styles.css" rel="stylesheet" type="text/css">
        <script type ="text/javascript">

        </script>
    </head>
    <body>
            <div id ="leftcol">
                <a href="content/practice.html"><div class ="left-column-item">Practice!</div></a>
                <a href="content/AboutUs.html"><div class ="left-column-item">About Us!</div></a>
                <a href="content/contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
            </div>
        <div id="left-placeholder"></div>
        <div id ="left-pusher"></div>
        <div id ="content">Math Practice Site<br>Welcome</div>
    </body>
</html>

// the practice page that is not loading correctly

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <LINK href="../styles.css" rel="stylesheet" type="text/css">
        <script type ="text/javascript">

        </script>
    </head>
    <body>
            <div id ="leftcol">
                <a href="practice.html"><div class ="left-column-item">Practice!</div></a>
                <a href="aboutUs.html"><div class ="left-column-item">About Us!</div></a>
                <a href="contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
            </div>
        <div id="left-placeholder"></div>
        <div id ="left-pusher"></div>
        <div id ="content">Math Practice Site <br> hello</div>
    </body>
</html>
4

1 回答 1

2

如果您可以发布指向您网站的链接，那就太好了……看来您引用样式表的方式有所不同。尝试在其他页面中使用 index 调用：

 <LINK href="styles.css" rel="stylesheet" type="text/css">

代替

<LINK href="../styles.css" rel="stylesheet" type="text/css">

您可能正在调用一个完全不同的样式表。

您也可以尝试限制身体的宽度而不是使用 %

body{
background: url('images/background.jpg');
background-size: 100%;
margin: 0;
min-height: 100%;
width: 1024 px;}
于 2012-11-03T18:51:13.500 回答