html - Hover moving other elements to the right -

-

whenever mouse hovers 1 of long <li> elements other elements move right.

here's fiddle link : 

.footer_links{      margin-top:60px;        }    footer .ourservices{    	display: inline-block;  	float:left;  	margin: 0px -10px 0px 77px;        }    footer .ourservices ul li,a,h3{      text-decoration: none;      color:white;      list-style: none;  }    footer .ourservices .columns_title{      text-transform: uppercase  }      footer .ourservices .columns_title{      margin-bottom:17px;      font-size:23px;      font-family:raleway-regular;      font-weight:lighter;  }  footer .ourservices ul li, h3{      margin-bottom:8px;      font-size:12px;  }    footer .ourservices ul li{      margin-top: 10px;  }    footer ul li:hover{      font-family: 'open sans';      font-weight:bold;    }
<div class="footer_links">                                      <div class="ourservices">                                          <h3 class="columns_title">connect</h3>                                          <ul>                                              <li>1234 street name</li>                                              <li>suburb title</li>                                              <li>state, australia 400</li>                                              <li>phone:(00) 000 000 000</li>                                              <li>fax:(00) 000 000 000</li>                                              <li>info@email.com</li>                                          </ul>                                      </div>                                                                    <div class="ourservices">                                          <h3 class="columns_title">our services</h3>                                          <ul>                                              <li><a href="#">cotmprehensive geriatric assessment</a></li>                                              <li><a href="#">falls, mobility problems</a></li>                                              <li><a href="#">incontinence</a></li>                                              <li><a href="#">polypharmacy</a></li>                                              <li><a href="#">osteoporosis</a></li>                                              <li><a href="#">frailty</a></li>                                          </ul>                                      </div>                                                            <div class="ourservices">                                          <h3 class="columns_title">explore</h3>                                              <ul>                                                  <li><a href="#">our doctors</a></li>                                                  <li><a href="#">treatments</a></li>                                                  <li><a href="#">appointments</a></li>                                                  <li><a href="#">services</a></li>                                                  <li><a href="#">about</a></li>                                                  <li><a href="#">contact</a></li>                                              </ul>                                      </div>

jsfiddle.net/#&togetherjs=kdkei5hnq6

it because width of each div being determined width of contents, , positioning of other div determined positioning of div beside it. bold hover effect causing text within wider, causing chain reaction in positioning of other elements.

to fix it, set width of container won't resize based on contents:

footer .ourservices {     width: 170px; }

Comments

Post a Comment

Popular posts from this blog

javascript - Hide toolbar of pdf file opened inside iframe using firefox -

-
other browsers such chrome,ie working fine when given #toolbar=0.but not working in firefox. please help. this code. <html> <body> <iframe src="reports/reports.pdf#toolbar=0" width="100%;" height="80%"> </iframe> </html> i think it's dependent on application/plugin in browser opens pdf, works differently , might ignore there directives (depending on browser, plugin, platform, pdf viewer). the general recommendation here use these "directives" @ end of url: #toolbar=0&navpanes=0 you may try recommendations http://blogs.adobe.com/pdfdevjunkie/web_designers_guide : embedding using pdfobject you use basic html markup embed pdf files in page there more elegant solution out there. take @ pdfobject philip hutchison. pdfobject pretty easy scripting tool dynamically embedding pdf files web pages. uses javascript inject element dom tree of html file. there’s...
Read more

Ansible - ERROR! the field 'hosts' is required but was not set -

-
i've error when launch playbook don't found why.... error! field 'hosts' required not set there main.yml : --- - hosts: hosts - vars: - elasticsearch_java_home: /usr/lib/jmv/jre-1.7.0 - elasticsearch_http_port: 8443 - tasks: - include: tasks/main.yml - handlers: - include: handlers/main.yml and /etc/ansible/hosts : [hosts] 10.23.108.182 10.23.108.183 10.23.108.184 10.23.108.185 when test ping, : [root@poste08-08-00 elasticsearch]# ansible hosts -m ping 10.23.108.183 | success => { "changed": false, "ping": "pong" } 10.23.108.182 | success => { "changed": false, "ping": "pong" } 10.23.108.185 | success => { "changed": false, "ping": "pong" } 10.23.108.184 | success => { "changed": false, "ping": "pong" } please, me :) regards, you have syntax error in playbook. ...
Read more

Copy range with conditional formatting -

-
i have range conditional formatting in existing excel file. used epplus copy range new sheet, found conditional formatting missing. is there way copy range conditional formatting using epplus? i found solution this. did not test on formattingruletypes. (only needed 2 of them moment) in application have 1 template row each sheet. var formatlist = fromsheet.conditionalformatting.tolist(); foreach (var cf in formatlist) { // sourcerow row containing formatting if (cf.address.start.row == sourcerow ) { iexcelconditionalformattingrule rule = null; switch (cf.type) { case officeopenxml.conditionalformatting.eexcelconditionalformattingruletype.greaterthan: rule = dest.conditionalformatting.addgreaterthan(); break; case officeopenxml.c...
Read more