3 replies to this topic

[Raisin]

Hi Broni,

Need your help on creating a horizontal navigation bar, which is exactly the same as IPB. I'm almost 90% completed but don't know how to make it static just like in IPB in different computer resolution. Hope you understand what I mean. Please refer to the following codes I'm currently working on. Your guidance will be very much appreciated. Many thanks.

<div id="horizontalnav">
<div class="navlinks">
<ul>
<li><a href="#" title="Go to Home">Home</a></li>
<li><a href="#" title="Go to Forum">Forum</a></li>
<li><a href="#" title="Go to Blog">Blog</a></li>
<li><a href="#" title="Go to Hotels">Hotels</a></li>
</ul>
</div>
</div>


<style type="text/css">
#horizontalnav {min-width: 980px; height: 34px; position: relative; background-color: #8B7355;}</style>

<style type="text/css">
.navlinks { position: absolute; top: 10px; left: 160px; }</style>

<style type="text/css">
.navlinks ul { margin: auto;}</style>

<style type="text/css">
.navlinks li { font-weight: bold; margin: 0px 3px 0 0; list-style-type: none; display: inline; }</style>

<style type="text/css">
.navlinks li a { color: #fff; padding: 6px 15px 8px; text-decoration: none; font-size: 13px;}</style>

<style type="text/css">
.navlinks li a:hover { background: #328586; color: #fff; text-decoration: none;}</style>


Regards,

[Broni]

Instead of this:
min-width: 980px
use this:
width: 100%

[Raisin]

Hi Broni, thanks for your reply.

It doesn't work. Any more suggestion? Thanks.

[Broni]

Do you have live link?