html - 删除不需要的空间，使我的导航栏和 <div> 变得无聊

标签 html css

好的，我有一个 Apple 主题的导航栏，出于某种原因，它和下面的 <div> 之间有一些奇怪的间距。 s，我需要一些帮助来移除它。

我相信它与 CSS 样式或一些重叠的 CSS 样式有关..

如果你想看纯代码，这里是:

索引.htm:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Mario Toys at Mario Planet</title>
    <link rel="stylesheet" href="/css/LavaNav_default.css" />
    <link rel="stylesheet" href="/css/default.css" />
    <link rel="stylesheet" href="/css/SlideShow.css" media="screen" />
    <link rel="stylesheet" href="/css/nav.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/SlideShow.js"></script>
    <script type="text/javascript" src="/js/nav.js"></script>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17629991-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>

<div id="header">
    <p align="center"><img id="logo" src="/images/logo/logo.png" alt="logo"></p>
<script type="text/javascript">
    var searchSection = 'global';
    var searchCountry = 'us';
</script>
<div id="globalheader" class="apple">
    <!--googleoff: all-->
    <ul id="globalnav">
        <li id="gn-home"><a href="index.htm">Home</a></li>
        <li id="gn-catalog"><a href="catalog.asp">Shop!</a></li>

        <li id="gn-about"><a href="about.htm">About</a></li>
        <li id="gn-contact"><a href="contact.htm">Contact</a></li>
        <li id="gn-media"><a href="media.htm">Media</a></li>
        <li id="gn-ipad"><a></a></li>
        <li id="gn-itunes"><a></a></li>
        <li id="gn-support"><a></a></li>

    </ul>
    <!--googleon: all-->

</div>



    <!--/homefooter-->
    <!-- Start of DoubleClick Spotlight Tag: Please do not remove-->
    <!-- Creation Date:11/19/07 -->


    <!-- End of DoubleClick Spotlight Tag: Please do not remove-->

</div>

<div  id="content">

<div id="leftcol">
<p>&nbsp;</p> 
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="container">


<a id="twittericon" class="trayIcon"  href="#" target="_blank"><img src="/images/layout/icons/twittericon.png" alt="twitter" /></a>

<a id="facebookicon" class="trayIcon" href="http://www.facebook.com/home.php?#!/pages/Mario-Planet/111849438832254?ref=ts" target="_blank"><img src="/images/layout/icons/facebookicon.png" alt="facebook" /></a>

<a id="youtubeicon" class="trayIcon" href="#" target="_blank"><img src="/images/layout/icons/youtubeicon.png" alt="youtube" /></a>

<img src="/images/miscellaneous/tray.png" width="200" id="tray" style="z-index:10;">

</div>


<p>&nbsp;</p>
<p><img src="/images/layout/characters/babymario/BMarioSluggers.PNG" alt="Baby Mario" width="101" height="161"></p>
<p align="center"><img src="/images/layout/characters/mario/MarioNSMBWii.PNG" alt="Mario" width="169" height="260"></p>
</div> 

