javascript - 文本堆叠在自身之上

标签 javascript html css

我在一个网站上工作,该网站有一个菜单,其中所有文本都堆叠在自己身上。我不知道是什么原因造成的。如果我从它正确显示的页面剪切并粘贴菜单代码,它似乎会修复它,直到我对该页面进行任何其他更改然后它恢复回来。任何帮助将不胜感激!

pic of text formatting issue

What menu should look like

JSFIDDLE

HTML:

@charset "UTF-8";

/* CSS Document */

body {
  background-color: #e8d7a5;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}

#menuBack {
  background-image: url(../_images/GreenBackground.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
  z-index: 20;
}

#headerBack {
  background-image: url(../_images/BlueBackground.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
}

#contentBack1 {
  background-image: url(../_images/TanBackground1.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
  z-index: 20;
}

#contentBack2 {
  background-image: url(../_images/TanBackground2.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
}

#contentBack3 {
  background-image: url(../_images/TanBackground3.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
}

#footerBack {
  background-image: url(../_images/GreenBackground.jpg);
  background-repeat: repeat;
  height: auto;
  float: left;
  width: 100%;
}

#menu {
  margin: 0 auto;
  height: 60px;
  width: 1024px;
  z-index: 20;
}

#header {
  margin: 0 auto;
  height: 390px;
  width: 1024px;
}

#MainMenu {
  background-image: url(../_images/Menu.png);
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 869px;
  height: 62px;
  position: relative;
  z-index: 20;
}

#MainMenu a {
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  font-weight: lighter;
  color: #FFF;
  width: 170px;
  margin-top: 5px;
  float: left;
  position: relative;
}

h4 {
  font-size: 1em;
  margin-top: -50px;
  margin-left: 60px;
  position: absolute;
  font-weight: lighter;
}

h5 {
  font-size: .7em;
  position: absolute;
  margin-top: -30px;
  margin-left: 60px;
  font-weight: lighter;
}

#MainMenu a:hover {
  text-decoration: none;
}

#PageTitle {
  margin-left: 0px;
  margin-top: 0px;
  z-index: 200;
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  text-shadow: -2px 2px 1px #41523C;
  font-size: 6em;
  line-height: 1em;
  color: #fff;
  float: left;
  position: absolute;
  margin-top: 25px;
  margin-left: 15px;
}

#PageTitle b {
  font-size: .7em;
  line-height: 1em;
  text-shadow: -1px 1px 1px #41523C;
}

#Rotator {
  position: absolute;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 10;
}

#Rotator img {
  box-shadow: 10px 0px 30px #495154;
  z-index: -2;
}

.shadow {
  box-shadow: -10px 0px 30px #495154;
}

#RotatorHome {
  position: absolute;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 10;
}

#RotatorHome img {
  box-shadow: none;
}

#content {
  margin: 0 auto;
  height: auto;
  width: 1024px;
  z-index: 20;
}

#footer {
  margin: 0 auto;
  height: auto;
  width: 1024px;
}

#footer p {
  color: #fff;
  font-size: .8em;
}

#footer a {
  color: #e8d7a5;
  font-size: 1em;
}

#footer img {
  width: auto;
  height: 60px;
  margin-right: 10px;
}

@font-face {
  font-family: 'BreeSerifRegular';
  src: url(../_fonts/bree-serif/breeserif-regular-webfont.eot);
  src: url(../_fonts/bree-serif/breeserif-regular-webfont.eot?#iefix) format('embedded-opentype'), url(../_fonts/bree-serif/breeserif-regular-webfont.woff) format('woff'), url(../_fonts/bree-serif/breeserif-regular-webfont.ttf) format('truetype'), url(../_fonts/bree-serif/breeserif-regular-webfont.svg#BreeSerifRegular) format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Cabin";
  src: url(../_fonts/cabin/Cabin-Regular.otf);
  /* IE */
  src: local("Cabin"), url(../_fonts/cabin/Cabin-Regular.otf) format("truetype");
  /* non-IE */
}

p {
  font-family: "Cabin", Helvetica, sans-serif;
  font-weight: lighter;
  line-height: 1.8em;
  color: #5e533e;
  margin-bottom: 30px;
}

a {
  color: #759033;
  text-decoration: none;
  border: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  color: #43711d;
  font-size: 2em;
  margin-top: 0;
  text-shadow: -1px 1px 1px #41523C;
}

h2 {
  font-family: "Cabin", Helvetica, sans-serif;
  color: #5e533e;
  font-size: 1.2em;
  line-height: .5em;
}

#faqs h2 {
  line-height: 1.2em;
}

