Miten valikkoon tällainen jippo?

Kuinkahan tuon saisi muutettua siten, että leveys tulisi sanan leveyden mukaan, eikä olisi vakio, niin kuin tuossa nyt on width: 10em; Eli ne linkit, jotka ovat koko ajan näkyvissä, olisi siististi vierekkäin:

linkki toinenlinkki link pidempilinkki

Mutta nyt ne on vähän hassusti, eli leveys pitäisi määrittää pisimmän sanan mukaan, mutta sitten lyhyen sanan perään jää kamalasti tyhjää..

Ja pystyviivoja ei taida tuohon saada linkkien väliin? Eli että olisi näin:

linkki | toinenlinkki | link | pidempilinkki

Hankalaa, kun valikossa on eri pituisia sanoja, ja näyttää hassulle, jos leveys on vakio. Muilta osin toimii täydellisesti.

Aiemmin tein tuon valikon toisella tapaa niin, että kuvat toimivat linkkeinä, mutta ajattelin kokeilla, josko tuolla systeemillä saisi toimimaan myös ilman kuvia. Yksi pieni ongelma vain..

Milla kirjoitti:

Kuinkahan tuon saisi muutettua siten, että leveys tulisi sanan leveyden mukaan, eikä olisi vakio, niin kuin tuossa nyt on width: 10em; Eli ne linkit, jotka ovat koko ajan näkyvissä, olisi siististi vierekkäin:

linkki toinenlinkki link pidempilinkki

Mutta nyt ne on vähän hassusti, eli leveys pitäisi määrittää pisimmän sanan mukaan, mutta sitten lyhyen sanan perään jää kamalasti tyhjää..

Ja pystyviivoja ei taida tuohon saada linkkien väliin? Eli että olisi näin:

linkki | toinenlinkki | link | pidempilinkki

Hankalaa, kun valikossa on eri pituisia sanoja, ja näyttää hassulle, jos leveys on vakio. Muilta osin toimii täydellisesti.

Aiemmin tein tuon valikon toisella tapaa niin, että kuvat toimivat linkkeinä, mutta ajattelin kokeilla, josko tuolla systeemillä saisi toimimaan myös ilman kuvia. Yksi pieni ongelma vain..

tarkoittaa ns. ylimmän tason linkkejä, jotka siis ovat navipalkkina esillä koko ajan? Kokeilitko jo poistaa #nav a ja #nav li leveyden (witdh)? Kannattaa antaa linkeille vähän ilmaa ympärille asettamalla paddingia.

"Ja pystyviivoja ei taida tuohon saada linkkien väliin?"

Toki pystyy. Sanomalla CSS:ssä että käytetään reunaviivoja:
border-left: 2px solid #000;

"Hankalaa, kun valikossa on eri pituisia sanoja, ja näyttää hassulle, jos leveys on vakio."

Itse pidän noita "tasalevyisiä nappeja" visuaalisesti mukavampana. Makuasioita siis :)

Y_H kirjoitti:

tarkoittaa ns. ylimmän tason linkkejä, jotka siis ovat navipalkkina esillä koko ajan? Kokeilitko jo poistaa #nav a ja #nav li leveyden (witdh)? Kannattaa antaa linkeille vähän ilmaa ympärille asettamalla paddingia.

"Ja pystyviivoja ei taida tuohon saada linkkien väliin?"

Toki pystyy. Sanomalla CSS:ssä että käytetään reunaviivoja:
border-left: 2px solid #000;

"Hankalaa, kun valikossa on eri pituisia sanoja, ja näyttää hassulle, jos leveys on vakio."

Itse pidän noita "tasalevyisiä nappeja" visuaalisesti mukavampana. Makuasioita siis :)

Juuri niitä ylimpiä linkkejä tarkoitan. Jos otan leveysmääritteen kokonaan pois, linkit menevät "kasaan", eli tekstit ovat osittain päällekkäin. Siellä ohjeessakin taidettiin ainakin Operasta mainita, että tarvitsee tuon width-määritteen, muuten teksti menee myttyyn.

Tokihan "tasalevyiset napit" voivat joissain tapauksissa olla ihan ok. Mutta varsinkin kun tilaa on tietyn verran ja tietyt linkit pitäisi siihen mahduttaa, ja muutenkin tässä tapauksessa mielestäni näyttäisi parhaimmalta, jos saisi linkit mukavasti vierekkäin. Varsinkin pisin linkkisana on kolme kertaa lyhimmän mittainen.. No, pitänee yrittää keksiä paremmat linkkisanat.

