HTML/CSS Strange spacing in divs -
in refining banner/navbar of website discovered strange spacing between divs. here 2 links showing problem in jsfiddle. link 1 | link 2
(i using php determine content show needed 2 demonstrate issue both possibilities).
i have spent 3 hours fiddling code trying find out happening , how fix it, no avail. can't seem identify causing problem.
edit: find strange gaps between green , black outlined border.
my code (from jsfiddle):
link 1 html:
<div id="banner"> <div id="bannerleft"></div> <div id="bannercenter"> <div id="nav_content"> <ul> <li> <div><a href="../">home</a> </div> </li> <li>|</li> <li> <div><a href="forum">forums</a> </div> </li> <li>|</li> <li> <div><a href="market">market</a> </div> </li> </ul> </div> </div> <div id="bannerright"> <div id=accountcontent> <span><a href="login">login</a> | <a href="register">register</a></span> </div> </div> </div> link 1 css:
#banner { height: 30px; width: 100%; display: table; margin-bottom: 20px; } #bannerleft { display: table-cell; text-align: left; outline-color: black; outline-style: dashed; width: 33.33%; } #bannercenter { display: table-cell; text-align: center; outline-color: black; outline-style: dashed; padding: 0px; height:30px; width: 33.33%; } #nav_content { height: 30px; margin: 0 auto; padding: 0px; outline-color: green; outline-style: dashed; } #nav_content ul { height: 30px; margin: 0 auto; padding: 0px; } #nav_content ul li { display: inline-block; list-style: none; line-height: 30px; } #nav_content ul li div { height: 30px; } #bannerright { display: table-cell; text-align: center; outline-color: black; outline-style: dashed; padding: 0px; height:30px; width: 33.33%; } #accountcontent { outline-color: green; outline-style: dashed; height:30px; } link 2 html:
<div id="banner"> <div id="bannerleft"></div> <div id="bannercenter"> <div id="nav_content"> <ul> <li> <div><a href="../">home</a> </div> </li> <li>|</li> <li> <div><a href="forum">forums</a> </div> </li> <li>|</li> <li> <div><a href="market">market</a> </div> </li> </ul> </div> </div> <div id="bannerright"> <div id=accountcontent><a href="account"><img id="avatarsmall" src=""/>accountname</a> </div> </div> </div> link 2 css:
#banner { height: 30px; width: 100%; display: table; margin-bottom: 20px; } #bannerleft { display: table-cell; text-align: left; outline-color: black; outline-style: dashed; width: 33.33%; } #bannercenter { display: table-cell; text-align: center; outline-color: black; outline-style: dashed; padding: 0px; height:30px; width: 33.33%; } #nav_content { height: 30px; margin: 0 auto; padding: 0px; outline-color: green; outline-style: dashed; } #nav_content ul { height: 30px; margin: 0 auto; padding: 0px; } #nav_content ul li { display: inline-block; list-style: none; line-height: 30px; } #nav_content ul li div { height: 30px; } #bannerright { display: table-cell; text-align: center; outline-color: black; outline-style: dashed; padding: 0px; height:30px; width: 33.33%; } #accountcontent { outline-color: green; outline-style: dashed; height:30px; } #avatarsmall { height: 30px; width: 30px; padding: 0px; margin: 0px; }
quick fix, using vertical-align: top #bannercenter, not recommended. if per semantics, readability, read on.
i not sure trying achieve, using contextual classes you. suspect issue related line-height , margin. fix make line-height: 1; margin: 0; both of <ul>s. , not idea use display: table or display: table-cell. instead either use inline-block or flexbox.
.parent {border: 1px dashed blue; text-align: center;} .child-one {display: inline-block; border: 1px dashed red; margin: 0 5px; padding: 5px; width: 33%;} .child-two {display: inline-block; border: 1px dashed green; margin: 0 5px; padding: 5px; width: 33%;}<div class="parent"> <div class="child-one">home</div> <div class="child-two">office</div> </div>may if want have 3 columns, , use 1 column offset (making contents centred) , use next column display other things, can use following piece of code:
* {font-family: segoe ui, sans-serif;} header {overflow: hidden;} header ul, header ul li {margin: 0; padding: 0; list-style: none; float: left;} header ul li {margin-right: 10px;} header {text-decoration: none; color: #09f;} header a:hover {color: #33f;} header ul.main-menu {margin-left: 35%;} header ul.sub-menu {float: right;} header .acct-settings {float: right;} .acct-settings {position: relative; min-height: 32px; padding-left: 40px;} .acct-settings a, .acct-settings span {display: block; width: 100px;} .acct-settings a.thumb {position: absolute; left: 0; top: 5px; width: 32px;} .acct-settings a.thumb img {font-weight: bold;}<header> <ul class="main-menu"> <li><a href="#">home</a></li> <li><a href="#">forums</a></li> <li><a href="#">market</a></li> </ul> <ul class="sub-menu"> <li><a href="#">register</a></li> <li><a href="#">sign in</a></li> </ul> </header> <hr /> <header> <ul class="main-menu"> <li><a href="#">home</a></li> <li><a href="#">forums</a></li> <li><a href="#">market</a></li> </ul> <div class="acct-settings"> <a href="#" class="thumb"> <img src="http://placehold.it/32x32" alt="" /> </a> <a href="#">user name</a> <span>designation</span> </div> </header>it idea follow standard coding practise , use semantic tags.
Comments
Post a Comment