h2 a,
h2 a:hover {
  color: #5e533e;
}


/*-- CONTENT DIVS --*/

#LeftContent {
  width: 472px;
  padding-right: 20px;
  float: left;
}

#RightContent {
  width: 472px;
  padding-left: 20px;
  float: left;
}

#LeftContent ul,
#RightContent ul {
  font-family: "Cabin", Helvetica, sans-serif;
  font-weight: lighter;
  line-height: 1.8em;
  color: #5e533e;
  text-decoration: none;
}

#QuickLinks {
  float: right;
  margin-right: 160px;
}

#QuickLinks ul {
  font-family: "Cabin", Helvetica, sans-serif;
  font-weight: lighter;
  font-size: .9em;
  line-height: 1.5em;
  color: #5e533e;
  text-decoration: none;
}

#QuickLinks2 {
  float: right;
  margin-right: 160px;
}

#KidsCampSession {
  width: 1024px;
  height: 270px;
  float: left;
  clear: both;
  margin-bottom: 40px;
}

#session {
  background-image: url(../_images/program_orange.png);
  background-repeat: none;
  height: 216px;
  width: 302px;
}

#sessionV {
  background-image: url(../_images/program_orange_vertical.png);
  background-repeat: none;
  height: 302px;
  width: 216px;
}

#sessionP {
  float: left;
  width: 272px;
  height: 40px;
  margin-left: 30px;
  margin-top: 15px;
}

#session h3 {
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  color: #e8d7a5;
  font-size: 1.7em;
  margin-top: 0;
  float: left;
  width: 100px;
  text-shadow: -1px 1px 1px #804e07;
}

#session p {
  float: right;
  width: 165px;
  height: 40px;
  color: #FFF;
  margin-top: 0px;
}

#LeftContent ul i,
#RightContent ul i,
#QuickLinks ul i {
  color: #759033;
  list-style: none;
}

#LeftContent li,
#RightContent li,
#QuickLinks li {
  list-style: none;
  margin-left: -30px;
}

#SocialMedia img {
  width: 40px;
  height: auto;
  margin-left: 2px;
}

#Fundraiser img {
  width: 40px;
  height: auto;
  margin-right: 2px;
}

#Fundraiser p {
  font-family: "Cabin", Helvetica, sans-serif;
  font-weight: lighter;
  line-height: 1.8em;
  color: #5e533e;
  text-decoration: none;
}

#LeftContent table {
  width: 100%;
  padding: 15px;
  border-spacing: 15px;
  color: #5e533e;
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
}

#LeftContent table th {
  font-family: 'BreeSerifRegular', Tahoma, Geneva, sans-serif;
  color: #43711d;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="icon" type="image/ico" href="../favicon.ico">

  <title>Killarney Lutheran Camp</title>

  <link href="../_CSS/_style.css" rel="stylesheet" type="text/css" />

  <script src="http://www.google.com/jsapi" type="text/javascript"></script>

  <script type="text/javascript">
    // BeginOAWidget_Shared_2241022
    google.load("mootools", "1.2.1");
    // EndOAWidget_Shared_2241022
  </script>

  <script src="../js/MenuMatic_0.68.3.js" type="text/javascript"></script>

  <!-- BELOW JAVASCRIPT IS FOR MID PAGE MENU -->
  <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i, x, a = document.MM_sr;
      for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
    }

    function MM_preloadImages() { //v3.0
      var d = document;
      if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length,
          a = MM_preloadImages.arguments;
        for (i = 0; i < a.length; i++)
          if (a[i].indexOf("#") != 0) {
            d.MM_p[j] = new Image;
            d.MM_p[j++].src = a[i];
          }
      }
    }

    function MM_findObj(n, d) { //v4.01
      var p, i, x;
      if (!d) d = document;
      if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
        d = parent.frames[n.substring(p + 1)].document;
        n = n.substring(0, p);
      }
      if (!(x = d[n]) && d.all) x = d.all[n];
      for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
      for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);
      if (!x && d.getElementById) x = d.getElementById(n);
      return x;
    }

    function MM_swapImage() { //v3.0
      var i, j = 0,
        x, a = MM_swapImage.arguments;
      document.MM_sr = new Array;
      for (i = 0; i < (a.length - 2); i += 3)
        if ((x = MM_findObj(a[i])) != null) {
          document.MM_sr[j++] = x;
          if (!x.oSrc) x.oSrc = x.src;
          x.src = a[i + 2];
        }
    }
  </script>

  <link href="../_CSS/MenuMatic.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    /* BeginOAWidget_Instance_2241022: #nav */
  </style>

  <!-- <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-30103314-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script> -->