Mihin tarkoitat laitettavaksi tuon border-left: 2px solid #000; ? CSS:ään toki, mutta jonkinkin #naviin vai mihin?

Y_H kirjoitti:

tarkoittaa ns. ylimmän tason linkkejä, jotka siis ovat navipalkkina esillä koko ajan? Kokeilitko jo poistaa #nav a ja #nav li leveyden (witdh)? Kannattaa antaa linkeille vähän ilmaa ympärille asettamalla paddingia.

"Ja pystyviivoja ei taida tuohon saada linkkien väliin?"

Toki pystyy. Sanomalla CSS:ssä että käytetään reunaviivoja:
border-left: 2px solid #000;

"Hankalaa, kun valikossa on eri pituisia sanoja, ja näyttää hassulle, jos leveys on vakio."

Itse pidän noita "tasalevyisiä nappeja" visuaalisesti mukavampana. Makuasioita siis :)

Juu, sainkin tuon reuna/väliviivan toimimaan, mutta nyt varsinkin kun on nuo pystyviivat välissä, niin näyttää hassulle, kun linkit ovat erimittaisia.

Miten muuten saisin määriteltyä siten, että ensimmäisen linkin edessä ei olisi tuota reunaviivaa, koska eihän sitä tarvitsisi olla kuin linkkien välissä.

Y_H kirjoitti:

tarkoittaa ns. ylimmän tason linkkejä, jotka siis ovat navipalkkina esillä koko ajan? Kokeilitko jo poistaa #nav a ja #nav li leveyden (witdh)? Kannattaa antaa linkeille vähän ilmaa ympärille asettamalla paddingia.

"Ja pystyviivoja ei taida tuohon saada linkkien väliin?"

Toki pystyy. Sanomalla CSS:ssä että käytetään reunaviivoja:
border-left: 2px solid #000;

"Hankalaa, kun valikossa on eri pituisia sanoja, ja näyttää hassulle, jos leveys on vakio."

Itse pidän noita "tasalevyisiä nappeja" visuaalisesti mukavampana. Makuasioita siis :)

Kun otin width:n pois ja laitoin paddingia näyttäisi juttu suurinpiirtein toimivan. En tiedä miksei äsken toiminut.. Kiitos kuitenkin kovasti!

Mihin suuntaan tuo padding laittaa lisätilaa? Tiedän kyllä miten se taulukoissa toimii, mutta entä tässä? Linkkien väliin se ei ainakaan tuntunut tilaa tuovan, ilmeisesti vain koko linkkirimpsun ympärille? Pitää ilmeisesti ihan &nbps; :llä laittaa hieman lisätilaa linkkisanojen eteen ja taakse, kun ne nyt ovat aivan kiinni tuossa pystyviivassa, vai olisiko jotain fiksumpaa keinoa?

Milla kirjoitti:

Kun otin width:n pois ja laitoin paddingia näyttäisi juttu suurinpiirtein toimivan. En tiedä miksei äsken toiminut.. Kiitos kuitenkin kovasti!

Mihin suuntaan tuo padding laittaa lisätilaa? Tiedän kyllä miten se taulukoissa toimii, mutta entä tässä? Linkkien väliin se ei ainakaan tuntunut tilaa tuovan, ilmeisesti vain koko linkkirimpsun ympärille? Pitää ilmeisesti ihan &nbps; :llä laittaa hieman lisätilaa linkkisanojen eteen ja taakse, kun ne nyt ovat aivan kiinni tuossa pystyviivassa, vai olisiko jotain fiksumpaa keinoa?

Ei tämä järki näytä tarpeeksi nopeasti juoksevan, kun kerkeän tänne jo kirjoittaa ja sitten tuleekin taas jotain uutta mieleen.. Tuli mieleen, että voinhan minä ne pystyviivat laittaa myös siihen linkin sisään, eli | linkki, tuskinpa se haittaa, että se viivakin on linkkinä.. :)

Älkää hermostuko, voi olla että kerkeän taas kohta jotain kirjoittaa.. ;)

Milla kirjoitti:

Kun otin width:n pois ja laitoin paddingia näyttäisi juttu suurinpiirtein toimivan. En tiedä miksei äsken toiminut.. Kiitos kuitenkin kovasti!

