当前位置： 文江博客话题详情

CSS/HTML 导航栏问题

发布于 2024-10-20 14:00:39 字数 8353 浏览 2 评论 0原文

我正在为我的客户开发一个网站，我遇到的问题是，每当您调整窗口大小时，导航栏上的按钮都会挤在一起。我不清楚问题的原因，所以我来这里寻求帮助。当浏览器窗口最大化时，导航栏对我来说看起来不错，但对我的客户来说，她在页面中间看到了 Twitter 按钮。我认为这只是分辨率问题，因为她的屏幕比我的小，但有办法解决这个问题吗？

网站：
克鲁购物车

HTML <代码>

    <title>the crue cart</title>

    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="http://platform.twitter.com/anywhere.js?id=yQDKaggXesWYWPCPFNXn1Q&amp;v=1">
    </script>
    <script type="text/javascript">
        twttr.anywhere(function(twitter) {
            twitter.hovercards();
        });
    </script>



</head>
<body>

    <div id="container">

        <div id="header">
            <ul>
                <li><div id="logo">
                    <h1 class="thecruecart">the crue cart
                    <img src="images/leaf.png" width="15" height="15" class="leaf"></h1>
                    <h1 class="wholesnackerie">whole snackerie<h1>
                </div></li>
                <!--Who What When Where Why Help!-->
                <li class="navigation"><a href="home.html" class="navigation">Who<span class="green">?</span></a></li>
                <li class="navigation"><a href="thewhat.html" class="navigation">What<span class="green">?</span></a></li>
                <li class="navigation"><a href="thewhenwhere.html" class="navigation">When & Where<span class="green">?</span></a></li>
                <li class="navigation"><a href="thewhy.html" class="navigation">Why<span class="green">?</span></a></li>
                <li class="navigation"><a href="help.html" class="navigation">Help<span class="green">!</span></a></li>
                <li class="navigation"><a href="order.html" class="navigation">ORDER<span class="green">!</span></a></li>
                <li class="navigation"><div id="share">
                <iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com%2Fthecruecart&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
                <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.twitter.com/thecruecart" data-text="Check out The Crue Cart!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
                </div></li>
            </ul>
        </div>

        <div id="navbar"></div>

        <div id="title">
            <h2 class="title">Catering? Hungry?</h2>
        </div>

        <div id="body">
            <p>The Crue Cart is a mobile bakery that finds its home in Bellevue. We love animals and nutrition, and our cupcakes show that.<br/> No wheat, no animal products (or by-products) and no processed sugar. Also, our products will be organic and locally produced<br/> whenever possible. We love supporting local agriculture and economy.</p>
            <br/>
            <p>Want to chat? <span class="chunky">Email us: [email protected]</span></p>
        </div>

        <div class="clearfooter"></div>
    </div>

    <div id="footer">
        <p class="ft">&copy the crue cart 2010. All Rights Reserved.</p>
    </div>      
</body>

