How to have this horizontal CSS based navigation menu work properly?


Tags: css

Problem :

Initially I had designed this flash based navigation menu for my website, after going through a flash tutorial. All went well until some of the visitors whom I showed the sample page said that their browser (Internet Explorer) didn't open the menu as they didn't have the flash plugin installed on their systems. So thinking on those lines, may be if more of my website visitors didn't have flash installed on their systems, perhaps they also won't be able to view the menu! And if the navigation menu is inaccessible, the entire website will go awry.

I came across another very good CSS based but VERTICAL menu, working almost the same wayas my flash menu ( BLACK HOVER EFFECT). This is the code:

<style type="text/css">

#coolmenu{
border: 0px solid black;
width: 178px;
background-color: #FFFFFF;
}

#coolmenu a{
font: bold 13px Tahoma;
padding: 16px;
padding-center: 0px;
display: block;
width: 100%;
color: 3a403c;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: red;
color: white;
}

</style>

<div id="coolmenu">
<a href="">ABOUT US<br><small> a brief note on our genesis </small></br></a>
<a href="">CONTENT SECTIONS<br><small> what we publish </small></br></a>
<a href="">EDITORIAL BOARD<br><small> fellow comrades </small></br></a>
<a href="">DOWNLOAD<br><small> our magazine archives </small></br></a>
<a href="">CONTACT US <br><small> mailing address </small></br></a>
</div>

But if I wish to use that CSS menu in my website, I need to have it designed horizontally.

I tried to change myself, but failed miserably :( THE menu's width needs to be 665 px and height 48px... each block i.e ABOUT US, CONTENT, DOWNLOAD etc needs to be within 133px sized division, having a thin bar of colour #616060 at the rightend of each block. I managed to have that only for the 1st block i.e ABOUT US But all other menu divisions continue to be placed vertically.

Also as you can see in my flash menu, there I had different font sizes and colour for 01, 02, 03 till 05 (Arial font size 16bold; colour #858383) and different font sizes and colour for the texts "ABOUT US" "CONTENT" DOWNLOAD" "EDITORIAL BOARD" "CONTACT US" (Arial font size 10; colour white)

But here in the CSS, I amn't able to get the different font sizes and colours for the numbers and texts.

This is what I tried doing only with the first block ABOUT US: But as you can see, the font looks so huge... I didn't try that with the other blocks :(

<style type="text/css">

#coolmenu{
width: 665px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: center;

}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 14px Arial;
padding-center: 0px;
display: block;
width: 133px;
color: #858383;
text-decoration: none;
border-right: 1px solid #616060;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

</style>

<div id="coolmenu">
<a href=""><font face="Arial" size="16" color=#858383><b>01</b></font><br><font face="Arial" size="10" color="white">ABOUT US</font></br></a>
<a href="">02<br><small> CONTENT SECTIONS </small></br></a>
<a href="">03<br><small> EDITORIAL BOARD </small></br></a>
<a href="">04<br><small> DOWNLOAD PDF</small></br></a>
<a href="">05<br><small> CONTACT US  </small></br></a>
</div>

So please guide me, how to have the similar font styling as in my flash menu and this CSS menu to be horizontal? Thanks in advance.



Solution :

Is this the effect you want: http://jsfiddle.net/UmpdH/10/ [FINAL UPDATE]

Basically, revise your html, use unordered list <ul> and wrap each anchor with <li>, float to left, and style the elements as you wish.

HTML:

<ul id="coolmenu">
    <li><a href="http://www.aamaodisha.org"><span><div>01</div>ABOUT US</span></a></li>
    <li><a href="http://www.aamaodisha.org/content.php"><span><div>02</div>CONTENT SECTIONS</span></a></li>
    <li><a href="http://www.aamaodisha.org/editorialboard.php"><span><div>03</div>EDITORIAL BOARD</span></a></li>
    <li><a href="http://www.aamaodisha.org/download.php"><span><div>04</div>DOWNLOAD PDF</span></a></li>
    <li><a href="http://www.aamaodisha.org/contactus.php"><span><div>05</div>CONTACT US</span></a></li>
</ul>​

CSS:

<style type="text/css">

#coolmenu{
width: 670px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: left;
list-style: none;
}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 10px Arial;
padding-center: 0px;
display: block;
/*width: 133px;*/
text-decoration: none;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu li:hover{
background-color: black;
}

#coolmenu li:hover a {color: white;}

#coolmenu li { width: 118px; height: 48px; padding-left: 15px; float: left; border-right: 1px solid #616060; }
#coolmenu li a span { min-width: 50px; display: inline-block; }

#coolmenu li a div { color: #858383; font: bold 16px Arial; text-align: left; }​

</style>

EDIT: The above menu has same effect with the flash menu as seen here: http://www.aamaodisha.org/contact.html

EDIT: final update, text-aligned left, padded-left: 15px


    CSS Howto..

    How to write inline CSS to web2py view

    How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?

    How to not use absolute positioning CSS

    How to align divs side by side without one being slightly lower?

    how to test css(3) style property value support, repeat value support?

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to add Active states and icons in wordpress wp_nav_menu()

    Show a sharing icon on hover on image

    How to use background image in CSS?

    How automatically adjust div's width using CSS?

    How to Trigger css animation both on scrolling down and up

    How to put images to the right and text to the left in css

    CSS: how to add a down arrow for the active link

    DOMPDF - How to render PDF to have no margins at all?

    how to make this “div” always visible to users

    How to assign CSS to images which have specific extension, height and width?

    How to apply a CSS class to another element when an object is hovered?

    How Can I use CSS to Add an Element Below another Element?

    How to make the page to fit screen width on mobile device?

    How to make ComboBox caption bold in Vaadin?

    How can I fix this parralax

    how to avoid duplicate css when using vendor prefixes?

    How to make a titled box with css?

    How to indent text like in a table, but without a table?

    How to write print css to get print from web pages in almost same manner as we get from MS word?

    CSS: how to select parent's sibling [duplicate]

    How SCSS rule evaluation done by browser

    Need help determining how to position this element with CSS

    How to center a block of social icon background images?

    How do I make the background fit the full size of the screen no matter what size the monitor is?