CODEWITHSUNDEEP
htmlcssuser-interfacenavigationuser-experience
Endeavor
Endeavor

Reputation: 19

CSS/HTML Navigation bar issue

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&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 { 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>

Upvotes: 0

Views: 2859

Answers (5)

Marc Audet
Marc Audet

Reputation: 46825

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.

Upvotes: 0

Rob
Rob

Reputation: 15168

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

Upvotes: 0

Munim
Munim

Reputation: 6520

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.

Upvotes: 0

red
red

Reputation: 2050

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.

Upvotes: 0

daryl
daryl

Reputation: 15217

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!

Upvotes: 1

Related Questions