CSS
<代码>
@font-face { 字体系列：chunk Five； src: url("fonts/Chunk Five.otf") 格式("opentype"); }

    @font-face {
    font-family: aller;
    src: url("fonts/aller.ttf") format("truetype");
    }

    @font-face {
    font-family: tgheros;
    src: url("fonts/tgheros.otf") format("opentype");
    }

    @font-face {
    font-family: tgheros-bold;
    src: url("fonts/tgheros-bold.otf") format("opentype");
    }

    html {}

    body {
            width:auto;
            height:100%;

            background-color:#ffffff;
            margin:0px;
            margin-left:auto;
            margin-right:auto;
            padding:0px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family:chunkfive;
        color:#0000ff;
        margin:0px;
    }

    h1 {
        font-family:chunkfive;
        color:#0000ff;
        font-size:30px;
        margin:0px;
        padding:0px;
    }

    h1.thecruecart {
        font-family:chunkfive;
        color:#0000ff;
        font-size:30px;
        margin-left:auto;
    }

    h1.wholesnackerie {
        font-family:chunkfive;
        color:#44aa00;
        font-size:15px;
        margin-left:40px;
    }

    h2.title {
        font-size:35px;
        margin-top:10px;
        margin-left:10px;
    }

    h2 a{
        font-size:35px;
        color:#44aa00;
        margin-top:10px;
        margin-left:10px;
    }

    img {
        margin:0px;
    }

    img.leaf {
        position:relative;
        top:2px;
        left:-8px;
    }

    p {
        font-family:tgheros-bold;
        font-size:18px;
        color:#0000ff;
        margin:0px;
        margin-left:10px;
    }

    p.order{
        font-family:tgheros-bold;
        font-size:16px;
        color:#0000ff;
        margin:0px;
        margin-left:10px;
    }

    p.facebook {
        display:inline;
        font-family:tgheros-bold;
        font-size:18px;
        color:#0000ff;
        margin:0px;
        margin-left:5px;
    }

    p.ft {
        color:#0000ff;
        font-family:chunkfive;
        font-size:14px;
        letter-spacing:1px;

        margin:0px;
        padding:0px;
    }

    a {
        color:#44aa00;
        font-family:chunkfive;
        font-size:20px;
        letter-spacing:1px;
        text-decoration:none;
        margin:0px;
        padding:0px;
    }

    a:link, a:visited, a:hover, a:active {

    }

    a.navigation {
        color:#0000ff;
        font-family:chunkfive;
        font-size:20px;
        text-decoration:none;
    }

    ul {
        list-style-type:none;
        margin:0px;
        padding:0px;
    }

    li {
        float:left;
    }

    li.navigation{
        display:inline;
        position:relative;
        top:33px;
        float:left;
        margin-left:45px;
    }

    iframe {
        display:inline;
        margin-top:0px;
        margin-left:10px;
    }

    /*Facebook Stuffs*/

    /*Twitter Stuffs*/

    .chunky {
        color:#44aa00;
        font-family:chunkfive;
        font-size:20px;
        letter-spacing:1px;
        margin:0px;
        padding:0px;
    }

    .green {
        color:#44aa00;
    }

    .clearfooter {
        height:1px;
        clear:both;
    }

    #container {
        min-height:100%;
        margin-bottom: -20px;
        position: relative;
    }

    #header {
        display:block;
        width:auto;
        height:58px;
        padding-right:5px;
        padding-left:5px;
    }

    #logo {
        margin-top:0px;
        margin-left:10px;
    }

    #navbar {
        display:block;
        width:auto;
        height:2px;
        background-color:#0000ff;
    }

    #share {
        display:inline;
        margin:0px;
    }

    #body {
        width:1330px;
        margin:0px;
        margin-bottom:30px;
        padding:0px;
    }

    #footer {
        display:block;
        width:auto;
        height:10px;            
        position:realtive;          
        text-align:center;
        clear:both;
    }</code>
原文

I'm working on a site for a client of mine, the issue I am having is that whenever you resize the window the buttons on the navigation bar all squish together. The cause of the issue isn't apparent to me so I came here to ask for some help. Also the navi bar looks fine for me when the browser window is maximized, but for my client she sees the twitter button in the middle of the page. I think it's just a resolution issue as her screen is smaller than mine but is there a way to resolve this?

website:
the crue cart

HTML

    <title>the crue cart</title>

    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="http://platform.twitter.com/anywhere.js?id=yQDKaggXesWYWPCPFNXn1Q&v=1">
    </script>
    <script type="text/javascript">
        twttr.anywhere(function(twitter) {
            twitter.hovercards();
        });
    </script>



</head>
<body>

    <div id="container">

        <div id="header">
            <ul>
                <li><div id="logo">
                    <h1 class="thecruecart">the crue cart
                    <img src="images/leaf.png" width="15" height="15" class="leaf"></h1>
                    <h1 class="wholesnackerie">whole snackerie<h1>
                </div></li>
                <!--Who What When Where Why Help!-->
                <li class="navigation"><a href="home.html" class="navigation">Who<span class="green">?</span></a></li>
                <li class="navigation"><a href="thewhat.html" class="navigation">What<span class="green">?</span></a></li>
                <li class="navigation"><a href="thewhenwhere.html" class="navigation">When & Where<span class="green">?</span></a></li>
                <li class="navigation"><a href="thewhy.html" class="navigation">Why<span class="green">?</span></a></li>
                <li class="navigation"><a href="help.html" class="navigation">Help<span class="green">!</span></a></li>
                <li class="navigation"><a href="order.html" class="navigation">ORDER<span class="green">!</span></a></li>
                <li class="navigation"><div id="share">
                <iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com%2Fthecruecart&layout=button_count&show_faces=true&width=450&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
                <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.twitter.com/thecruecart" data-text="Check out The Crue Cart!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
                </div></li>
            </ul>
        </div>

        <div id="navbar"></div>

        <div id="title">
            <h2 class="title">Catering? Hungry?</h2>
        </div>

        <div id="body">
            <p>The Crue Cart is a mobile bakery that finds its home in Bellevue. We love animals and nutrition, and our cupcakes show that.<br/> No wheat, no animal products (or by-products) and no processed sugar. Also, our products will be organic and locally produced<br/> whenever possible. We love supporting local agriculture and economy.</p>
            <br/>
            <p>Want to chat? <span class="chunky">Email us: [email protected]</span></p>
        </div>

        <div class="clearfooter"></div>
    </div>

    <div id="footer">
        <p class="ft">© the crue cart 2010. All Rights Reserved.</p>
    </div>      
</body>

CSS

