Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

How to fix menu bar using HTML?

HTML

  • Please log in to reply
3 replies to this topic

#1 mihosa

mihosa

    CC Regular

  • Member
  • PipPipPip
  • 36 posts
  • Location:Greece
  • Programming Language:(Visual) Basic, JavaScript, PL/SQL
  • Learning:C, PHP, JavaScript, Visual Basic .NET

Posted 21 October 2011 - 01:38 PM

Hello. I am trying to design a website using html language. In this website I want to insert a horizontal menu bar which is going to be used. The menu bar is looking fine when the site is being appeared in full sized window. But when i decrease the size of the window the menu is braking into parts and is being appeared in two lines. I have created the menu bar using the list command.

The code that i am using is the following:


<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
float:left;
}
a:link,a:visited
{
display:inline;
width:140px;
font-weight:bold;
color:#FFFFFF;
background-color:#3366FF;
text-align;center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#3366FF;
}
</style>
</head>
<body>
<ul>
<li><b><a href="homepage.html">Homepage    </b></li>
<li><b><a href="legistlation.html">Legistlation and Rights    </b></li>
<li><b><a href="Articles.html">Articles    </b></li>
<li><b><a href="Disabilities.html">Disabilities    </b></li>
<li><b><a href="otherlinks.html">Other Links    </b></li>
<li><b><a href="supportingorganization.html">Supporting Organizations    </b></li>
<li><b><a href="guestbook.html">Guestbook    </b></li>
<li><b><a href="terminology.html">Terminology    </a></b></li>
</ul>
</p>
</p>
</html>

menubar.png


I upload an image also of how the menu bar looks like.
If there is anyone that could help me I would apprciate it, because i am going to deliver the site for my final project in my university and i have to correct this problem !!!


THank you very much. !!!

Attached Files


Edited by Alyn, 23 October 2011 - 12:55 AM.
added code tag

  • 0

#2 Vaielab

Vaielab

    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts
  • Location:Quebec City
  • Programming Language:Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Transact-SQL, ActionScript

Posted 21 October 2011 - 02:53 PM

Well, you can't do a lot about it.
Your text is bigger than the line, so your browser put it on 2 line, just like in word

You can get a smaller font, but that pretty much it.

In a perfect word, when the text is too big for the line, what should happend?
  • 0

#3 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 22 October 2011 - 05:05 PM

My recommendation would be to set a width to the UL. Then when the window is made smaller it will force a scroll bar on the browser,but not break your menu to two lines. For your example 1008px is the minimum width that will work.

ul{
list-style-type:none;
margin:0;
padding:0;
width: 1008px;
display: block;
overflow: hidden;
}

  • 0
Posted Image

#4 mihosa

mihosa

    CC Regular

  • Member
  • PipPipPip
  • 36 posts
  • Location:Greece
  • Programming Language:(Visual) Basic, JavaScript, PL/SQL
  • Learning:C, PHP, JavaScript, Visual Basic .NET

Posted 24 October 2011 - 10:21 AM

Hello !!! Thank you very much all for your help. Root23, your code works great and I solved my problem in this way with the only difference that i set as width 1072px. Thank you very much.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download