Horizontal justified menu in CSS with bar in space -


this question has answer here:

i have used code this question create horizontal menu each item evenly spaced.

here version:

<div id="navigation">   <ul>     <li class="first">       <a href="#" title="home page">home</a>     </li>     <li>       <a href="#">about&ensp;us</a>     </li>     <li>       <a href="#">what&ensp;we&ensp;cover</a>     </li>     <li>       <a href="#">monitoring&ensp;agencies</a>     </li>     <li>       <a href="#">publishers</a>     </li>     <li>       <a href="#">news</a>     </li>     <li>       <a href="#">contact&ensp;us</a>     </li>   <span></span> </ul> </div>

and css:

#navigation {     text-align: justify; }  #navigation ul span {     display: inline-block;     position: relative;     width: 100%;     height: 0; }  #navigation ul {     display: inline;     list-style: none; }  #navigation ul li {     display: inline }  #navigation ul li {     display: inline;     border-right: solid 1px #ccc; }  #navigation ul li.last {     border-right: none; }

is there way make vertical lines move right such halfway between end of tags , end of li tags?

here fiddle.

i've added answer here.

hack using elements spacer motif

fiddle reference: http://jsfiddle.net/audetwebdesign/bf6ey/

consider following html:

<div id="navigation"> <ul class="navigation">   <li class="first">     <a href="#" title="home page">home</a>   </li>   <li class="spacer-motif">|</li>   <li>     <a href="#">about&ensp;us</a>   </li>   <li class="spacer-motif">|</li>   ...   <li class="spacer-motif">|</li>   <li>     <a href="#">contact&ensp;us</a>   </li> </ul> </div>

i added list item between links: <li class="spacer-motif">|</li> (yes, cringe also...).

the css follows:

#navigation {     padding: 0 20px; /* add spacing @ left/right edges of list */ } #navigation ul {     display: table;     width: 100%;     list-style: none;     margin: 0;     padding: 0; } #navigation ul li {     display: table-cell;     text-align: center;     width: 1%; /* force cell shrink-to-fit text */     outline: 1px dashed blue; } #navigation ul li.spacer-motif {     width: 10%; /* force spacers take lot of space */     outline: none; }  #navigation ul li {     white-space: pre; }

the layout based on using table display types.

for ul, use display: table , set width 100%. remember 0 out margin , padding values.

for li, use display: table-cell , text-align: center.

the trick force table cells shrink-to-fit text labels setting width: 1%, , then, li.spacer-motif, set width: 10% force spacers expand (evenly) fill line.

to keep text links wrapping 2 or 3 lines, set white-space: pre in <a> elements (the links).

cleaning semantics

the problem here link texts vary in width , makes impossible use table-cell's right or left border , centered text. spacing vary among links , left/right border not evenly spaced between link texts.

the way around add elements. used pipe (|) suppose add pseudo-element 1px border , center , on.

however, if elements problem, inserted using jquery or javascript.

ie 7 support - hack css
if need ie7 support, need adjust css according following:
css: table , table-cell replacement ie7


Comments

Post a Comment

Popular posts from this blog

Change php variable from jquery value using ajax (same page) -

what i'm trying this: i've php global variable $currentid , simple jquery script check if there "id" (page) in hash of url , if yes wanted give value $currentid . i've been reading lot , notice shall use ajax i'm not managing it. my code is: <script type="text/javascript"> $(document).ready(function(){ if (parent.location.hash != '' ) { var thecurrentid = parent.location.hash.split('#')[1]; $.ajax({ url: 'my.php', //current page type: 'post', data: {theid: thecurrentid }, datatype: 'json', success: function () { } }); } // code here }); </script> could me please? thank in advance. php server side language, meaning once has sent data browser, php variables , data cannot changed... however, using ajax, can send request php page , change data in dom based on result. consider th...
Read more

Pull out data related to my apps from Android Play Store and iOS App Store -

i want pull out data related apps (ratings, reviews, etc) google play store , apple app store ? how can accomplish ? i have found open source apis google mentioned not reliable. also there paid apis (e.g. appfigures) available. has idea how able pull data these play stores ?? i looking direction on how can accomplish this. can suggest ? we (appfigures) have been working on developing infrastructure give ability reviews , bunch of other data points major app stores several years :] we make available via our api though may want check out.
Read more

How can I fetch data from a web server in an android application? -

i want retrieve data web server in android application, , don't know begin. should use web services? i recommend these tutorials: connect android php , mysql , json in android , php , mysqli i used these tutorials , managed trying working without difficulty. between them describe each step in how attempting @ each stage, android application, database , web server side , has information included can process , use received information the thing add connect android php , mysql tutorial makes use of mysql_ in php deprecated. better use mysqli why included third link. the basic outline of want this: 1) in android app make request server php script using class this: import java.io.bufferedreader; import java.io.ioexception; import java.io.inputstream; import java.io.inputstreamreader; import java.io.unsupportedencodingexception; import java.util.list; import org.apache.http.httpentity; import org.apache.http.httpresponse; import org.apache.http.namevaluepair...
Read more