Keskustelu: Nettisivujen teko: Miten saan default arvon css:lle

Hei.

Miten saan <ul> ja <li> tagit näkymään siten, kun css:ää ei olisi käytetty ollenkaan?

Eli minulla on valmis sivupohja ja style.css on täynnä viittauksia, missä mainitaan ul ja li esim:

#menu ul { }
#page ul { }
#page ul li { }
#menu ul { }

Mitä pitäisi kirjoittaa css-tiedostoon, jotta voisin lisätä yhteen kohtaan sivustoa "normaalin" <ul><li> setin, eli siten, että sivuilla näkyisi
ne mustat pallurat?

Kuten tekstistä käy ilmi, olen ihan nolla css:ssä.

EDIT: Tietysti niin, ettei jo olemassa olevat <ul><li> muuttuisi.

Ei ole muuta keinoa kuin määritellä toivotut tyylit uudelleen. Esimerkiksi palluroihin vaikuttaa list-style-type. Muut "vääriksi" muutetut tyylit voit etsiä selaamalla CSS-tiedostoa tai katsomalla selaimen kehityslisäosalla, mitä tyylejä elementtiin kohdistuu.

Näin pelkäsinkin. Kiitos Metabolix

En ymmärrä. Vaikka jokaikiseen paikkaan laitoin:

list-style-type:circle;
niin en saanut näkymään palleroita (ul-li)

Sain kuitenkin hoidettua tilanteen sillä, että käytä &bull merkkiä ja näin homma hoitui.

Onko ihan mahdoton ajatus katsoa selaimen kehitystyökaluilla, millaiset tyylit listaa koskevat? Sieltä näkee helposti, miksei oma tyyli toimi.

No ei se ollut. Syykin selvisi aika helposti.

css tiedoston alussa oleva määritys aiheuttaa sen, ettei pallukat näy:

* {
	margin: 0;
	padding: 0;
}

Tuo on vähän ongelmallinen, koska jos lisää padding arvoa, niin sivun oikeassa laidassa oleva linkkirivi menee otsikkoonsä nähden ihan liian sivuun.

Täytyy pähkäillä jotain. Kiitos taas metabolix

Nyt olet kyllä jotenkin hukassa CSS:n perusasioista. Kun haluat muuttaa yhden ainoan listan ulkonäköä, sinun ei tietenkään pidä koskea noihin sääntöihin, jotka vaikuttavat jokaiseen sivulla olevaan elementtiin. Tee sen sijaan omalle listallesi korvaavat säännöt. Pääsääntöisesti tarkempi valitsin (kuten ul.normaali) ohittaa epätarkemmat (kuten * tai ul).

<ul class="normaali">

ul.normaali {
	padding-left: 2em;
}

Voit myös kokeilla tätä:

ul.normaali {
	list-style-position: inside;
}

Ariel kirjoitti:

Miten saan <ul> ja <li> tagit näkymään siten, kun css:ää ei olisi käytetty ollenkaan?

Siten, että et käytä CSS:ää lainkaan, et ainakaan sellaista, mikä voisi suoraan tai epäsuorasti vaikuttaa ul- tai li-elementteihin.

lainaus:

Eli minulla on valmis sivupohja ja style.css on täynnä viittauksia, missä mainitaan ul ja li esim:

#menu ul { }
#page ul { }
#page ul li { }
#menu ul { }

Mitä pitäisi kirjoittaa css-tiedostoon, jotta voisin lisätä yhteen kohtaan sivustoa "normaalin" <ul><li> setin, eli siten, että sivuilla näkyisi
ne mustat pallurat?

Homma ei mene noin, vaan niin, että säännöt kirjoitetaan siten, että ne koskevat vain niitä elementtejä, joita niiden halutaan koskevan. Voit lisätä sivulle ul-elementin, joita nuo säännöt eivät koske, kunhan se ei ole sellaisen elementin sisällä, jossa on id=menu tai id=page. Jos tämä ei onnistu, jotain pitää muuttaa HTML:ssä tai CSS:ssä. Pitää ehkä jakaa elementti kolmeen osaan ja käyttää id-määritteen sijasta class-määritettä. Tarkempiin ohjeisiin tarvittaisiin tarkempi tieto siitä, mitä kaikkea sivulla on.

Muuten, se, että näkyy mustat pallukat, on vain tavallinen (ja suositeltukin) selainten oletusarvo. Selaimen tekijä ja käyttäjä voivat muuttaa listan esityksen muunlaiseksi. Ja ne mustat pallukat muuten tuppaavat olemaan erilaisia eri selaimissa. Tämä ei sinänsä ole ongelma, mutta siitä voi tulla ongelma, jos kuvitellaan, että on jotkin kiveen hakatut ”default-arvot”.