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

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

python - Setting ctypes.Structure default values -

-
this doesn't work: class ifinfomsg(ctypes.structure): _fields_ = [ ('ifi_family', ctypes.c_ubyte), ('__ifi_pad', ctypes.c_ubyte), ('ifi_type', ctypes.c_ushort), ('ifi_index', ctypes.c_int), ('ifi_flags', ctypes.c_uint), ('ifi_change', ctypes.c_uint(0xffffffff)) ] it errors with: file "rtnetlink.py", line 243, in <module> class ifinfomsg(ctypes.structure): typeerror: error when calling metaclass bases second item in _fields_ tuple (index 5) must c type however can set values in __init__() : class ifinfomsg(ctypes.structure): _fields_ = [ ('ifi_family', ctypes.c_ubyte), ('__ifi_pad', ctypes.c_ubyte), ('ifi_type', ctypes.c_ushort), ('ifi_index', ctypes.c_int)...
Read more

SoapUI on windows 10 - high DPI/4K scaling issue -

-
Image
soapui doesn't seem dpi-aware , displays small on high dpi screen (tiny text , buttons). other applications running fine (screen resolution 3840 x 2160). version : soapui 5.1.2 os : windows 10 i have tried: configure soapui run "disable display scaling on high dpi settings" - parts of soapui looking bigger , don't display (image) changing resolution changing font size (preferences > editor settings > select font...) therefore assume, soapui pretends dpi-aware, not scale itself. have same issue? this workaround until developers round making version dpi-aware. step 1: add registry key hkey_local_machine\software\microsoft\windows\currentversion\sidebyside\preferexternalmanifest (dword) 1 step 2: add manifest file 'soapui-5.2.1.exe.manifest' in same directory 'soapui-5.2.1.exe' content of manifest file: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <assembly xml...
Read more