<div id="detail"> 
  <h1 class="headers">&nbsp;</h1> 
  <h1 class="headers">Welcome!  </h1>
  <p class="style1">&nbsp;</p> 
  <p class="style1">Here at Mario Planet, you will disover a wide variety of Super Mario Bros related toys and games! We here at Mario Planet strive to constantly serve <em>you</em> better, improving our user-interface, products, and customer service, each and every day. Please keep in mind that we are still in the middle of adding more products to our site, so if our supply seems to dissapoint, please bookmark our site, and return every so often, because products are being added all the time! So please sit back and relax, and enjoy some Super Mario Bros toys!</p>
  <p class="style1">&nbsp;</p>

  <div id="pageContainer">
  <h1 class="headers">Featured Products</h1>

  <!-- Slideshow HTML -->
  <div id="slideshow">

    <div id="slidesContainer">

      <div class="slide">
        <h2><a>Mario - Plush</a></h2>
        <p><a href="#"><img src="/images/catalog/original/mario_plush/mario_running_plush_1.jpg" alt="Mario - Plush" width="150" height="145" /></a>Check out our latest featured product, Mario (Running) - Plush.  This plush product shows keen resemblance to the Super Mario you all know and love, the star of all of <em>your</em> favorite video games!  It also takes the realism further, depicting Mario running!  One of his most used actions throughout the Mushroom Kingdom.  Order now, and start cuddling with this amazing plumber today!</p>
      </div>

      <div class="slide">
        <h2><a>Question Mark Block - Plush</a></h2>
        <p><a href="#"><img src="/images/catalog/original/mario_plush/question_mark_block_with_sound_plush_1.jpg" width="150" height="145" alt="Question Mark Block - Plush" /></a>The Question Mark Block is now available in a soft plush material, no longer metal from the video games!  Upon punching this product, you will hear the trademark 8-bit sound emit from the highly-advanced sensors within this plush toy.  Order now, and start hitting your Question Mark Block - Plush today!</p>
        <p> 
      </div>

      <div class="slide">
        <h2><a>Mario, Luigi and Star - Figure Set</a></h2>
        <p><a href="#"><img src="/images/catalog/original/mario_action_figures/mario_luigi_star_figure_set.jpg" width="180" height="145" alt="Mario, Luigi and Star - Figure Set" /></a>In this figure set, you will receive not just one, but <em>three</em>, figures all at an affordable price.  Instead of buying these figures separately, you may order this set, and receive Mario, Luigi and the Star figures!  Playing with all, is more fun than with one, so order now, and start reenacting your favorite Mushroom Kingdom adventures today!</p>
      </div>

      <div class="slide">
        <h2><a>Nintendo Monopoly</a></h2>
        <p><a href="#"><img src="/images/catalog/original/mario_board_games/nintendo_monopoly_1.jpg" width="250" height="145" alt="Nintendo Monopoly" /></a>Nintendo Monopoly replaces traditional and conventional Monopoly pieces with custom Nintendo themed ones, with many straight from the Mushroom Kingdom.  Properties become characters, token pieces become power-ups and items, making this Nintendo Monopoly a great and fun board game for any Nintendo lover, especially the Mario ones.  Order now, and you could be dealing Mario and Luigi today!</p>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->

</div>

</div> 

<div id="rightcol"> 

<p>&nbsp;</p> 
  <p>&nbsp;</p> 
    <!-- (c) 2005, 2010. Authorize.Net is a registered trademark of CyberSource Corporation --> <div align="center" id="eznetseal" class="AuthorizeNetSeal"> 
      <div align="center">
        <script type="text/javascript" language="javascript">var ANS_customer_id="5f13eae2-740f-4795-88e0-71ab3c4ceb66";</script> 
        <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> 
        <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Online Payments</a></div>
    </div> 

  <p>&nbsp;</p> 
  <p><img src="images/layout/miscellaneous/creditcards.jpg" alt="Accepted Credit Cards" width="200" height="29"></p> 
  <p>&nbsp;</p> 
  <p><strong>Contact Us:</strong></p> 
  <p><a href="mailto:info@marioplanet.com"info@marioplanet.com">info@marioplanet.com</a></p> 
  <p>&nbsp;</p> 
  <p><strong>Feedback:</strong></p> 
  <p>Questions, comments or concerns? <em>Please</em> let us know so we can serve you better!</p> 
  <p id="feedbacktextlink"><a href="mailto:feedback@marioplanet.com">feedback@marioplanet.com</a></p> 
  <p>&nbsp;</p> 
  <p>&nbsp;</p>
  <p align="center"><img src="images/layout/characters/goomba/goomba.PNG" alt="Goomba" width="105" height="126"></p>
  </div> 

</div>

<div id="footer"> 
  <p class="style7">&nbsp;</p> 
  <p class="style7"><a href="index.htm">Home Page</a> | <a href="catalog.htm">SHOP!</a> | <a href="about.htm">About</a> | <a href="contact.htm">Contact</a> | <a href="privacy_policy.htm">Privacy Policy</a></p>
  <p class="style7">&nbsp;</p>
  <p class="style7">&copy; Copyright 2006-2010 MarioPlanet.com. All Rights Reserved</p> 
  <br /> 
</div>  

</body>



</html>

默认.css:

