html - Multiple lines in a horizontally-floated list item -


i'm trying create navigation menu website, links aligned horizontally near top of page, , want each link have short description underneath. when user clicks on either main link text or description underneath, should take them right page. additionally, each menu item should have triangle-shaped icon bullet. this picture of i'm trying achieve.

i can make list align horizontally when it's 1 line. breaks down when try add more.

<nav id = "header-navigation">   <ul>     <li>       <a href="/">         home         <span class = "subnavigation">foo!</span>       </a>     </li>     <li>       <a href="/contact">         contact          <span class = "subnavigation">bar</span>     </li>   </ul> </nav><!-- header-navigation -->

and in css:

nav#header-navigation {   margin-top: 160px;   display: block; }  nav#header-navigation ul li:before {     content: url("../images/main-navigation-bullet.png");     vertical-align: top; }  nav#header-navigation ul li {     display: inline;     text-transform: uppercase;     min-height: 22px; }  nav#header-navigation ul li span.subnavigation {   display: block;   color: #999;   font-size: 90%;   margin-top: -10px;   margin-left: 15px; }

this get.

i've tried putting float: left on nav#header-navigation ul li, causes list items float on place, top of screen, outside of containing div belong.

another problem i've found chrome doesn't display vertical-align: top; attribute correctly, subnavigation text displays in wrong place on browser.

is there way work across browsers, or still sort of thing that's best done using images?

it appears changes need are:

nav#header-navigation ul li{     display: inline-block; }  nav#header-navigation ul li a{     display: inline-block;     vertical-align: top; }

and rid of

nav#header-navigation ul li span.subnavigation {     margin-top: -10px;     margin-left: 15px; }

after making these changes, appears correctly in firefox , chromium on linux mint 15.


Comments

Post a Comment

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more

rewrite - Trouble with Wordpress multiple custom querystrings -

i'm working on adding multiple querystring , doesn't seem work. i've found codes seems work others might i'm missing something. i want like: http://mydomain.com/board/?getyear=2013&getsometext2=sometext to http://mydomain.com/board/2013/sometext/ i added code below functions.php file. doesn't seem work should though. this works. echoing querystring gets both variable without problem. http://mydomain.com/board/2013/sometext/ but doesn't. tested querystring vis isset() seems nothing being set/get http://mydomain.com/board/2013/ function add_query_vars($vars) { $vars[] = "getyear"; $vars[] = "getsometext2"; return $vars; } add_filter('query_vars', 'add_query_vars'); function add_rewrite_rules($arules) { $anewrules = array('board/([^/]+)/([^/]+)/?$' => 'index.php?pagename=board&getyear=$matches[1]&getsometext2=$matches[2]'); $arules = $a...
Read more