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..

    Javascript: How do I get the id of a clicked link and then style it in css

    How to create a line break instead of having text going on top of itself?

    Show submit button as an image

    CSS How to multiple background + gradient?

    How to put those things next to eachother? CSS

    how to install bootstrap-select on server

    AJAX Call returns JSON, how to render properly formatted data

    how to set overflow: hidden; to one element

    How can I completely cancel a class when a CSS media style is used?

    Chrome & Firefox not rendering bold font-weights of Avenir, but Safari does! How to fix?

    How to create pentagon shape for avatar image?

    How come one of my columns in bootstrap is not functioning properly?

    CSS: How to get browser scrollbar width? (for :hover {overflow: auto} nice margins)

    How to show a pointer on specific table with css and Twitter Bootstrap?

    Capybara how to check if 'li' of a given link has proper css class

    How to access the physical Bundled and Minified js / css created by BundleConfig class

    How to ignore comments in sass partial files?

    How to create and edit a css file in browser Dom by javascript and then download it?

    How to increase constant space between li inline-block list elemets?

    How to make a block element adjust to the size of what is inside it?

    How to select the second th into the thead of a table having a specific ID using CSS?

    How do I get a CSS class to work in my Javascript file?

    Showing/hiding elements inside a div block with HTML and CSS

    How do I get a button to show on mouseover using jQuery?

    How can I stop divs getting pushed down?

    With CSS, how would I align this banner and navigation menu to XHTML 1.0 Strict specifications?

    How to handle alternating rows dynamically?

    How to obtain non-uniformly scrolling elements and layered “curtain-like” backgrounds on a webpage?

    How to use css to crop parts of an image

    How to modify this JQuery CSS into my view?