CSS ja fontit + muita kysymyksiä

[Macpoika]

Kuinka voi CSS:ssä asettaa fontin alalajin? Esim. Helvetica Neue Ultra Light

[nobu178]

Eikö lainausmerkkien käyttö auta?

[Juhani L]

Kuinka voi CSS:ssä asettaa fontin alalajin? Esim. Helvetica Neue Ultra Light

Älä hyvä mies kuvittele, että edes promillella netinkäyttäjistä olisi tuo fontti. Siksi en ole ikinä pohtinut tällaista enkä varmaan pohdikaan. CSS ei voida (onneksi) määritellä noita erikoisempia leikkauksia.

Perun puheitani: Kyllä sen voi lisätä CSS:ään nimellä "Helvetica Neue UltraLight" ja se toimii nettisivuilla ainakin niillä OS X:n käyttäjillä, joilla on tuo fontti. En menisi vannomaan, miten hyvin se toimisi niillä Windowsin ja Linuxin käyttäjillä, joilla on sama fontti. Aivan hyvin saattaisi olla toimimatta.

Jos nettisivuille on tarkoitus saada muita kävijöitä kuin pari tuttua Macin käyttäjää, en missään tapauksessa lähtisi laittamaan vain (osalle) Macin käyttäjille tuttuja eksoottisia fontteja nettisivuille.

[Bosse]

Vähän off-topic, mutta kuitenkin...

Kyllä mulla iMacissa oli tuo Helvetican leikkaus fonteissa mukana... Puuceessä sitä todellakaan ei ole käyttiksen mukana, mutta ei se aivan älyttömän harvinainenkaan sentään liene. Prosentti/-milleosuuksista en uskalla sanoa mitään. 8)

[Macpoika]

Kuinka voi CSS:ssä asettaa fontin alalajin? Esim. Helvetica Neue Ultra Light

Älä hyvä mies kuvittele, että edes promillella netinkäyttäjistä olisi tuo fontti. Siksi en ole ikinä pohtinut tällaista enkä varmaan pohdikaan. CSS ei voida (onneksi) määritellä noita erikoisempia leikkauksia.

Perun puheitani: Kyllä sen voi lisätä CSS:ään nimellä "Helvetica Neue UltraLight" ja se toimii nettisivuilla ainakin niillä OS X:n käyttäjillä, joilla on tuo fontti. En menisi vannomaan, miten hyvin se toimisi niillä Windowsin ja Linuxin käyttäjillä, joilla on sama fontti. Aivan hyvin saattaisi olla toimimatta.

Jos nettisivuille on tarkoitus saada muita kävijöitä kuin pari tuttua Macin käyttäjää, en missään tapauksessa lähtisi laittamaan vain (osalle) Macin käyttäjille tuttuja eksoottisia fontteja nettisivuille.

Eli pitää laittaa yhteen. Kiitos. Tuskin tulen tuota laittamaan tekstinä, jos on tärkeätä näkyä juuri se. Kaikilla Mac-käyttäjillähän tuon pitäisi näkyä, sillä Helvetica Neue on System-hakemistossa (ellei siis ole mennyt sitä Systemiä sorkkimaan).

[Macpoika]

Ei toimi vieläkään. Kummallista.
Se ei näytä jostain syystä tunnistavan sitä fonttia.

[Macpoika]

Siinä se ongelma.
Html-koodin rakenne:

Koodi: Valitse kaikki

<div>
    <ul>
        <a><li></li></a>
   </ul>
</div>

CSS-koodi:

Koodi: Valitse kaikki

#div {
	position: absolute;
	top: 300px;
	left: 30px;
	padding: 0;
}

#div ul {
	margin-bottom: 10px;
	padding: 15px 0 15px 0;
	background: #f22 url(background_images/bg-black.png) repeat top left;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}

#div li {
	width: 170px;
	padding: 10px;
	list-style: none;
	font-size: 1.2em;
	text-align: center;
}

#div a {
	background: black;
	text-decoration: none;
	color: #000;
}

#div a:visited {
	background: black;
	text-decoration: none;
	color: #000;
}

#div a:hover {
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}

Missään linkissä ei ole taustaväriä. Jos vaihtaa 'a':n 'li':ksi, niin toimii, mutta ei IEssä.

