好的,我有一个以苹果为主题的导航栏,由于某种原因,它与以下<div>
之间存在一些时髦的间距,我需要一些帮助将其移除。
我认为它与CSS样式或一些重叠的CSS样式有关..
如果您想查看普通代码,请输入:
的index.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> </p>
<p> </p>
<p> </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> </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"> </h1>
<h1 class="headers">Welcome! </h1>
<p class="style1"> </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"> </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> </p>
<p> </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> </p>
<p><img src="images/layout/miscellaneous/creditcards.jpg" alt="Accepted Credit Cards" width="200" height="29"></p>
<p> </p>
<p><strong>Contact Us:</strong></p>
<p><a href="mailto:info@marioplanet.com"info@marioplanet.com">info@marioplanet.com</a></p>
<p> </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> </p>
<p> </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"> </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"> </p>
<p class="style7">© Copyright 2006-2010 MarioPlanet.com. All Rights Reserved</p>
<br />
</div>
</body>
</html>
default.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;
}
nav.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/
非常感谢任何帮助!
谢谢!
答案 0 :(得分:1)
带有id gn-support的li正在换行到下一行,你给它一个固定的高度,尽管它是空的。
答案 1 :(得分:0)
与#leftcol等顶部的所有段落标签有什么关系?即。
<div id="leftcol">
<p> </p>
<p> </p>
<p> </p>