Навигационная строка меню в стиле Apple, проблемы с CSS - PullRequest
Новая
       28

Навигационная строка меню в стиле Apple, проблемы с CSS

0 голосов
/ 16 августа 2010

Я пытаюсь скопировать строку навигационного меню Apple, которую они используют для основной навигации на своем веб-сайте apple.com, используя только HTML, CSS и одно изображение, и у меня есть некоторые проблемы.

Я могу 'Кажется, я не понимаю, почему моя навигационная строка меню не отображается!

Ссылка здесь: http://www.marioplanet.com

Если вы не хотите просматривать веб-сайт в прямом эфире, яздесь также приведен код.

Вот мой HTML: 

<!DOCTYPE html>

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Mario (Running) - Plush</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="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
    <link rel="stylesheet" href="/css/FancyBox.css" />
    <script type="text/javascript">

    $(window).load(function(){
        $('img.FancyBox').each(function(){
            $(this).width($(this).width() * 0.25);
            $(this).show();
        });
    });

    $(document).ready(function() {

    /* Apply fancybox to multiple items */

    $("a.FancyBox").fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn':  400, 
        'speedOut': 600, 
        'titlePosition': 'inside'
    });

});

    </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>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
</div> 

<div id="detail"> 
  <h1 class="headers">&nbsp;</h1> 
  <h1 class="headers">Mario (Running) - Plush</h1>
  <h3>Category:  Plush</h3>
  <h3>Price: $19.95</h3>

<table width="729" border="0">
  <tr>
      <td width="85" ><a class="FancyBox" rel="ProductImages" href="/images/catalog/mario_plush/mario(run)_plush1.jpg"><img class="FancyBox" src="/images/catalog/mario_plush/mario(run)_plush1.jpg" alt="Mario (Running) - Plush"></a></td>
    <td width="78"><a class="FancyBox" rel="ProductImages" href="/images/catalog/mario_plush/mario(run)_plush2.jpg"><img class="FancyBox" src="/images/catalog/mario_plush/mario(run)_plush2.jpg" alt="Mario (Running) - Plush"></a></td>
  <td width="552">


  </tr>
  <tr>
    <td colspan="3">   <h2>Features</h2>
    <p>&nbsp;</p> 
    <ul>
    <li>Authentic recreation of Super Mario while running.</li>
    <li>Meticulous detail to all of Super Mario.</li>
    <li>The famous outfit everyone knows and loves from Mario is here as well.</li>
    </ul>    </td>
  </tr>
  <tr>
    <td colspan="3"><h2>&nbsp;</h2>
      <h2>Description</h2>
      <p>&nbsp;</p>
      <p>This plush rendition of Super Mario showcases Mario doing one of his most used actions:  RUNNING!  Mario is always running over and under koopas, goombas and the other Bowser baddies.  Now you too can have Super Mario running with this plush toy!</p></td>
    </tr>
  <tr>
    <td colspan="3"><h2>&nbsp;</h2>
      <h2>Weight</h2>
      <p>&nbsp;</p>
      <p>.42 lb</p></td>
    </tr>
    <td colspan="3"><h2>&nbsp;</h2>
      <h2>Dimensions</h2>
      <p>&nbsp;</p>
      <p>8.75&quot; x .75&quot; x 13&quot;</p></td>
    </tr>
</table>

</div> 

<div id="rightcol"> 

<p>&nbsp;</p> 
  <p>&nbsp;</p> 
    <!-- (c) 2005, 2010. Authorize.Net is a registered trademark of CyberSource Corporation --> <div id="eznetseal" class="AuthorizeNetSeal"> <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> 

  <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 align="center" id="feedbacktextlink"><a href="mailto:feedback@marioplanet.com">feedback@marioplanet.com</a></p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</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>

Вот мой 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;
}

И, наконец, вот моя навигация.css: 

/* GLOBALHEADER */
#globalheader { width: 771px; height: 38px; margin: 18px 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: 0; 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; }

Любая помощь будет потрясающей!

Спасибо !!

1 Ответ

1 голос
/ 16 августа 2010

Вы можете исправить это, настроив объявление #globalheader #globalnav li a: 

#globalheader #globalnav li a { 
    float: left; 
    width: 103px; 

    /* Give the links height and knock their text out of view */
    height: 38px; 
    text-indent: -1000em; 

    overflow: hidden; 
    background-image:url(/images/globalnav/wanzart.png); 
    _background-image: url(/images/globalnav/wanzart.png); 
    background-repeat: no-repeat; 
}

Причина, по которой он сейчас не работает, заключается в том, что вы установили для ссылок высоту 0 и скрытое переполнение. То, что это делает, эффективно заставляет элемент исчезнуть.

Задавая высоту ссылок, вы разрешаете показывать фоновое изображение, а текстовый отступ гарантирует, что отображаемый браузером текст не мешает.

...