body {
    background-color: #666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
#header {
    background-color: #DDDDDD;
    width: 1130px;
    margin: 0px auto;
}
#content {
    width: 1130px;
    margin: 0px auto;
}
#leftcol {
    background-color:#EBEBEB;
    width: 200px;
    height: 550px;
    font-size:14px;
    clear: both;
    float: left;
}
#detail {
    background-color:#FFFFFF;
    width: 730px;
    height: 550px;  
    font-size:12px;
    float: left;
}
#rightcol {
    background-color:#EBEBEB;
    width: 200px;
    height: 550px;
    font-size:14px;
    float: left;
}
#footer {
    background-color:#DDDDDD;
    width: 1130px;
    height:90px;
    font-size:12px;
    text-align:center;
    clear: both;
    margin: 0px auto;
}
h1 {
    color: #FF0000;
}
h2 {
    color:#FF0000;
}
a:link { 
    color:#FF0000;
}
a:visited { 
    color:#FF0000;
}
a:hover { 
    color:#00FF00;
}
a:active { 
    color:#FF0000;
}
img {
border:none;
}
#eznetseal {
text-align:center;
}
a.trayIcon {
position: relative;
top: 20px;
}
a.trayIcon:hover {
top: 7px;
}
#twittericon {
    left: 0px;  
}
#facebookicon {
    left: 22.5px;;
}
#youtubeicon {
    left: 45px;;
}
#tray {
position:relative;
}
#container {
    position:relative;
    margin-top: -40px;
}
#nav li 
{
 display: inline;
}
#features
{
    vertical-align: top;
}

导航.css:

/* GLOBALHEADER */
#globalheader { width: 771px; height: 37px; margin: auto; position: relative; z-index: 100; }
#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;}
#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 103px; height: 37px; text-indent:-1000em; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }
#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-home a { background-position: 0 0; }
#globalheader #globalnav li#gn-catalog a { background-position: -103px 0; }
#globalheader #globalnav li#gn-about a { background-position: -206px 0; }
#globalheader #globalnav li#gn-contact a { background-position: -309px 0; }
#globalheader #globalnav li#gn-media a { background-position: -412px 0; }
#globalheader #globalnav li#gn-ipad a { background-position: -515px 0; }
#globalheader #globalnav li#gn-itunes a { background-position: -618px 0; }
#globalheader #globalnav li#gn-support a { background-position: -721px 0; }

/* OVER STATES */
#globalheader #globalnav li#gn-home a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -38px; }
#globalheader #globalnav li#gn-about a:hover { background-position: -206px -38px; }
#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -38px; }
#globalheader #globalnav li#gn-media a:hover { background-position: -412px -38px; }
#globalheader #globalnav li#gn-ipad a:hover { background-position: -515px -38px; }
#globalheader #globalnav li#gn-itunes a:hover { background-position: -618px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -721px -38px; }

/* PRESSED STATES */
#globalheader #globalnav li#gn-home a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; }
#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; }
#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; }
#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; }
#globalheader #globalnav li#gn-ipad a:active { background-position: -515px -76px; }
#globalheader #globalnav li#gn-itunes a:active { background-position: -618px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -721px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-home a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-catalog a { background-position: -103px -114px !important; }
#globalheader.mac #globalnav li#gn-about a { background-position: -206px -114px !important; }
#globalheader.ipod #globalnav li#gn-contact a { background-position: -309px -114px !important; }
#globalheader.iphone #globalnav li#gn-media a { background-position: -412px -114px !important; }
#globalheader.ipad #globalnav li#gn-ipad a { background-position: -515px -114px !important; }
#globalheader.itunes #globalnav li#gn-itunes a { background-position: -618px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -721px -114px !important; }

a:active { 

}

我的网站是:http://www.marioplanet.com/

非常感谢任何帮助!

谢谢!

最佳答案

id 为 gn-support 的 li 换行到下一行，你给它一个固定的高度，尽管它是空的。

关于html - 删除不需要的空间，使我的导航栏和 <div> 变得无聊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3490763/

上一篇：javascript - jCarousel + jQuery Accordion + fadeIn

下一篇：html - Apple 主题的导航菜单栏 CSS 问题

相关文章：

html - 带图像的 CSS 固定侧菜单，换行

html - Wordpress 列数排序

javascript - 如何设置当前加载失败的默认图片Url

javascript - 仅当您在特定 div 的 View 上滚动时才激活 CSS 动画

html - 不使用 display flex 的水平响应 div

html - 隐藏一个 gridview 应该自动调整相邻 gridview 的大小

html - Bootstrap 向左浮动和向右浮动

javascript - JavaScript 中的除法编码

html - 为什么零边距按钮之间要添加 2px 空间？

css - jQueryUI 自动完成 CSS 建议列表宽度

©2024 IT工具网  联系我们