Tarvitsisin siis sen vain tuohon :hoveriin, mutta testasin muihinkin.

[jonesb]

Kannattaa määritellä useampia kirjaintyyppejä. Jos helveticaa ei ole, niin sitten arial tms.

[Jamac]

<ul>
<a><li></li></a>
</ul>

Veikkaisin että laiton merkkaus: <a> on inline elementti ja <li> on lohkoelementti. Eli <li><a></a></li>

background: rgba(0, 0, 0, 0.5);

CSS3, meinaatko että toimii kaikkialla, IE???

[MiniMe]

Ihan vain mielenkiinnosta. Jos rakenne on kerta:

Koodi: Valitse kaikki

<div>
    <ul>
        <a><li></li></a>
   </ul>
</div>

Niin miksi css:ään div on merkattu id:ksi. Vai onko esimerkki html:ssä vain oikaistu id:t pois?
Koodi:

Koodi: Valitse kaikki

#div {
   position: absolute;
   top: 300px;
   left: 30px;
   padding: 0;
}
...

Ja jotta hover-efekti toimisi myös IE:llä, se pitää määritellä a:lle.
Helpointa lienee:

Koodi: Valitse kaikki

HTML:
<div id="valikko">
    <ul>
        <a><li></li></a>
   </ul>
</div>

CSS:
#valikko a:hover {
color: #f00;
}

[jhalmu]

jep yleensä kannattaa tosiaa merkata useampi fontti, esim mulla yleisin käytössä ollut on tyylillä font: 11px verdana, arial, sans-serif eli fontin suku vielä perään. Ja noitahan voi olla sitten vaikka kuinka. Tosin näissäkin piilee seuraava hauskuus, että jokin fontti joka on vaikkapa pc koneessa ja linux koneessa niin se onkin kirjoitettava erilailla; toisessa isolla alkukirjaimella ja toisessa pienellä. Tähän auttaa google ja tutkiminen ja perehtyminen.

