文章/答案/技术大牛

发布

社区首页 >问答首页 >定位背景图像和Firefox

问定位背景图像和Firefox
EN

Stack Overflow用户

提问于 2010-09-25 06:54:21

回答 2查看 543关注 0票数 0

我一直在利用我的空闲时间从头开始编写一个个人网站的代码，并且得到了我想要的布局。但就我而言，我不明白为什么Firefox不对齐“下拉菜单项”(“关于”、“博客”等)。下面的背景图像到深灰色区域，就像在Safari中做的那样。

HTML页面(不包括下拉菜单javascript )：

<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>

这是CSS：

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}

抱歉，代码太乱了。如果有人能阐明这里可能存在的问题，那就太棒了。谢谢!

firefox

positioning

background-image

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-09-25 20:47:06

尽管您似乎对HTML和CSS了解很多，但还是有一些事情您必须纠正。其中，您必须添加一种文档类型。

当我开始学习HTML和CSS时，我发现HTML Dog的教程非常有用。尽管您显然不是初学者，但我建议您从http://htmldog.com/guides/htmlbeginner/开始学习文档类型和字符编码等知识。

同样，正如上面已经指出的，大量使用http://validator.w3.org来确保你的代码是有效的。它不是最简单的，但至少是我见过的最简单的HTML验证器。

票数 2

Stack Overflow用户

发布于 2010-09-25 21:54:35

我假设这就是你的网站：http://web.pdx.edu/~jstraus/

看起来你是对的，当你说你所有的超文本标记语言和CSS知识都是从几本旧书和W3School (请不要去那里学习超文本标记语言+ CSS )中学到的。这个网站本身就是一堆糟糕的做法和不要这样做的做法。

首先，请从一个好的和最新的来源学习HTML和CSS。Web Standards Curriculum是一个很好的起点-它非常强调创建有效的和符合标准的代码，还介绍了一些设计网站的基础知识。如果你需要参考资料，可以试试Sitepoint References。A List Apart也在我们的大多数必读书单上--试着从2001- 2005年的老文章开始。

事实是，我不得不在这里直截了当地说，你们网站的代码真的不属于这个时代。使用表格的布局，框架，重复的背景和非常糟糕的颜色和字体选择现在不会有什么用处。如果你想学习HTML和CSS，点击我上面提到的链接。如果你只是想要一个简单的方式来发布你的想法或其他，考虑安装一个内容管理系统/博客平台，如Wordpress。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3791587

复制

相似问题

问定位背景图像和Firefox
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问定位背景图像和FirefoxEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问定位背景图像和Firefox
EN