navbar on widescreen monitor

[alexsmith2709]

Hi,

I have a site working and looking as i want on a 4:3 monitor (1024x768 resolution) but when viewing on my laptop my menu is displayed wrong.

I have read many sites and tried many things and i cant seem to fix it.

 

my site is

www.drunkengoldfish.com

so you can view a live example.

 

Here is my HTML to make the list for the nav bar:

<div id="navbar"><ul>
<li class="leftborder"><a href="index.html">Home</a></li>
<li><a href="">Products</a><ul>
	<li class="topborder"><a href="tshirts.html">T-Shirts</a></li>
	<li><a href="hoodies.html">Hoodies</a></li>
	<li><a href="bags.html">Bags</a></li></ul>
</li>
    <li><a href="shop.html">Shop</a></li>
    <li><a href="about.html">About Us</a></li>
   	<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>

and here is my css for the navbar:

#navbar {
float: left;
width: 794px;
margin: 0 0 1em 0;
padding: 0;
list-style: none;
background-color: #000;
border-bottom: 3px solid #FFF; 
border-top: 3px solid #FFF;
border-left: 3px solid #FFF;
border-right: 3px solid #FFF;
}

#navbar ul {
list-style: none;
width: 500px;
text-align: center;
margin: 0 auto;
padding: 0; }

#navbar li {
float: left;
list-style-type:none;
}

#navbar li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
font-size: 20px;
color: #FFF;
border-right: 3px solid #FFF;
}

.leftborder { border-left: 3px solid #FFF;}

.topborder { border-top: 3px solid #FFF; }

#navbar li a:hover {
color: #000;
background-color: #FF9C00; }

#navbar li ul {
display: none; 
width: 10em;
background-color: #000;

}

#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}

#navbar li:hover li {
float: none;
}

#navbar li:hover li a {
background-color: #FF9C00;
border-left: 3px solid #fff;
border-bottom: 3px solid #fff;
color: #000; 
}

#navbar li li a:hover {
background-color: #FFD74C; 
}

If worst comes to worst and my code is crap then with some help im willing to re-write it, but i'd rather not do that if i can fix what i have.

 

I hope i've provided enough info.

 

Thanks,

Alex

[denno020]

Any change your screen res on your laptop is just screwed up?

 

I don't see any obvious problems viewing on a 24" widescreen (1920 x 1080).. Nor on my laptop screen (1366 x 768).

 

Denno

[alexsmith2709]

Thanks for checking for me. My laptop screen res is 1280x800. Think it must be just my laptop then, just tried changing it to 1024x768 and it still does it!

Oh well, its not a problem if its just me!

 

Thanks

[cssfreakie]

I just checked but i can't seem to find what the problem is. Maybe it is browser related.

Could you maybe make a printscreen of what you find looking odd, and tell the browser type and version?

[alexsmith2709]

Hi,

Here is a screenshot taken on my laptop.

http://i53.tinypic.com/30a8bhf.png

This is using Firefox 3.6.13 - Firefox for Ubuntu Canonical - 1.0. I havent tried any other browser yet.

[cssfreakie]

Hi,

Here is a screenshot taken on my laptop.

http://i53.tinypic.com/30a8bhf.png

This is using Firefox 3.6.13 - Firefox for Ubuntu Canonical - 1.0. I havent tried any other browser yet.

 

Well that makes it much more clear. the reason for this to happen on your browser and not at ours is pretty much unclear it seems, because we all use firefox right...?, but what i do know is how to solve it  (and i am sure after you read this you know what causes this, .....fonts in your operating system)

your <ul> has a fixed width, so it is forced to push out anything that it can't contain width wise. The problem is you have no idea what the width is of the inner elements since they are not set fixed and they may be influenced by font interpretation (your using some interesting fonts which depend on the client side, ubuntu might very well use different fonts than windows etc)

 

Just to get the idea of what i mean try to change the stuff below into the second code with a smaller width

#navbar ul {
    list-style: none outside none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 500px; /* change it to 300px and look what happens */
}

I bet if you change your width to a min-width of 500px or a fixed width of anything bigger than 500 it will be fixed.

 

P.s. i love to hear if it worked if not let me know

[alexsmith2709]

Thanks for the suggestions cssfreakie, but sadly they did not work.

I did not get as far as trying on my laptop because it messed up for windows (desktop pc).

Using min-width: 500px; pushed everything to the left so it was not centred (my reason for using a fixed width div. Making the width 300px squeezes "about us" and "contact us" onto a new line.

Is there a way to centre the navbar without having to use a fixed width?

[raknjak]

I tried to solve this with firebug but the way the site is built up, it took me too long so here is an example of how it will work.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>An XHTML 1.0 Strict standard template</title>
<style>
#wrapper{width: 1016px}

#nav{
        margin-top: 10px;
        text-align: center;
    }

    #nav li{
        display: inline;
        margin-right: 15px;
    }

    #nav li a, #nav li a:visited{
        text-decoration: none;
        color: #000;
    }

    #nav li a:hover{
        color: #ccc;
    }

</style>
</head>

<body>
<div id="wrapper">
	<ul id="nav">
		<li><a href="?p=start_page">start page</a></li>
		<li><a href="?p=account">my account</a></li>
		<li><a href="?p=terms">terms</a></li>
		<li><a href="?p=manual">manual</a></li>
		<li><a href="?p=support">support</a></li>
	</ul>
</div>
</body>
</html>

 

1. div#wrapper has maximum allowed width (prevents menu from wrapping)

2. no width on the ul is needed (block-level elements take up the max allowed width when no width is specified = div#wrapper width

3. text-align: center on the ul element to center the li elements within

[cssfreakie]

Thanks for the suggestions cssfreakie, but sadly they did not work.

I did not get as far as trying on my laptop because it messed up for windows (desktop pc).

Using min-width: 500px; pushed everything to the left so it was not centred (my reason for using a fixed width div. Making the width 300px squeezes "about us" and "contact us" onto a new line.

Is there a way to centre the navbar without having to use a fixed width?

in addition to raknjak, maybe try to give the box a width of more than 500px 502px for instance. I assume you wont change the buttons right? raknjaks slution is ofcourse better

[alexsmith2709]

Right, spent ages trying to get raknjak's way to work with my menu but couldnt do it. i couldnt get the product sub menu to work properly, was displaying strangely (which i believe was due to the display: inline), so for now i have gone with your way cssfreakie. bit of a bodge job but it seems to work until i re-write my navbar code which is looking like a good thing to do!

 

Thanks for all your help everyone

[cssfreakie]

good to hear it worked  good luck!