Mihin suuntaan tuo padding laittaa lisätilaa? Tiedän kyllä miten se taulukoissa toimii, mutta entä tässä? Linkkien väliin se ei ainakaan tuntunut tilaa tuovan, ilmeisesti vain koko linkkirimpsun ympärille? Pitää ilmeisesti ihan &nbps; :llä laittaa hieman lisätilaa linkkisanojen eteen ja taakse, kun ne nyt ovat aivan kiinni tuossa pystyviivassa, vai olisiko jotain fiksumpaa keinoa?

Vastailen parhaani mukaan kaikkiin viesteihisi tässä.

"Miten muuten saisin määriteltyä siten, että ensimmäisen linkin edessä ei olisi tuota reunaviivaa, koska eihän sitä tarvitsisi olla kuin linkkien välissä."

Kokeilitko asettaa reunaviivan vain toiselle puolelle?

"Mihin suuntaan tuo padding laittaa lisätilaa? Tiedän kyllä miten se taulukoissa toimii, mutta entä tässä?"

http://www.yojih.net/fi_cribsheet/#troubled

"Linkkien väliin se ei ainakaan tuntunut tilaa tuovan, ilmeisesti vain koko linkkirimpsun ympärille? Pitää ilmeisesti ihan &nbps; :llä laittaa hieman lisätilaa linkkisanojen eteen ja taakse, kun ne nyt ovat aivan kiinni tuossa pystyviivassa, vai olisiko jotain fiksumpaa keinoa?"

Osa selaimista ei osaa asettaa paddingia inline-elementeille, joita linkit ovat. Tämän takia naveissa niille kannattaa yleensä sanoa display: block.

Pyri välttämämään &nbps;n käyttöä. Vähän turhan old-skuulia ;) Paddingilla ja marginaaleilla saavutetaan CSS-taitossa sama asia helpommalla.

Y_H kirjoitti:

Vastailen parhaani mukaan kaikkiin viesteihisi tässä.

"Miten muuten saisin määriteltyä siten, että ensimmäisen linkin edessä ei olisi tuota reunaviivaa, koska eihän sitä tarvitsisi olla kuin linkkien välissä."

Kokeilitko asettaa reunaviivan vain toiselle puolelle?

"Mihin suuntaan tuo padding laittaa lisätilaa? Tiedän kyllä miten se taulukoissa toimii, mutta entä tässä?"

http://www.yojih.net/fi_cribsheet/#troubled

"Linkkien väliin se ei ainakaan tuntunut tilaa tuovan, ilmeisesti vain koko linkkirimpsun ympärille? Pitää ilmeisesti ihan &nbps; :llä laittaa hieman lisätilaa linkkisanojen eteen ja taakse, kun ne nyt ovat aivan kiinni tuossa pystyviivassa, vai olisiko jotain fiksumpaa keinoa?"

Osa selaimista ei osaa asettaa paddingia inline-elementeille, joita linkit ovat. Tämän takia naveissa niille kannattaa yleensä sanoa display: block.

Pyri välttämämään &nbps;n käyttöä. Vähän turhan old-skuulia ;) Paddingilla ja marginaaleilla saavutetaan CSS-taitossa sama asia helpommalla.

Niin eli kun laitoin tuon border-left: 2px solid #000; niin sehän tuli jokaisen navilinkin eteen, eli myös sen ensimmäisen, mutta siihenhän sitä ei tarvitse. Mutta ratkaisin homman tosiaan laittamalla pystyviivan linkin sisään (eli siis kaikkien muiden kuin sen ensimmäisen).

Mutta kiitos kuitenkin avusta, pääsen näillä tiedoilla eteenpäin ja saan sivut varmasi sellaisiksi kuin pitääkin. Kiitoksia paljon :)

Milla kirjoitti:

Niin eli kun laitoin tuon border-left: 2px solid #000; niin sehän tuli jokaisen navilinkin eteen, eli myös sen ensimmäisen, mutta siihenhän sitä ei tarvitse. Mutta ratkaisin homman tosiaan laittamalla pystyviivan linkin sisään (eli siis kaikkien muiden kuin sen ensimmäisen).

Mutta kiitos kuitenkin avusta, pääsen näillä tiedoilla eteenpäin ja saan sivut varmasi sellaisiksi kuin pitääkin. Kiitoksia paljon :)

"Mutta ratkaisin homman tosiaan laittamalla pystyviivan linkin sisään"

Älä toki laita sitä pystyviivaa linkin sisään, vaan vaikkapa -elementtiin. Näyttää/tuntuu aika hassulta, jos se pystyviivakin toimii linkkinä.