Keskustelu: Nettisivujen teko: Pikku asetelma

Nyt ei meinannu onnistua. Minulla on useampi ul-listaus elementti. Miten saan ne vierekkäin kun ne kaikilla display-systeemeillä listautuu allekkain? Vai onko jokin niistä jääny löytymättä?

float-arvo on aika kiva.

Tarkoitatko siis li-elementtejä? Pitääkö ne saada tulostettua vaakatasoon? Mikäli näin, niin display: inline; lienee haettu asetus.

Minulla on loopissa niitä aika monta.

<ul id="emo">
  <li>Yksi</li>
   <ul id="x1">
     <li>jotai</li>
     <li>jotain</li>
   </ul>
</ul>

Noita "emoja" on kuusi, ne pitäisi saada vierekkäin, sen sijaan x:t blokataan..

Miten emot pitää asetella? Olisiko table parempi, koska voisi olla looginen taulukko? Viimeinen </li> on liikaa koodissasi.

Vieretysten:

Yksi   Kaksi   Kolme   Neljä   Viisi   Kuusi

Kun jotain noista klkikkaa, tulee näkyviin niiden alla oleva x-valikko. Eli linkki-menu o kyseessä.
Tietysti taple auttaisi mutta tuntuu vanhanaikaiselta, eikä ole loopissa niin kiva.. ;)

float: left

Ei ruvennut toimimaan.
Mahtaako tämä javascript-pätkä sotkea sitä? Olen kopsannut tämän menu-systeemin ja yritän muuttaa sitä.

<script>

var myvar;
function menuinit() {
        document.getElementById('x1').style.display = 'none';
        document.getElementById('x2').style.display = 'none';
        document.getElementById('x3').style.display = 'none';
        document.getElementById('x4').style.display = 'none';
        document.getElementById('x5').style.display = 'none';
        document.getElementById('x6').style.display = 'none';
        document.getElementById('navlist2').style.display = 'none';
}
function menuexpand (i) {
        menuinit();
        if (myvar == i) {
		document.getElementById(i).style.display = 'none';
		myvar = '';
	}
     else {
		document.getElementById(i).style.display = 'block';
		myvar = i;
	}
}
</script>

Tuo "emo"-otsikko kutsuu klikatessa tuota menuexpandia..

Käytä classeja (.xxx) jos monta elementtiä käyttää samaa tyylilohkoa. ID on uniikki, eli yhdelle elementille. Class on monelle.

Kiitos.

Vielä tuli pikku-probleema. UL-elementit molemmille sivuille jää tyhjää..millä saan sen pois...komento float.left ei vie sitä siis ihan vasempaan laitaan...

Toiseksi alablokkauksen linkit pakkaa menemään limittäin osittain toistensa päälle. Ja jos linkissä on välilyönti, se katkeaa kahdelle riville.

Laita elementeille margin: 0, jolloin niillä ei ole marginaalia. Jollei tehonnut, laita vielä padding: 0. Jos teksti katkeaa, laita white-space: nowrap.

Kiitos tähän astisesta. Mitenkäs tuo "linkki-kasa" saadan pois. Nyt valikon linkit ovat puoliksi toistensa päällä.

Millä tavoin päällekkäin? Ovatko vierekkäiset vai päällekkäiset linkit toistensa tiellä? Jos ne ovat vierekkäisten kanssa ongelmana, laita padding-left: x. Ensimmäiselle elementille 0, sitten 50, 100, 150, 200, 250 jne.

Voisitko laittaa linkin sivullesi?

Huomauttaisin, että ul-elementin sisällä ei saa suoraan olla toista ul-elementtiä, vaan siinä täytyy olla li-elementti, jonka sisään seuraava ul tulee.

Macro: Kuvaillaan asiaa näin.

Otsikko
 Link
 Link2
 Link3
 Link4

Kun klikkaa "Otsikko", nuo alemmat ovat melkein täysin päällekkäin, ei tuolla tavalla allekkain.

Meta: Tilanne on näin (ainakin on tarkoitus, voin vilkaista vielä):

<ul>
<li><span>Otsikko</span>
   <ul>
   <li></li>
   <li></li>
   </ul>
</li>
</ul>

Pekka Mansikka kirjoitti:

Tilanne on näin

Hyvä sittenhän tilanne on aivan oikein. Toisessa viestissäsi tilanne vain ei suinkaan ollut noin. :)

Oikea ratkaisu ongelmaasi ei suinkaan ole tehdä viittä ul-elementtiä joissa jokaisessa on vain yksi li-elementti ja sen sisällä taas ul, vaan oikea ratkaisu olisi suunnilleen tällainen:

<ul>
  <li> Perunat
    <ul>
      <li>Peruna 1</li>
      <li>Peruna 2</li>
    </ul>
  </li>
  <li> Porkkanat
    <ul>
      <li>Porkkana 1</li>
      <li>Porkkana 2</li>
    </ul>
  </li>
</ul>

Edit: Pohjattomasta hatustani vedin tällaisen, josta toivottavasti on jotain iloa. IE 6, ehkä myös IE 7, näyttää tällaisen CSS:llä toteutetun version luonnollisesti aivan pieleen. (Edit2: sotkin esimerkkiä vielä kello 17.30.)

Pekka Mansikka: Jos olet laittanut ne li-elementillä listaksi, niin et saa niitä päällekkäin ilman, että laitat CSS:llä niiden marginaalia miinuslukemille.

Muokkaus. Tuo Metabolixin esimerkki on hyvä, koska tämä ei käyty ollenkaan Javascriptiä.

Kiitos metalle hattutempusta. Mieluummin ilman javascriptiä. Pitää kokeilla noita kaikkia kun ehtii.

Öhöm!

Kiitoksia vielä metaforille räätälöidystä dropdrownista:)
Hyvin toimii. Voit jo muuttaa sen sivutekstiä, älä jätä sitä ikuisiksi ajoiksi noin ;)
Nyt vasta ehdin sen asentelemaan.