Flytande <li>

4 svar · 505 visningar · startad av ejick 20 jan. 2009

ejickMedlem sedan mars 2001895 inlägg

Frågan20 jan. 2009 15:09#1

Hej,

jag vet inte om rubriken är den mest lämpade, men eftersom jag inte vet vad jag ska kalla det kan jag inte heller söka efter lösningar (om det nu finns några).

Hur som helst, det är så att jag har en lång lista:

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
  <li>K</li>
  <li>L</li>
  <li>M</li>
</ul>

Problemet är att jag istället för att visa det på detta sätt skulle vilja att det delades upp så det visuella resultatet blev samma som om det skulle stått:

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>
<ul>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
</ul>
<ul>
  <li>K</li>
  <li>L</li>
  <li>M</li>
</ul>

Det stora problemet är att listan ser olika ut, resultat från en databas, så ibland kanske det bara är punkterna A och B, och ibland A-G eller likande. Antar att man kan lösa det med en dubbel-loop, med förslagsvis JavaScript men i första hand undrar jag om det är möjligt att åstadkomma med enbart CSS? Går inte det ser jag gärna en diskussion om alternativa lösningar.

Tacksam för svar

spangoMedlem sedan juni 20008 205 inlägg

20 jan. 2009 17:56#2

Det behöver väl inte vara mer komplicerat än att sätta margin-top till något lämpligt värde på t.ex. F och K, alternativt stoppa in en tom li med list-style-type:none på lämpliga ställen?

UrMeMedlem sedan apr. 2001762 inlägg

21 jan. 2009 12:08#3

Om du loopar ut det från en databas, med t.ex PHP? Så antar jag att du har några kriterier för när det ska bli en ny <ul> lista?

I så fall kan du väl bara stoppa in en if-sats i loopen t.ex

echo '<ul>';

loop...

if($something == $somethingelse) {
echo '</ul><ul>';
}

end loop....

echo '</ul>';

jarvkloMedlem sedan juli 20013 378 inlägg

22 jan. 2009 22:57#4

ejick skrev:

i första hand undrar jag om det är möjligt att åstadkomma med enbart CSS?

Hmm...
Rent teoretiskt går det med

<style type="text/css">
li:nth-child(5n) {margin-bottom: 1em;}
</style>

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo - men det är alltså CSS3 och därmed "bleeding edge" (dvs mycket fläckvist stöd än så länge, men kolla t.ex. i en nyare Opera så ser du hur det är tänkt)

... annars finns ju nth-child i t.x. JQuery också om du kan tänka dig att köra en scriptlösning i webbläsaren

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("ul li:nth-child(5n)").attr('style', 'margin-bottom: 1em;');
  });
</script>

http://docs.jquery.com/Selectors/nthChild

ejickMedlem sedan mars 2001895 inlägg

26 jan. 2009 15:39#5

Tack för alla svar!

Jag har hittat: http://articles.techrepublic.com.com/5100-10878_11-5810687.html exempel: http://www.meadhra.com/CNET/041201/FigureA.html

Vilket passar det jag vill uppnå. Skulle vara intressant och veta supporten för denna lösning. Har provat i IE 6 och 7 samt FF 3.