Jump to content

How to fix menu bar using HTML?

- - - - -
Started by mihosa, Oct 21 2011 01:38 PM

  • Please log in to reply
3 replies to this topic

#1
mihosa
Posted 21 October 2011 - 01:38 PM

mihosa

    Newbie

  • Members
  • PipPip
  • 19 posts
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>

Attached File  menubar.png   146.94K   102 downloads


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

#2
Vaielab
Posted 21 October 2011 - 02:53 PM

Vaielab

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 547 posts
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?

#3
Root23
Posted 22 October 2011 - 05:05 PM

Root23

    Programmer

  • Members
  • PipPipPipPip
  • 144 posts
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;
}

Posted Image

#4
mihosa
Posted 24 October 2011 - 10:21 AM

mihosa

    Newbie

  • Members
  • PipPip
  • 19 posts
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.
Back to HTML Programming


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users



  1. CODECALL Programming Forum
  2. → Web Development Forum
  3. → HTML Programming
IPB skins by Skinbox