css - Why is HTML span stacking vertically? -

-

on website have 2 spans : "services" , "products" in top right corner (in gray strip). reason being stacked vertically, expect them align horizontally, since spans markup marksup text inside text block.

snippet :

<div id="access">   <div>     <a href="#">       <span>services </span>     </a>     <a href="#">       <span>products</span>     </a>   </div> </div>

this css problem think 

#access {     /* background: #74c20e;     background: #716417;*/     display: block;     float: left;     margin: 5px auto;     background-color:rgb(181, 197, 207);     -moz-border-radius: 0px;     border-radius: 0px;      width: 1200px;  <!-- width: 940px; --> }  #access .menu-header, div.menu {      font-size: 13px;     margin-left: 12px;     width: 928px; } #access .menu-header ul, div.menu ul {     list-style: none;     margin: 0; } #access .menu-header li, div.menu li {     float: left;     position: relative; } #access {     color: white;     display: block;     line-height: 38px;     padding: 0 10px;     text-decoration: none; } #access ul ul {     box-shadow: 0px 3px 3px rgba(0,0,0,0.2);     -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);     -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);     display: none;     position: absolute;     top: 38px;     left: 0;     float: left;     width: 180px;     z-index: 99999; } #access ul ul li {     min-width: 180px; } #access ul ul ul {     left: 100%;     top: 0; } #access ul ul {     background: #0f9195;     line-height: 1em;     padding: 10px;     width: 160px;     height: auto; } #access li:hover > a, #access ul ul :hover > {     background: #635ba9;     color: #fff; } #access ul li:hover > ul {     display: block; } #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > {     color: #fff; }

fiddle here

http://jsfiddle.net/9uk9l/

does know why being displayed vertically rather horizontally?

span elements inline default, unless overridden , still inline on page. it's parents a elements problem. relevant page structure looks this:

<div id="access">   <div>     <a href="#">       <span>services </span>     </a>     <a href="#">       <span>products</span>     </a>   </div> </div>

in css you've set

#access a{   display: block; }

this cause anchors become block level elements, , stack on top of each other, independently of behavior of spans. remove display: block #access a , it'll work expected.

i suggest familiarize chrome (or other one) debugger https://developers.google.com/chrome-developer-tools/docs/elements let inspect page , narrow these issues down inspecting element , eyeballing styles being applied.


Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more