Question

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.

Answer 1

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