@font-face {
font-family: chunkfive;
src: url("fonts/Chunkfive.otf") format("opentype");
}

    @font-face {
    font-family: aller;
    src: url("fonts/aller.ttf") format("truetype");
    }

    @font-face {
    font-family: tgheros;
    src: url("fonts/tgheros.otf") format("opentype");
    }

    @font-face {
    font-family: tgheros-bold;
    src: url("fonts/tgheros-bold.otf") format("opentype");
    }

    html {}

    body {
            width:auto;
            height:100%;

            background-color:#ffffff;
            margin:0px;
            margin-left:auto;
            margin-right:auto;
            padding:0px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family:chunkfive;
        color:#0000ff;
        margin:0px;
    }

    h1 {
        font-family:chunkfive;
        color:#0000ff;
        font-size:30px;
        margin:0px;
        padding:0px;
    }

    h1.thecruecart {
        font-family:chunkfive;
        color:#0000ff;
        font-size:30px;
        margin-left:auto;
    }

    h1.wholesnackerie {
        font-family:chunkfive;
        color:#44aa00;
        font-size:15px;
        margin-left:40px;
    }

    h2.title {
        font-size:35px;
        margin-top:10px;
        margin-left:10px;
    }

    h2 a{
        font-size:35px;
        color:#44aa00;
        margin-top:10px;
        margin-left:10px;
    }

    img {
        margin:0px;
    }

    img.leaf {
        position:relative;
        top:2px;
        left:-8px;
    }

    p {
        font-family:tgheros-bold;
        font-size:18px;
        color:#0000ff;
        margin:0px;
        margin-left:10px;
    }

    p.order{
        font-family:tgheros-bold;
        font-size:16px;
        color:#0000ff;
        margin:0px;
        margin-left:10px;
    }

    p.facebook {
        display:inline;
        font-family:tgheros-bold;
        font-size:18px;
        color:#0000ff;
        margin:0px;
        margin-left:5px;
    }

    p.ft {
        color:#0000ff;
        font-family:chunkfive;
        font-size:14px;
        letter-spacing:1px;

        margin:0px;
        padding:0px;
    }

    a {
        color:#44aa00;
        font-family:chunkfive;
        font-size:20px;
        letter-spacing:1px;
        text-decoration:none;
        margin:0px;
        padding:0px;
    }

    a:link, a:visited, a:hover, a:active {

    }

    a.navigation {
        color:#0000ff;
        font-family:chunkfive;
        font-size:20px;
        text-decoration:none;
    }

    ul {
        list-style-type:none;
        margin:0px;
        padding:0px;
    }

    li {
        float:left;
    }

    li.navigation{
        display:inline;
        position:relative;
        top:33px;
        float:left;
        margin-left:45px;
    }

    iframe {
        display:inline;
        margin-top:0px;
        margin-left:10px;
    }

    /*Facebook Stuffs*/

    /*Twitter Stuffs*/

    .chunky {
        color:#44aa00;
        font-family:chunkfive;
        font-size:20px;
        letter-spacing:1px;
        margin:0px;
        padding:0px;
    }

    .green {
        color:#44aa00;
    }

    .clearfooter {
        height:1px;
        clear:both;
    }

    #container {
        min-height:100%;
        margin-bottom: -20px;
        position: relative;
    }

    #header {
        display:block;
        width:auto;
        height:58px;
        padding-right:5px;
        padding-left:5px;
    }

    #logo {
        margin-top:0px;
        margin-left:10px;
    }

    #navbar {
        display:block;
        width:auto;
        height:2px;
        background-color:#0000ff;
    }

    #share {
        display:inline;
        margin:0px;
    }

    #body {
        width:1330px;
        margin:0px;
        margin-bottom:30px;
        padding:0px;
    }

    #footer {
        display:block;
        width:auto;
        height:10px;            
        position:realtive;          
        text-align:center;
        clear:both;
    }</code>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

征棹 2024-10-27 14:00:39

问题是，你没有固定宽度的容器，你的宽度是：100%，该网站是流动的。

您需要在容器上设置宽度，这样效果会很好！

Problem is, is that you don't have a fixed width container you have width:100%, the site is liquid.

You need to set a width on a container and it will play nice!

回复 原文
你是年少的欢喜 2024-10-27 14:00:39

您已将正文宽度设置为 1330px。如果您确实是为客户制作网站，那么您最好使用 960 像素的“标准”最大宽度。这样该网站就可以在大多数屏幕尺寸上正常工作。

一些支持神奇数字的阅读： http://cameronmoll.com/archives/2009/04/ is_it_time_to_move_beyond_960/

ps。你不应该将宽度设置为 body 元素本身，一些旧的浏览器对此非常奇怪，我认为至少 IE6 不理解它，但现在无法检查，因为我手头没有它。

You have set the body width to 1330px. If you are really making a site for a client, you might be better of going with the "standard" maximum width of 960px. That way the site will work properly on most screen sizes.

