How do i shrink my link menu


Tags: html,css,hyperlink,menu

Problem :

I need help with some menu items on my site. The thing is, i think i have solved this problem in the past but i have forgotten about how i went about it. I have about 7 menu links that i floated and if my browser is fully maximized, it looks fine as it covers the entire with but when the browser is restored to a smaller size, it pushes some of the links to the bottom. Below is the html and css.

 #menu  a
 {
 float:left;        
 padding:16px 20px;
 color:#fff;
 background-color:#000;
 display:block; 
 border-right:1px solid #646464;
 text-align:center;
 font-size:90%;
 }

 <div id="menu">
 <a href="">Home</a>
 <a href="">About us</a>
 <a href="">Services</a>
 <a href="">Products</a>
 <a href="">Portfolio</a>
 <a href="">Frequently Asked Question</a>
 <a href="">Contact us</a>
 </div>

The thing is, i want it in such a way that when the width of the browser is smaller or if browser size is reduced, it should reduce the size of the font and probably reduce the size of the padding for each link.



Solution :

the problem is, that you got a fixed value for the padding... so if the browser is smaller than the comulative padding pixels... it won't fit...

a possible solution would be, to remove the horizontal padding and use a relative width value...

like the following:

#menu  a{
 float:left;        
 padding:16px 0;
 color:#fff;
 background-color:#000;
 display:block; 
 border-right:1px solid #646464;
 text-align:center;
 font-size:90%;
 width:14%
 }
 <div id="menu">
 <a href="">Home</a>
 <a href="">About us</a>
 <a href="">Services</a>
 <a href="">Products</a>
 <a href="">Portfolio</a>
 <a href="">Frequently Asked Question</a>
 <a href="">Contact us</a>
 </div>


    CSS Howto..

    How to get tr:nth-child which has css applied

    How to vertically center links in a menu?

    How to Make Glossy Colors in CSS. [closed]

    div not showing above text box

    How to style a GtkLabel with CSS?

    how to make smooth grayscale on hover using CSS

    In GWT, how to reference an external (obfuscated) CSS in another CSS file

    How to get sourcemaps working for React Css Modules?

    How to start css animation on speciefic height of webpage

    How to get this code to behave differently based on what exactly is clicked?

    How to Style Social Media Links Correctly

    How to center the boxes as shown?

    How do you input CSS into an animate

    how to: dynamic navigation bar size depending on dynamic image size?

    How to use css to find a list element in css alone, i.e. not be css3 dependent?

    How do I Add border to text in inputfield

    How can i make the responsive design using CSS?

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to access files from this hierarchy?

    How does tablesort.js create the sort indicator arrows

    How do I put a scrollable div next to a non-scrollable div using CSS?

    How do I keep dropdown menus the same width of top level categories with auto width

    How to fade in and out text and css using jquery

    Why won't my SVG's show?

    How Do I Make Validation and Error Messages Come Up Using Javascript?

    colspan doesn't accept decimal numbers. How do I specify the span?

    How to make this table's height equal to the middle td's height

    How do CSS grid systems save time when implementing designs that aren’t grid-based?

    jQuery wait for show()? Getting wrong data

    How to style an image created using javaScript