html - Match text height with image height in menu -

-

i have menu, put @ end 3 images, measuring 30x30 px each. after images being inserted, appeared space between bottom line of menu , text. image there no space between bottom of menu , images. do, have text having exact size (i managed fix space increasing font size, not solution me) , rid of space. again, space below text , not images. *check full-screen menu.

#nav {       background-color: #e26a63;      padding: 0;      margin: 0;      font-family: font;      font-size: 20px;  }       #wrap {      padding-left: 60px;      height: 100px;      width: 100%;      margin: 0 auto;      display: table-cell;       vertical-align: bottom;    }  #nav ul {      list-style-type: none;      padding: 0;      margin: 0;      position: relative;      min-width: 245px;   }  #nav ul li {      display: inline-block;  }  #nav ul li:hover {      background-color: #cb5f59;  }    #nav ul li:after {    content: "";    font-size: 0;    display: block;    height: 5px;    }  #nav ul li:hover:after {    background: #9e4a45;  }  #nav ul ul li:hover:after {    background: transparent;  }  #nav ul li a, visited {      color: white;      display: block;      padding: 15px;      text-decoration: none;  }  #nav ul li:hover ul {      display: block;  }  #nav ul ul {      display: none;      position: absolute;      background-color: #e26a63;      border-top: 0;      margin-top: 5px;          z-index: 100;  }  #nav ul ul li {      display: block;  }  #nav ul ul li a:hover {      color: white;  }  #nav {      display: table;      width: 100%;  }    .alignright { float: right; }
<div id="nav">      <div id="wrap">          <ul>          <li><a href="home.html">home</a></li><li>            <a href="#">study</a>              <ul>                  <li><a href="present.html">present simple</a></li><li>                   <a href="possessives.html">possesives</a></li><li>                    <a href="articles.html">articles</a></li><li>                   <a href="modal.html">modal verbs</a></li><li>                     <a href="prepositions.html">prepositions</a></li><li>                      <a href="plural.html">plural of nouns</a></li><li>                      <a href="countability.html">countability</a></li>                         </ul>            </li><li>          <a href="#">games</a>              <ul>                  <li><a href="#">riddles</a></li><li>                   <a href="#">flip card game</a></li><li>                    <a href="#">spot mistake</a></li><li>                   <a href="#">multiple choice</a></li>                              </ul>            </li><li>          <a href="oferta.html">shop</a></li><li>          <a href="contact.html">contact</a></li><li>          <a href="about.html">about us</a></li>          <li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>          </ul>        </div>  </div>

the simplest set same height texts have on images

#nav ul li a, visited {     color: white;     display: block;     padding: 15px;     height: 30px;               /*  added  */     text-decoration: none; }

stack snippet

#nav {       background-color: #e26a63;      padding: 0;      margin: 0;      font-family: font;      font-size: 20px;  }       #wrap {      padding-left: 60px;      height: 100px;      width: 100%;      margin: 0 auto;      display: table-cell;       vertical-align: bottom;    }  #nav ul {      list-style-type: none;      padding: 0;      margin: 0;      position: relative;      min-width: 245px;   }  #nav ul li {      display: inline-block;  }  #nav ul li:hover {      background-color: #cb5f59;  }    #nav ul li:after {    content: "";    font-size: 0;    display: block;    height: 5px;    }  #nav ul li:hover:after {    background: #9e4a45;  }  #nav ul ul li:hover:after {    background: transparent;  }  #nav ul li a, visited {      color: white;      display: block;      padding: 15px;      height: 30px;               /*  added  */      text-decoration: none;  }  #nav ul li:hover ul {      display: block;  }  #nav ul ul {      display: none;      position: absolute;      background-color: #e26a63;      border-top: 0;      margin-top: 5px;          z-index: 100;  }  #nav ul ul li {      display: block;  }  #nav ul ul li a:hover {      color: white;  }  #nav {      display: table;      width: 100%;  }    .alignright { float: right; }
<div id="nav">      <div id="wrap">          <ul>          <li><a href="home.html">home</a></li><li>            <a href="#">study</a>              <ul>                  <li><a href="present.html">present simple</a></li><li>                   <a href="possessives.html">possesives</a></li><li>                    <a href="articles.html">articles</a></li><li>                   <a href="modal.html">modal verbs</a></li><li>                     <a href="prepositions.html">prepositions</a></li><li>                      <a href="plural.html">plural of nouns</a></li><li>                      <a href="countability.html">countability</a></li>                         </ul>            </li><li>          <a href="#">games</a>              <ul>                  <li><a href="#">riddles</a></li><li>                   <a href="#">flip card game</a></li><li>                    <a href="#">spot mistake</a></li><li>                   <a href="#">multiple choice</a></li>                              </ul>            </li><li>          <a href="oferta.html">shop</a></li><li>          <a href="contact.html">contact</a></li><li>          <a href="about.html">about us</a></li>          <li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>          </ul>        </div>  </div>


Comments

Post a Comment

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

-
i trying fetch records database , having above error this classs appropriate getters , setters public class user { private int id; private string username; private string password; private string email; i have create database , inserted data below configuration <bean id="datasource" class="org.apache.commons.dbcp2.basicdatasource" destroy-method="close"> <property name="driverclassname" value="com.mysql.jdbc.driver"/> <property name="url" value="jdbc:mysql://localhost:3306/usersdb"/> <property name="username" value="root"/> <property name="password" value=""/> </bean> this complete stacktrace severe: servlet.service() servlet [appservlet] in context path [/spring] threw exception [request processing failed; nested exception org.hibernate.exception.sqlgrammarexception: not ...
Read more

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

-
Image
i have postgresql db number of tables. if query: select column_name information_schema.columns table_name="my_table"; i list of columns returned properly. however, when query: select * "my_table"; i error: (programmingerror) relation "my_table" not exist 'select *\n "my_table"\n' {} any thoughts on why can columns, can't query table? goal able query table. you have include schema if isnt public one select * <schema>."my_table" or can change default schema show search_path; set search_path my_schema; check table schema here select * information_schema.columns for example if table on default schema public both works ok select * parroquias_region select * public.parroquias_region but sectors need specify schema select * map_update.sectores_point
Read more

asp.net mvc - breakpoint on javascript in CSHTML? -

-
i have .cshtml file has javascript tag. within script tag have few lines of javascript. first line of javascript refers property in @viewbag. other javascript lines plain script without mvc related references. observation: can place breakpoints (visual studio 2015) on each of these javascript lines. however, breakpoints has white dot in center of breakpoint symbol (red circle) except line @viewbag reference (this particular line not have white dot in center). it seems breakpoint without white dot hit during run-time. question: can explain going on here? white dot mean? why plain red breakpoint line line hitting breakpoint? the visual studio debugger expecting debug actual server-side code within .cshtml file opposed client-side javascript within it. iirc, visual studio allow debug javascript code expected in internet explorer (and possibly edge), other browsers want use either third-party tool or developer tools (f12) within browser. an easy approach take advant...
Read more