Some reading that sides the magic number: http://cameronmoll.com/archives/2009/04/is_it_time_to_move_beyond_960/

ps. You should not set the width to the body element itself, some older browsers are quite quirky with it, I think at least IE6 does not understand it, but cannot check now since I'm don't have it close to hand.

回复 原文
柠檬 2024-10-27 14:00:39

我认为您没有在问题中发布所有 CSS 样式。尽管如此，您必须在 css 中修复导航栏元素的宽度。您可以为标题 div 使用固定宽度，但我会使用另一个 div 或 ul 作为导航项目，并在这些项目上使用固定宽度，以便标题中的其余项目仍然可以浮动。

I don't think you have posted all the CSS styles in your question. Nevertheless, you have to fix the width of the navigation bar element in css. You could use a fixed width for your header div, but I'd use another div or ul for the navigation items and use fixed width on those, so that the rest of the items in the header can still float around.

回复 原文
铃予 2024-10-27 14:00:39

您没有文档类型并且处于怪癖模式。将其添加到您的第一行，看看我们的立场：

You don't have a doctype and are in quirks mode. Add this to your first line and see where we stand: <!doctype html>

回复 原文
土豪我们做朋友吧 2024-10-27 14:00:39

设计导航样式的方法有很多种，我对布局进行了一些更改，以说明如何实现它。

请参阅我的变体： http://jsfiddle.net/audetwebdesign/YzrUn/ 以及我的以下评论和解释。

CSS 样式

您可以利用 CSS 选择器并删除不必要的类，从而简化样式表。

将徽标作为单独的 div 保留在 header 中，并使用 ul 列表来标记您的导航链接。

您可以排版徽标或使用图像。修复 logo div 的 with 会有所帮助，高度可以设置为 auto 或固定（如果您使用的是图像）。

让我们将徽标 div 浮动到左侧，看看这一切是如何实现的。

将蓝色边框添加到标题以用作视觉分隔符。

灵活的导航栏

设置“ul”列表的边距，以便清除徽标 div。由于徽标是浮动的
向左，需要左边距，否则链接将覆盖徽标。

我们将 li 元素向左浮动，添加一些边距，然后将 a 导航链接显示为 block 的，添加一些填充。

请注意我如何使用 b 添加绿色标点符号，比 span+class 更简单。

最后，将一个类添加到最后一个 li 元素，以便您有一个钩子来设置 iframe 和与社交媒体网站相关的其他位的样式。

工作原理

在我的演示中，您可以改变输出窗口的宽度。

当您使窗口变窄时，链接（包括社交媒体位）将环绕到徽标的右侧，并且标题面板将垂直扩展，从而允许在较小的屏幕上或喜欢的人访问所有链接使用狭窄的浏览器窗口。

这样您就不必固定页面的宽度，除非您有其他原因这样做。

您可以调整各种元素的内边距以获得所需的垂直对齐方式。我认为这里有足够的可调整元素来应对设计中的任何意外情况。

最后，为了获得最佳结果，使用严格的文档类型，否则 IE 中的怪异模式可能会导致问题。

There are quite a few ways of styling your navigation, and I made a variation on your layout to illustrate how you might approach it.

Please see my variation at: http://jsfiddle.net/audetwebdesign/YzrUn/ and my following comments and explanation.

CSS Styling

You can take advantage of CSS selectors and get rid of unnecessary classes, thus simplifying your style sheet.

Keep the logo as a separate div in the header and use the ul list to mark-up your navigation links.

You can either typeset your logo or use an image. Fixing the with of the logo div helps a bit, the height can be set to auto or fixed if you are using an image.

Let's float the logo div to the left and see how this all works out.

Add the blue border to the header to serve as a visual separator.

The Flexible Navigation Bar

Set the margin of the 'ul' list so that it clears the logo div. Since the logo is floated
left, the left margin is needed otherwise the links will overlay the logo.

We float the li elements to the left, add some margins, and then display the a navigation links as block's, add some padding.

Note how I used the b to add the green punctuation, simpler than span+class.

Finally, add a class to the last li element so that you have a hook to style the iframe and other bits related to the social media sites.

How This Works

In my demo, you can vary the width of the output window.

As you make the window narrower, the links (include the social media bits) will wrap around to the right of the logo and the header panel will expand vertically, thus allowing all the links to be accessible on smaller screens or to people who prefer to use a narrow browser window.

This way you don't have to fix the width of the page unless you have other reasons to do so.

You can adjust padding on various elements to get the vertical alignment that you need. I think that there are enough adjustable elements here to take care of any eventualities in your design.

Finally, for best results, use a strict doctype, otherwise, quirks mode in IE may cause issues.

回复 原文
~没有更多了~

关于作者

醉生梦死

暂无简介

0 文章
0 评论
387 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文