Nyt unohdin jo tuon divijutun, kun tää foorumi ei näytä noita viimeisiä viestejä :-(

edit: kävin lunttaamassa. itse merkkaan nuo linkit näin:

Koodi: Valitse kaikki

a:link, a:active,a:visited {
text-decoration:none;
}

Koodi: Valitse kaikki

a:hover {
text-decoration:underline;
color: red;
}

nämä vähän lyhennettynä. Eli siis myös link, active ja visited, varsinkin visited koska joskus oon jäänt ihmettelemään miksi ei toimi, mutta linkki oli jo "visited"

[Macpoika]

Niin miksi css:ään div on merkattu id:ksi. Vai onko esimerkki html:ssä vain oikaistu id:t pois?

Kyllä. Ongelma olis siis, että a:han ei saanut laitettua taustaa. Ongelma korjaantui sillä, että laitoin a:t li:den sisään. Nyt ongelma on se, että a:han ei saa width:iä tai length:iä. Kokeilen laittaa a:n display:ksi block:in.

Mielenkiintoista tekstiä kun siellä vilisee koodia.

[cheets]

Tietääkseni a ei tue width tai height määrittelyä. Ja mielestäni jos linkille ruvetaan sanomaan minkä pituinen ja korkuinen sen pitää olla, niin on jossain mennyt pahasti vikaan. Kokoja varten on ihan eri elementtejä olemassa.

Lisäksi tuo

Koodi: Valitse kaikki

#div

on kyllä niin epästandardia, jos haluat kaikille diveille samat määritykset nii laitat pelkästään

Koodi: Valitse kaikki

div

Jos haluat yhdelle diville määritykset niin silloin id toimii ja voit kirjoittaa css:ään joko

Koodi: Valitse kaikki

div #valikko

tai

Koodi: Valitse kaikki

#valikko

Luokkaa pitää käyttää jos haluat määrityksen useammalle diville, muttet kaikille, sehän menee esim.

Koodi: Valitse kaikki

.valikko

Vastaavasti merkinnät koodiin

Koodi: Valitse kaikki

<div id="valikko">

tai

Koodi: Valitse kaikki

<div class="valikko">

[Macpoika]

Tietääkseni a ei tue width tai height määrittelyä. Ja mielestäni jos linkille ruvetaan sanomaan minkä pituinen ja korkuinen sen pitää olla, niin on jossain mennyt pahasti vikaan. Kokoja varten on ihan eri elementtejä olemassa.

Lisäksi tuo

Koodi: Valitse kaikki

#div

on kyllä niin epästandardia, jos haluat kaikille diveille samat määritykset nii laitat pelkästään

Koodi: Valitse kaikki

div

Jos haluat yhdelle diville määritykset niin silloin id toimii ja voit kirjoittaa css:ään joko

Koodi: Valitse kaikki

div #valikko

tai

Koodi: Valitse kaikki

#valikko

Luokkaa pitää käyttää jos haluat määrityksen useammalle diville, muttet kaikille, sehän menee esim.

Koodi: Valitse kaikki

.valikko

Vastaavasti merkinnät koodiin

Koodi: Valitse kaikki

<div id="valikko">

tai

Koodi: Valitse kaikki

<div class="valikko">

Sain a:n tukemaan width:iä ja height:ia kun laitoin display:ksi block:in.
En myöskään käytää mitään #div:iä, vaan kuten ylempänä kerroin tuo oli vain esimerkki. Tiedän kyllä nuo asiat kaikki. Opettelin HTML:n ja CSS:n kahdessa päivässä joulukuun keskivaiheilla.

[Jamac]

Sain a:n tukemaan width:iä ja height:ia kun laitoin display:ksi block:in.

Juuri näin, eli määrittelit inline-elementin lohkoelementiksi, tämä onnistuu juuri tuolla "displaylla".

Muistaa kannattaa, kuten tuolla jo aiemmin mainitsin, että lohkoelementtiä ei laiteta inline elementin sisään. Inlinet tulee lohkon tai toisen inlinen sisään.

99,9% varmuudella muistan että inline-elementillä ei ole korkeutta/leveyttä. Block-elementillä, eli lohkoelementillä, sen sijaan voi olla.

[cheets]

Sain a:n tukemaan width:iä ja height:ia kun laitoin display:ksi block:in.
En myöskään käytää mitään #div:iä, vaan kuten ylempänä kerroin tuo oli vain esimerkki. Tiedän kyllä nuo asiat kaikki. Opettelin HTML:n ja CSS:n kahdessa päivässä joulukuun keskivaiheilla.

No se on hyvä Itse olen tässä opetellut yli 10 vuotta ja vieläkin on opittavaa

[OPJ]

No se on hyvä Itse olen tässä opetellut yli 10 vuotta ja vieläkin on opittavaa

Nimenomaan. Allekirjoittaneella on nyt semmoinen epäkäytännöllisen kettumainen probleema ratkottavana, johon en täältä enkä guuglaamallakaan löytänyt vastausta suoraan, joten päätin kysyä, josko jollain olisi parempaa tietoa.

Kysymykseni ja probleema koskee ul li-v alikoita: jostain kumman syystä li-tagien sisällä olevan valikkotekstin/linkin rivivälistys on "liian suuri" ja sitä ei voi muuttaa - en ainakaan ole onnistunut. Mikään muutos div-class-, ul-, li- tai a-määritteisiin ei tunnu tehoavan.

Pahin ongelma esiintyy windows-puolella, sekä IE:ssä että FF:ssä. Testattu Win 98, XP, VIsta ja Mac OS X. Macin FF toisinaan onnistuu näyttämään rivinvälit oikein. IE:hän on ehdottomasti suurin murheenkryyni.

Lyhyesti kerrattuna: valikon kaksiriviset kohdat eivät näytä yhtenäiseltä, vaan rivinvälistys on sama tai lähes sama kuin li-tagien välillä oleva välistys.

Jos joku ystävällinen sielu osaa tuossa auttaa, olisi loistavaa. Ja masokistit voivat tutustua tapaukseen esimerkiksi osoitteessa http://www.p-hkesayo.fi ja sieltä koulutustarjonta/ammatillinen koulutus. toinen alavalikko vasemmalla, vaaleahkon harmaat tekstit.

Kiittää hän.

[Macpoika]

… Kiittää hän.

Ymmärtääkseni li:n display on block? Miten olisi esim. margin-bottom?

[OPJ]

… Kiittää hän.

Ymmärtääkseni li:n display on block? Miten olisi esim. margin-bottom?

Muistaakseni olen kokeillut sitäkin... marginit, baddingit (ei Paddingin Rauleja vielä kuitenkaan) , rivinvälit, miinusmerkiset edellämainitut, ties mitä...

Margin-bottom muuttaa vain ja ainoastaan valikon kohtien välistystä ja se ei ole tarkoitus, vaan li-elementtien rivinvälistys pitäisi saada pienemmäksi/rivit lähemmäs toisiaan. Jos display on inline, homma korjaantui muistaakseni osittain, mutta sitten tuli taas ongelmia sisennysten kanssa.

Debuggaukseen FF-selaimessa käytän firebugia, siinä kun CSS-arvoja voi muuttaa ja katsoa vaikutuksia heti. Mutta kun IE:ssä ei samanlaista työkalua ole, niin voitte kuvitella, onko hermot menneet aika monta kertaa.

Perhana, ehkä en vaan näin yhdeksän vuoden jälkeen vielä OSAA *grin*

[MiniMe]

Eh... Olet varmaan kokeillut line-height määritystä? Nythän siellä ei taida olla sitä määritelty tuolle valikolle erikseen.

[OPJ]

Eh... Olet varmaan kokeillut line-height määritystä? Nythän siellä ei taida olla sitä määritelty tuolle valikolle erikseen.

Kyllä - viittaan edelliseen viestiini. Siis mielestäni olen kokeillut kaikki elementit sisältä ulospäin div-tagiin asti ja muuttamalla "kaikkia" mielestäni tarpeellisia määreitä. Mikään ei auta tai vaikuta. Rivinväli vaan on ja pysyy.

Ongelman on pakko vaan jotenkin liittyä ul li-navigaation juttuihin, koska linkkinä rivinvälistysten määrityksen toimivat.

[Macpoika]

Eh... Olet varmaan kokeillut line-height määritystä? Nythän siellä ei taida olla sitä määritelty tuolle valikolle erikseen.

Kyllä - viittaan edelliseen viestiini. Siis mielestäni olen kokeillut kaikki elementit sisältä ulospäin div-tagiin asti ja muuttamalla "kaikkia" mielestäni tarpeellisia määreitä. Mikään ei auta tai vaikuta. Rivinväli vaan on ja pysyy.

Ongelman on pakko vaan jotenkin liittyä ul li-navigaation juttuihin, koska linkkinä rivinvälistysten määrityksen toimivat.

Niin, kai kokeilit line-height:ia a:han? Olettaen, että kaikki li:n sisällä on linkkiä.

[OPJ]

Eh... Olet varmaan kokeillut line-height määritystä? Nythän siellä ei taida olla sitä määritelty tuolle valikolle erikseen.

Kyllä - viittaan edelliseen viestiini. Siis mielestäni olen kokeillut kaikki elementit sisältä ulospäin div-tagiin asti ja muuttamalla "kaikkia" mielestäni tarpeellisia määreitä. Mikään ei auta tai vaikuta. Rivinväli vaan on ja pysyy.

Ongelman on pakko vaan jotenkin liittyä ul li-navigaation juttuihin, koska linkkinä rivinvälistysten määrityksen toimivat.

Niin, kai kokeilit line-height:ia a:han? Olettaen, että kaikki li:n sisällä on linkkiä.

Kyllä. Siis myös olettamaasi, että kaikki a:n sisällä on linkkiä:

<div class="subnavi2">
<ul>
<li><a>valikko yksi</a></li>
</ul>
</div>

ja niin ees päin

[avpn]

Auttaisiko tämän linkin vinkit tuota rivinkorkeusasiaa?
Unitless line-heights

[MiniMe]

Koodi: Valitse kaikki

.phkyo_subnavi2 ul li {
clear:left;
display:block;
list-style-type:none;
margin:0pt 10px 4px;
padding:0pt;
width:190px;
}

Onko noista clear ja display -arvoista jotain käytännön hyötyä? Miksi et heivaisi niitä vain pois ja lisäisi tuonne:

Koodi: Valitse kaikki

line-height: 12px;

Kyllä juuri tuohon määritellyn line-heightin pitäisi toimia, jos a:lle ei ole annettu jotain sen ohiajavia lisämääritteitä...