</head>

<body onload="MM_preloadImages('../_images/MenuBottonH_Beliefs.png','../_images/MenuBottonH_History.png','../_images/MenuBottonH_Involved.png','../_images/KillarneyLogoGreenHover.png')">
  <div id="menuBack">
    <div id="menu">
      <a href="../index.html"><img id="Home" style="width: 60px; height: auto;" src="../_images/KillarneyLogoGreenNoText.png" alt="Home" width="200" name="Home" border="0" /></a>
      <div style="width: 1024px;">
        <ul id="nav" style="width: 550px; margin-left: 500px; position: absolute;">
          <li><a href="../summercamp/index.html">Summer Camp</a>
            <ul>
              <li><a href="../summercamp/theme/index.html">Theme</a></li>
              <li><a href="../summercamp/index.html">Programs</a>
                <ul>
                  <li><a href="../summercamp/index.html">Programs</a></li>
                  <li><a href="../summercamp/mission/index.html">Mission</a></li>
                  <li><a href="../summercamp/director/index.html">Director Chat</a></li>
                  <li><a href="../summercamp/faqs/index.html">FAQ's</a></li>
                  <li><a href="../summercamp/wishlist/index.html">Wishlist</a></li>
                </ul>
              </li>
              <li><a href="../summercamp/register/index.html">Register</a></li>
              <li><a href="../summercamp/jobs/index.html">Jobs</a></li>
              <!-- <li><a href="http://www.killarneycamp.blogspot.com/" target="_blank">Killarney Blog</a></li> -->
            </ul>
          </li>
          <li><a href="../campground/index.html">Campground</a>
            <ul>
              <li><a href="../campground/index.html">About</a></li>
              <li><a href="../campground/fees/index.html">Camping Fees</a></li>
              <li><a href="../campground/boosters/index.html">Boosters &amp; Membership</a></li>
            </ul>
          </li>
          <li><a href="../programs/index.html">Programs</a>
            <ul>
              <li><a href="../programs/index.html">School Field Trips</a></li>
              <li><a href="../programs/groups/index.html">Groups &amp; Rentals</a></li>
              <li><a href="../programs/fees/index.html">Program Fees</a></li>
            </ul>
          </li>
          <li><a href="../events/index.html">Special Events</a>
            <ul>
              <li><a href="../events/index.html">Calendar</a></li>
              <li><a href="../events/index.html#Events">Annual Events</a>
                <ul>
                  <li><a href="../events/funrun">Fun Run</a></li>
                  <li><a href="../events/index.html#SpringWorkBee">Spring Work Bee</a></li>
                  <li><a href="../events/index.html#MemorialDayBBQ">Memorial Day Chicken BBQ</a></li>
                  <li><a href="../events/index.html#OpenHouse">Summer Camp Open House</a></li>
                  <li><a href="../summercamp/index.html#SummerCamp">Summer Camp</a></li>
                  <li><a href="../events/index.html#PigRoast">Pig Roast</a></li>
                  <li><a href="../events/index.html#PioneerCampOut">Pioneer Archery Camp-Out</a></li>
                  <li><a href="../events/index.html#FallFest">Fall Fest</a></li>
                  <li><a href="../events/index.html#FallWorkBee">Fall Work-Bee</a></li>
                  <li><a href="../events/index.html#AnnualBoardMeeting">Board Meeting of LCA</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- BELOW JAVASCRIPT IS FOR TOP HORIZONTAL MENU -->
      <script type="text/javascript">
        // <![CDATA[
        // BeginOAWidget_Instance_2241022: #nav


        window.addEvent('domready', function() {
          var myMenu = new MenuMatic({
            id: "nav",
            effect: "slide & fade",
            duration: "600",
            hideDelay: "1000",
            matchWidthMode: "false",
            orientation: "horizontal",
            direction: {
              x: 'right',
              y: 'down'
            },
            opacity: 95
          });
        });

        // EndOAWidget_Instance_2241022
        // ]]>
      </script>
    </div>
  </div>
  <div id="headerBack">
    <div id="header">
      <div id="PageTitle">Camp<br />Killarney</div>
      <div id="Rotator" class="shadow"><img src="_images/KillarneyCross.png" alt="Killarney_Cross" /></div>
    </div>
  </div>
  <div id="contentBack1">
    <div id="MainMenu">
      <a style="margin-left: 10px;" href="../../beliefs/index.html"><img id="Beliefs" src="../../_images/MenuButton_Beliefs.png" alt="Beliefs" width="54" height="53" name="Beliefs" border="0" /></a>
      <h4>our beliefs</h4>
      <h5>the firm foundation for our camp</h5>
      <a href="../../history/index.html"><img id="History" src="../../_images/MenuButton_History.png" alt="History" width="54" height="53" name="History" border="0" /></a>
      <h4>history</h4>
      <h5>explore where we came from</h5>
      <a href="../../involve/index.html"><img id="Involved" src="../../_images/MenuButton_Involved.png" alt="Get Involved" width="54" height="53" name="Involved" border="0" /></a>
      <h4>get involved</h4>
      <h5>volunteer at camp</h5>
      <a href="../../congregations/index.html"><img id="Churches" src="../../_images/MenuButton_Churches.png" alt="Member Congregations" width="54" height="53" name="Congregations" border="0" /></a>
      <h4>lutheran</h4>
      <h5>campsite association</h5>
      <a href="../../contact/index.html"><img id="Contact" src="../../_images/MenuButton_Contact.png" alt="Contact &amp; Map" width="54" height="53" name="Contact" border="0" /></a>
      <h4>contact</h4>
      <h5>&amp; see directions</h5>
    </div>
    <div id="content">
      <div id="QuickLinks">
        <div id="SocialMedia" style="margin-top: 0px;">
          <a href="http://facebook.com/KillarneyLutheranCamp" target="_blank"><img src="../_images/SocialMedia/facebook2.png" alt="" /></a>
          <a href="http://www.goodsearch.com/nonprofit/camp-killarney-lutheran-campsite-association.aspx" target="_blank"><img src="../_images/SocialMedia/GoodSearch2.png" alt="" /></a>
        </div>
      </div>
      <p>&nbsp;</p>
      <div id="LeftContent">
        <h1 style="text-align: center;">&nbsp;</h1>
        <h1>SUMMER CAMP 2018</h1>
        <h2><a href="summercamp/index.html">2018 Summer Camp Dates Coming Soon!</a></h2>
      </div>
      <div id="RightContent"><br />
        <h2><a href="summercamp/index.html">Our Program</a></h2>
        <p>Camp Killarney offers a variety of exciting resident summer camp programs for youth ages PK-12th grade. All programs are carefully designed to meet the needs of your camper and our mission. We are licensed by the State of Michigan and our Camp
          Director is certified by the American Camp Association (ACA).</p>
        <p>We offer your camper both traditional and choice activities. Daily programs offer a safe awesome outdoor experience with plenty of room to explore. Campers also enjoy our bunkhouse style cabins, dining hall, craft &amp; nature cabin, sand volleyball
          court, activity pavillion, outdoor chapel, health center, shower house, archery range, beach/swim area, hiking trails, field sports area, superb staff, and more! Seasons of campers have enjoyed &ldquo;Killarney Green Thing&rdquo;, &ldquo;Big
          Foot&rdquo;, &ldquo;Mt. Sinai&rdquo;, &ldquo;Bubba&rdquo;, &ldquo;Kidron Valley&rdquo;, &ldquo;The Blue Heron&rdquo;, &ldquo;The Campfire&rdquo;, and more..!</p>
        <p>Learn more... <a style="margin-left: 30px;" href="summercamp/mission/index.html">our mission</a> <a style="margin-left: 30px;" href="summercamp/director/index.html">chat with the director</a></p>
      </div>
      <p>
        <!-- TemplateEndEditable -->
      </p>
    </div>
    <div id="contentBack2">
      <div id="content">
        <p>
          <!-- TemplateBeginEditable name="Content2" -->
        </p>
        <h1>CAMPGROUND</h1>
        <div id="LeftContent">
          <h2><a href="campground/index.html">About the Camp</a></h2>
          <p>Killarney Lutheran Camp is located on the shores of Killarney Lake, and is operated by an association of WELS congregations in support of our Children's Summer Camps. We invite you to come and enjoy God's great outdoors in a family-friendly
            Christian atmosphere in the beautiful Irish Hills. To learn more, go <a href="campground/index.html">here...</a></p>
          <br />
          <h2><a href="campground/index.html">2017 Dates</a></h2>
          <p>The Campground is open from <em style="color: #759033;">May 1st to the last weekend in October</em>.<br />Off season camping may be available by reservation only.</p>
          <p>
            <a style="color: #ca7e11;" href="campground/fees/index.html"><img style="margin-bottom: -5px;" src="_images/arrow.png" alt="arrow" /><strong>Camping rates</strong></a>.</p>
        </div>
        <div id="RightContent">
          <a href="campground/boosters/index.html"><img src="_images/boosters.png" alt="boosters" /></a> <br /><br />
          <h2><a href="campground/boosters/index.html">Boosters</a></h2>
          <p>Save money and support our camp programs by becoming a Booster Member. Annual Booster Memberships are available to offset camping and day use fees.</p>
        </div>
        <p>
          <!-- TemplateEndEditable -->
        </p>
      </div>
    </div>
    <div id="contentBack3">
      <div id="content">
        <!-- TemplateBeginEditable name="Content3" -->
        <h1>Programs</h1>
        <div id="LeftContent">
          <h2><a href="programs/index.html">School Programs</a></h2>
          <p>Learn more about Killarney&rsquo;s field trip opportunities for schools. Get the details <a href="programs/index.html">here...</a></p>
          <br />
          <h2><a href="programs/index.html">Groups &amp; Rentals</a></h2>
          <p>Groups can rent out parts of the camp.<br /> <a href="programs/groups/index.html">Click here for plans</a></p>
          <p>
            <a href="programs/fees/index.html"><img style="margin-bottom: -5px;" src="_images/arrow.png" alt="arrow" /> <strong>Program fees</strong></a>
          </p>
        </div>
        <div id="RightContent">
          <a href="campground/2017_Main_Brochure_REVISED.pdf" target="_blank"><img src="_images/brochure.png" alt="brochure" /></a> <br /><br />
          <h2><a href="summercamp/register/2014MainBrochure.doc" target="_blank">Download Promotional Items</a></h2>
          <p>Promote Camp Killarney at your congregation, school, or business today! Download the <a href="summercamp/register/Summer_Camp_2017.pdf" target="_blank">Summer Camp brochure</a>, the <a href="programs/OutdoorEdBrochureKLC.pdf" target="_blank">programs brochure</a>,
            or the <a href="campground/2017_Main_Brochure_REVISED.pdf" target="_blank">campground brochure</a>.</p>
        </div>
        <!-- TemplateEndEditable -->
      </div>
    </div>
    <div id="footerBack">
      <div id="footer">
        <div id="LeftContent">
          <p>Camp Killarney is affiliated with the <a href="http://www.wels.net" target="_blank">WELS</a> and <a href="http://www.evangelicallutheransynod.org" target="_blank">ELS</a>
            <a href="http://www.wels.net" target="_blank"><img src="../_images/WELS.png" alt="" /></a>
            <a href="http://www.evangelicallutheransynod.org" target="_blank"><img src="../_images/ELS.png" alt="" /></a> <br /><br /></p>
          <div id="copyright" style="margin-top: -18px;">
            <p>Copyright � 2012 Killarney Lutheran Camp | Site design by <a href="http://www.jeffhendrix.com" target="_blank">Jeffrey Hendrix</a></p>
          </div>
        </div>
        <div id="RightContent">
          <p>Check out some other <a href="http://www.camplor-ray.org" target="_blank">Lutheran Camps</a>
            <a href="http://www.camplor-ray.org" target="_blank"><img src="../_images/Lor-Ray.png" alt="" /></a>
            <a href="http://www.killarneycamp.org"><img src="../_images/KillarneySmall.png" alt="" /></a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

最佳答案

问题出在您的 CSS 中。 position: absolute 为您的 h4h5 元素设置,但您没有任何 toprightbottomleft 属性集。这使他们都在同一个地方。你的上边距和左边距也移动了一点,但仍然都在同一个地方。

我猜想您实际上想将它们的位置设置为relative(相对于它们的容器)并从那里进行调整,但这取决于您希望菜单的外观。

关于javascript - 文本堆叠在自身之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48256839/

相关文章:

html - 如何限制用户在 react 类组件的文本输入字段中输入数字或特殊字符

javascript - 是否可以使用 html2canvas 截取 URL?

javascript - 访问动态创建的跨域 iFrame 内的元素?

html - 垂直居中 li 中的图像并更改其高度

css - 居中 CSS/HTML 主 div

html - 使用 CSS 技巧剪切边框

JavaScript :focus For Each Input

javascript - 当递归函数在 javascript 中可数时,最大调用堆栈大小超出 RangeError

javascript - 将 redux 客户端从 REST 转换为 GraphQL Apollo?

javascript - Android Phonegap 数据库问题