Databases
StackOverflow2013
Postsdbo
POHow to have this horizontal CSS based navigation menu work properly?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to have this horizontal CSS based navigation menu work properly?
    text
    copied!<p>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. </p> <p>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: </p> <pre><code>&lt;style type="text/css"&gt; #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&gt;body #coolmenu a{ /*Non IE rule*/ width: auto; } #coolmenu a:hover{ background-color: red; color: white; } &lt;/style&gt; &lt;div id="coolmenu"&gt; &lt;a href=""&gt;ABOUT US&lt;br&gt;&lt;small&gt; a brief note on our genesis &lt;/small&gt;&lt;/br&gt;&lt;/a&gt; &lt;a href=""&gt;CONTENT SECTIONS&lt;br&gt;&lt;small&gt; what we publish &lt;/small&gt;&lt;/br&gt;&lt;/a&gt; &lt;a href=""&gt;EDITORIAL BOARD&lt;br&gt;&lt;small&gt; fellow comrades &lt;/small&gt;&lt;/br&gt;&lt;/a&gt; &lt;a href=""&gt;DOWNLOAD&lt;br&gt;&lt;small&gt; our magazine archives &lt;/small&gt;&lt;/br&gt;&lt;/a&gt; &lt;a href=""&gt;CONTACT US &lt;br&gt;&lt;small&gt; mailing address &lt;/small&gt;&lt;/br&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>But if I wish to use that CSS menu in my website, I need to have it designed horizontally. </p> <p>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.</p> <p>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)</p> <p>But here in the CSS, I amn't able to get the different font sizes and colours for the numbers and texts. </p> <p>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 :(</p> <pre><code>&lt;style type="text/css"&gt; #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&gt;body #coolmenu a{ /*Non IE rule*/ width: 133px; } #coolmenu a:hover{ background-color: black; color: white; } &lt;/style&gt; &lt;div id="coolmenu"&gt; &lt;a href=""&gt;&lt;font face="Arial" size="16" color=#858383&gt;&lt;b&gt;01&lt;/b&gt;&lt;/font&gt;&lt;br&gt;&lt;font face="Arial" size="10" color="white"&gt;ABOUT US&lt;/font&gt;&lt;/br&gt;&lt;/a&gt; &lt;a href=""&gt;02&lt;br&gt;&lt;small&gt; CONTENT SECTIONS &lt;/small&gt;&lt;/br&gt;&lt;/a&gt; &lt;a href=""&gt;03&lt;br&gt;&lt;small&gt; EDITORIAL BOARD &lt;/small&gt;&lt;/br&gt;&lt;/a&gt; &lt;a href=""&gt;04&lt;br&gt;&lt;small&gt; DOWNLOAD PDF&lt;/small&gt;&lt;/br&gt;&lt;/a&gt; &lt;a href=""&gt;05&lt;br&gt;&lt;small&gt; CONTACT US &lt;/small&gt;&lt;/br&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload