Question

这是我在CSS，HTML和PHP编程的第一周...我在开始我的网站时意识到，当我按窗口大小缩放我的网站时，所有文本都会重叠，导致问题并且看起来很糟糕。 / p>

我想知道我是否可以得到一个明确的答案我正在做的可怕的错误。我已经尝试了媒体查询等方法，但我仍然根本不理解它。

这是我的HTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

  <head>
  <link rel="stylesheet" type="text/css" href="style/style.css" />

  <title>replay.sc</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">


a:link { color: grey; }
a:visited { color: grey; }
a:hover { color: white; }
a:active { color: grey; }
text-decoration: none;

} }

</style>


  </head>

  <body font="sans-serif"  id="container">


    <!--- BEGIN: STICKY HEADER -->
    <div id="header_container">
        <div id="header">
            <p><a  id="headertext"  a href="replay.sc"> replay.sc </a><p>
        </div>
    </div>
    <!-- END: STICKY HEADER -->

    <!-- BEGIN: Sticky Footer -->
    <div id="footer_container">
        <div id="footer">

        </div>
    </div>
    <!-- END: Sticky Footer -->
    <div id="home_container">
    <h1 id="hometext" > Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
        <p id="hometext2"> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>

    <h1 id="hometext3"> Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. </h1>
        <p id="hometext4"> Only basic information for each replay will be made to conserve server load. </p>
    </div>
  </body>

和我的CSS

/* Reset body padding and margins */
body { margin:0px; padding:0px; }

/* Make Header Sticky */
#header_container { background:black; border:1px solid #666; height:40px;left:0;position:fixed; width:100%; top:0; }
#header{ line-height:5px; margin:10px; auto:width:940px; text-align:left;}
#headertext { 
font-family: "sans-serif";
size: 20px;
padding: 2px;
font-size: 120%; 
text-decoration: none;
}

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container{ margin:auto; overflow:auto; padding:80px ; width:100%; height: auto; }
#content{
}

 /* CSS FOR HOME PAGE CONTENTS */

#hometext{
font-family: "arial";
padding: 1px;
font-size: 100%; 
text-decoration: none;
position: absolute;
top: 5em; 
left: 4em; 
color: #585858;
margin-right: 850px;
 }

#hometext2 {
font-family: "arial";
padding: 10px;
font-size:80%; 
text-decoration: none;
position: absolute;
top: 7em; 
left: 4.24em; 
color: #585858;
margin-right: 1200px; 
}

#hometext3 {
font-family: "arial";
padding: 1px;
font-size:100%; 
text-decoration: none;
position: absolute;
top: 5m; 
left: 65em; 
color: #585858;
margin-right: 0; 
}

#hometext4 {
font-family: "arial";
padding: 18px;
font-size:80%; 
text-decoration: none;
position: absolute;
top: 10m; 
left: 80em; 
color: #585858;
margin-right: 0; 
}

#home_container

在HTML和CSS中将网站内容扩展到分辨率和窗口大小

0 个答案: