Html 定位背景图像和Firefox
在空闲时间，我一直在白手起家地编写一个个人网站的代码，并且得到了大部分我想要的布局。但就我个人而言，我无法理解为什么Firefox没有像Safari那样将背景图像下方的“下拉菜单项”（“about”、“blog”等）对齐到深灰色区域 HTML页面（不包括下拉菜单javascript）：Html 定位背景图像和Firefox,html,css,firefox,positioning,background-image,Html,Css,Firefox,Positioning,Background Image,在空闲时间，我一直在白手起家地编写一个个人网站的代码，并且得到了大部分我想要的布局。但就我个人而言，我无法理解为什么Firefox没有像Safari那样将背景图像下方的“下拉菜单项”（“about”、“blog”等）对齐到深灰色区域 HTML页面（不包括下拉菜单javascript）： 对不起，代码太乱了。但是，如果有人能解释这里可能存在的问题，那就太棒了。谢谢 尽管您似乎对HTML和CSS非常了解，但仍有一些事情需要纠正。其中，您必须添加文档类型 当我开始学习HTML和CSS时，我发现HTM
对不起，代码太乱了。但是，如果有人能解释这里可能存在的问题，那就太棒了。谢谢 尽管您似乎对HTML和CSS非常了解，但仍有一些事情需要纠正。其中，您必须添加文档类型 当我开始学习HTML和CSS时，我发现HTMLDog上的教程非常有用。尽管您显然不是初学者，但我建议您首先学习文档类型和字符编码
此外，正如上面已经指出的，请使用大量代码来确保代码有效。它不是傻瓜式的，但至少是我见过的最傻瓜式的HTML验证器。尽管你似乎对HTML和CSS了解很多，但有些事情你必须纠正。其中，您必须添加文档类型 当我开始学习HTML和CSS时，我发现HTMLDog上的教程非常有用。尽管您显然不是初学者，但我建议您首先学习文档类型和字符编码
此外，正如上面已经指出的，请使用大量代码来确保代码有效。它不是傻瓜式的，但至少是我见过的最傻瓜式的HTML验证程序。我假设这是您的站点： 当你说你从几本旧书和W3School（请不要去那里学习HTML+CSS。该网站本身就是一个坏习惯和禁忌的集合）中获得了HTML和CSS的所有知识时，你似乎是对的 首先，请从一个好的和最新的来源学习HTML和CSS。这是一个很好的起点-它非常重视创建有效且符合标准的代码，并介绍了一些设计网站的基础知识。如果你需要推荐人，试试看。也在我们的大多数必读书目上——试着从2001-2005年的老文章开始
事实是，我必须坦率地说，你们网站的代码真的不属于这个时代。使用表格进行布局、框架、重复的背景以及糟糕的颜色和字体选择现在无法解决问题。如果你想学习HTML和CSS，点击我上面提到的链接。如果你只是想简单地发表你的想法或其他方式，考虑安装一个CMS /博客平台，而不是。p> 我假设这是您的站点： 当你说你从几本旧书和W3School（请不要去那里学习HTML+CSS。该网站本身就是一个坏习惯和禁忌的集合）中获得了HTML和CSS的所有知识时，你似乎是对的 首先，请从一个好的和最新的来源学习HTML和CSS。这是一个很好的起点-它非常重视创建有效且符合标准的代码，并介绍了一些设计网站的基础知识。如果你需要推荐人，试试看。也在我们的大多数必读书目上——试着从2001-2005年的老文章开始
事实是，我必须坦率地说，你们网站的代码真的不属于这个时代。使用表格进行布局、框架、重复的背景以及糟糕的颜色和字体选择现在无法解决问题。如果你想学习HTML和CSS，点击我上面提到的链接。如果你只是想简单地发表你的想法或其他方式，考虑安装一个CMS /博客平台，而不是。p> 如果你能把你的代码放到网上，这样我们就可以调试它了，我真的会帮你。标准模式的DOCTYPE对于限制浏览器的差异也很重要。请不要归属：web.pdx.edu/~jstraus/（注意下拉项在背景图片上而不是下面：p）谢谢！你似乎有很多问题需要解决。您没有真正正确地使用标题标记，它们用于文本和文本流项目，而不是代码块容器。您还使用绝对定位，而不定义父容器定位。在这种情况下，看起来你真的不需要绝对定位。查看w3schools.com，了解更多最新的HTML和CSS教程。你也应该通过一个验证器来运行你的页面，这样可以帮助你发现问题。您可以在不使用框架的情况下完成相同的任务。我还注意到，您正在使用百分比设置标题中图像的高度和宽度，随着浏览器窗口大小的更改，您的纵横比将消失。尝试调整你的浏览器大小，你会明白我的意思。如果你能把代码放到网上，我们就可以调试它，我真的会很有帮助……标准模式的DOCTYPE对于限制浏览器的差异也很重要。请不要归属：web.pdx.edu/~jstraus/（注意下拉项在背景图片上，而不是它下面：P）谢谢！你似乎有很多问题需要解决。您没有真正正确地使用标题标记，它们用于文本和文本流项目，而不是代码块容器。您还使用绝对定位，而不定义父容器定位。在这种情况下，看起来你真的不需要绝对定位。查看w3schools.com，了解更多最新的HTML和CSS教程。你也应该通过一个验证器来运行你的页面，这样可以帮助你发现问题。您可以在不使用框架的情况下完成相同的任务。我还注意到您正在hea中设置图像的高度和宽度
<html lang="en">
<head>
<title>The Hominis Inquiry</title>
<link href="hominquiry.css" rel="stylesheet" type="text/css">
<script language="javascript" src="hominquiry.js" type="text/javascript"></script>
</head>
<!--<script type="text/javascript">
/*
function toggleSound()
{if (button.checked)
{sound=true}
else
{sound=false}}
*/
</script> -->
<body onload="folded()">
<h1>
<div class="title">
<img src="leftbmk.jpg" height="30%" width="15%" align="left" />
<img src="rightbmk.jpg" height="30%" width="15%" align="right" />
<a href="index.htm" target="_top" onmmouseover="hominis_define()" title="Return to Homepage">
<span class="title">The Hominis Inquiry</span><br/>
A Perpetually Inchoate Exegesis about Ourselves
</a>
</div>
</h1>
<h2>
<div class="about" id="about" onmouseover="unfold('about')" onmouseout="fold('about')">
<a href="about.htm" >
About
</a>
<ul>
<li><a href="about.htm#site" class="underline">The Site</a></li>
<li><a href="about.htm#" class="underline">More Schpiel</a></li>
<li><a href="about.htm#issues" class="underline">Preamble on Social Issues</a></li>
<li><a href="about.htm#author" class="underline">The Author</a></li>
<li><a href="about.htm#source">Open Source Projects</a></li>
</ul>
</div>
<div class="blog" id="blog" onmouseover="unfold('blog')" onmouseout="fold('blog')">
<a href="blog.htm">
Blog
</a>
<ul>
<li><a href="blog.htm#recent" class="underline">Current</a></li>
<li><a href="blog.htm" class="underline">Search by Date</a></li>
<li><a href="blog.htm" class="underline">Search by Topic</a></li>
<li><a href="blog.htm" class="underline">Search by Blogger</a></li>
<li><a href="blog.htm">All Blogs</a></li>
</ul>
</div>
<div class="research" id="research" onmouseover="unfold('research')" onmouseout="fold('research')">
<a href="lab.htm">
Academic Research/ <br/> Papers
</a>
<ul>
<li><a href="research.htm#recent" class="underline">Epistemology</a></li>
<li><a href="research.htm#" class="underline">Research</a></li>
<li><a href="research.htm#" class="underline">Essays</a></li>
<li><a href="research.htm#" class="underline">Computer Simulation</a></li>
<li><a href="research.htm#">More Fun Stuff</a></li>
</ul>
</div>
<div class="hypercourse" id="hypercourse" onmouseover="unfold('hypercourse')" onmouseout="fold('hypercourse')">
<a href="hypercourse.htm">
Hyper-Courses <br/> On Demand
</a>
<ul>
<li><a href="hypercourse/physics.htm" class="underline">Physics (Algebra-Based)</a></li>
<li><a href="hypercourse/diffeq.htm#" class="underline">Differential Equations</a></li>
<li><a href="hypercourse.htm#" class="underline">Other University Studies</a></li>
<li><a href="hypercourse.htm#" class="underline">Discussions/Suggestions</a></li>
</ul>
</div>
<div class="links" id="links" onmouseover="unfold('links')" onmouseout="fold('links')">
<a href ="links.htm">
Other Arbitrarily <br/> Awesome Links
</a>
<ul>
<li><a href="links.htm">Me being Chopped Liver</a></li>
</ul>
</div>
<div class="contact" id="contact" onmouseover="unfold('contact')" onmouseout="fold('contact')">
<form id="startsearch">
<a href>
Contact
</a> <br/><br/><br/>
<input type="text" id="sbox" size="15" value="(under rennovation)">
<input type="button" id="sbutt" value="Find"
</form>
</div>
</h2>
<table border="2" cellpadding="3" cellspacing="3" align="center" valign="center">
<tr><image src="about.jpg"></tr> <tr><image src="blog.jpg"></tr></td>
<tr><image src="issues.jpg"></tr> <tr><image src="mybooks.jpg"></tr></td>
</table>
<div class="hiportal" id="hiportal">
<p>
Welcome to the HIportal
UPDATES<br/><br/>
<u>(4/1/10) - Site Launched</u>:<br/>
This is not an April Fools' joke... well maybe somewhat. Because of my lofty ambition to write this website from scratch,
the pages are currently, not the prettiest. Feedback from viewers will definitely be crucial throughout the development
of this page; though it may be better to hold on to the comments until I get the site up to more functional scale (forseeing
how radically things will change during that process). I think I really just wanted the gratification of getting a site up
to public view (wooOOOo!). Right now, the main features really are a draft of the 'about' page and a largely incomplete
chapter 2 of my physics e-book for high school students. Keep checking back for updates, of which there will be many these upcoming
few weeks...<br/>
Goals in sight: Keep this page alive, Upload fuller versions of ebook chapters 2-3
Long-term Technical: Implement a wiki engine to allow additions of news events by registered users
</p>
</div>
Trouble reading this site? Download the latest version of your preferred browser below...
</body>
</html>
body {background-color:#606060; color:white}
h1 {background-color:#606060; color:white; background-image:url(hicon_beta.jpg); font-size:100%; text-align:center; font-weight:700; text-decoration:none; font-family:Verdana}
h2 {color:#0000A0; background-color:#FFCCCC; font-size:200%; text-align:center; font-style:italic; font-weight:700; font-family: MS Gothic}
h3 {color:black; background-color:#DDDDDD}
div.title {position:absolute; left:0%; width:100%; text-align:center; background-image:url(hicon_beta.jpg); cursor:help}
span.title {color:maroon; font-size:300%; font-weight:900; font-family:papyrus; text-align:center}
div.about {position:absolute; top:31.2%; bottom:34%; left:5%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.blog {position:absolute; top:31.2%; bottom:34%; left:21%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.research {position:absolute; top:31.2%; bottom:34%; left:37%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.hypercourse {position:absolute; top:31.2%; bottom:34%; left:53%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.links {position:absolute; top:31.2%; bottom:34%; left:69%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.contact {position:absolute; top:31.2%; bottom:34%; left:85%; width:10%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.hiportal {position:absolute; top:35%; bottom:100%; left:10%; width:80%; background-color:silver}
p {background-color:silver; color:#220088; font-weight:500; text-align:left}
a:link {text-decoration:none; color:red}
a:visited {text-decoration:none; color:red}
a:hover {background-color:#FFFFDD; text-decoration:none}
dropdown.menu {background-color:#606060; color:#FFFFDD}