我放弃了!!!!我尽力解决问题，但我不知道。我的问题是处理分辨率，宽度和不同的计算机。我设法按照我想要的方式在计算机上整理页面，但每次我在另一台计算机上检查它时都会感到沮丧。我不知道是否有人可以查看我的CSS代码和HTML代码并给我一些反馈;我真的很感激。当我尝试调整页面大小时，我的图像会移动并与文本和其他图像重叠。如果我在更大的屏幕上打开页面，页脚会向上移动。除非需要，否则我不希望滚动条出现。通常一个好的页面一切都将保持原样，如果你调整页面大小，滚动条会出现，让你看到你感兴趣的东西。我在页面底部（网页）放置了4个图像，在顶部放置了3个图像。 如果有人可以帮助解决这些问题，我将不胜感激。谢谢
这是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="web.css">
</head>
<body>
<div id="mastercontainer">
<div id="header"><font color="##FFFFFF" size="5">
<a href="http://stackoverflow.com/questions/18130543/html-header-footer-fluid-content-with-certain-specifications">
<font color="#33FF00">
<b> STACK </b>
</font>
</a>
The link "WEB-LINK" on this footer moves from it's spot when the page is opened in a different screen </font>
 
 
<a href="http://www.w3schools.com/html/default.asp">
<font color="#33FF00" size="5"> <b> WEB-LINK </b> </font></a>
</div>
<div id="content">
<div id="innercontentmiddle">
<div style="position:absolute;left: 35%; top: 3%; z-index:1;">
<img src="NC.jpg" width="650" height="250"
/title=" this picture moves as I resize the window">
<br>
</div>
<div style="position:absolute;left: 5%; top: 3%;">
<img src="mr.jpg" width="250" height="250"
/ title="This picture seems stable">
<br>
</div>
<div style="position:absolute;right: 5%; top: 3%;">
<img src="cv.jpg" width="250" height="250"
/ title="this keeps moving to the left as I make my
window smaller and smaller (resizing issue!)">
<br>
</div>
<h1>
<div>
<span style="color:#ff0000;">W</span>
<span style="color:#ff4000;">e</span>
<span style="color:#ff7f00;">l</span>
<span style="color:#ffff00;">c</span>
<span style="color:#80ff00;">o</span>
<span style="color:#00ff00;">m</span>
<span style="color:#00ffff;">e</span>
<span style="color:#0080ff;"> </span>
<span style="color:#0000ff;">t</span>
<span style="color:#4600ff;">o</span>
<span style="color:#8b00ff;"> </span>
<span style="color:#ff0000;">H</span>
<span style="color:#ff4000;">o</span>
<span style="color:#ff7f00;">w</span>
<span style="color:#ffff00;">T</span>
<span style="color:#80ff00;">o</span>
<span style="color:#00ff00;"> </span>
<span style="color:#00ffff;">.</span>
<span style="color:#0080ff;">.</span>
<span style="color:#0000ff;">.</span>
</div>
</h1>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<h2>
<b>Try resizing the page on your window to see the issues</b>
</h2>
<p
class="blocktext"
align ="justify">
<font size="5">I gave up!!!! I tried my best to fix the problem
but I have no clue. My problem is dealing with the resolution,
the width, and the different computers. I manage to organize
the page the way I wanted on my computer but every time I go
check it on another computer I get frustrated. I don't know if
someone could take a look at my CSS code and HTML code and give
me some feedback; I would, really, appreciate it. My images move
and overlap with the text and other images when I try resizing
the page. The footer moves up if I opened the page on a larger
screen. I don’t want the scroll bar to appear unless if it’s needed.
Normally a good page everything will stay where it supposed to
be and if you resize the page the scroll bar appears and allows
you to see what you are interested in. I placed 4 images on the
bottom of the page (web) and 3 on top.
I would appreciate it if someone could help with these issues. Thank you
</font></p>
<a href="ex1.htm">
<div style="position:absolute;left: 25%; top: 70%;z-index:1;">
<img
src="ex1.jpg"
width="100"
height="150"
border="0"
title="this moves up when I make the window smaller or using a different computer">
<br>
</div>
</a>
<a href="ex2.htm">
<div style="position:absolute;left: 40%; top: 70%;">
<img
src="ex2.jpeg"
width="100"
height="150"
border="0"
title="this moves up when I make the window smaller or using a different computer">
<br>
</div>
</a>
<a href="ex3.htm" >
<div style="position:absolute; left: 55%; top: 70%;">
<img
src="ex3.jpg"
width="100"
height="150"
border="0"
title="this moves up when I make the window smaller or using a different computer">
<br>
</div>
</a>
<a href="ex4.htm">
<div style="position:absolute;left: 70%; top: 70%;">
<img
src="ex4.jpg"
width="100"
height="150"
border="0"
title="this moves up when I make the window smaller or using a different computer">
<br>
</div>
</a>
</div>
</div>
<div id="footerclear"></div>
</div>
<div id="footer">
<font color="##FFFFFF" size="5">
When I open this page on a bigger screen, this footer (the bar) moves up
</font>
</div>
</body>
</html>
这是我的CSS代码：
html {
background-image:url('tb.jpg');
height: 100%;
min-height: 100%;
color: #000000;
margin: 0;
padding: 0;
overflow-x:hidden;
}
body {
background-image:url('tb.jpg');
height: 100%;
min-height: 100%;
color: #000000;
margin: 0;
padding: 0;
}
div#mastercontainer {
width: 100%;
height: 100%;
min-height: 100%;
margin-bottom: auto; <!--was: margin-bottom: -100px;-->
}
div#header {
background-color: #383838;
height: 30px;
}
div#footerclear {
}
div#footer {
background-color: #383838;
height: 60px;
}
h1
{
position:absolute;
left:22%;
top:13%;
}
h2 {
text-align:center
}
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 60em
}
img
{
border-radius:500px/450px;
}
a:link {
color:#6600FF
}
a {
text-decoration:none;
}