Joo eli aloittelen tässä vasta css:ssän opettelua ja ihmettelen miksi mikään css:ssästä ei toimi sivullani. Huomakaa ikäni olen alle 15-vuotias, sanokaa suoraan mikä vikana ja haukkukaa pystyyn.
Tässä koodit:
etusivulle eli index.html
<!DOCTYPE html> <html> <head> <title>Hellurei!</title> <link href="tyylit.css" rel="stylesheet" type="text/css"> </head> <body bgcolor="white"> <div id="banner" align="center"> <img src="http://therickken.viuhka.fi/therickken.net.png"> </div> <div id="text" align="center"> <div id="linkit" align="center"> <font size="5"> <a href="index.html">Moi</a> <a href="Perkele">Mi2</a> <a href="tue.html">Moi123</a> <a href="kumppanit.html">migru23435</a> </font> </div> <center> <font size="10"> Tervetuloa Therickkeniin!<br> <div id="copyright" align="center"> <center> <font color="black" size="2"> TheRickken (R) Copyright </font> </div> </body> </html>
tyyli.css
ont-style: Tahoma;
border-collapse: collapse;
#banner
{
background: black;
border-left: blue;
border-right: blue;
border-bottom: blue;
border-top: blue;
padding: px;
margin: px;
}
#linkit
{
padding: 0cm;
margin: 0px;
A:visited
{
background: #00af90;
font-style: Tahoma bold;
}
A:hover
{
color: #CC00CC;
font-weight: bold;
}
A:active
{
background:#e861ad;
font-style: Arial;
font-color: #00af90;
}
border-left:10px;
border-right:10px;
border-bottom:650px;
border-top:650px;
}
}
#text
{
text-decoration: none;
background: #e861ad;
border-left-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-top-color: blue;
border-left-style: double;
border-right-style: double;
border-bottom-style:double;
border-top-style: double;
padding: 1cm 1cm 1cm 1cm;
margin: 20px 20px 20px 20px;
padding: 0cm 0cm 0cm 0cm;
margin: 0px 0px 0px 0px;
}
#copyright
{
padding: 0cm 0cm 0cm 0cm;
margin: 0px 0px 0px 0px;
}Aaltoviivat ovat sitten aivan sekasin.
Miksi et kokeile jotain pienempää CSS-esimerkkiä, ja katso toimisiko se. CSS-tiedostossasi on kasa virheitä - en osaa ulkomuistista sanoa mitä CSS-standardi sanoo virheidenkäsittelystä, mutta on hyvin mahdollista että selaimesi voi hyvin ohittaa koko tiedoston, sillä ensimmäinen virhe on heti alussa (oletan tässä siis, että kuten sanoit, mikään CSS-määre ei toimi sivullasi).
HTML:stä: <center> ja <font> -tagit ovat epäsemanttisia, ja (tästä syystä) vanhentuneita, HTML 4:stä alkaen. Vältä niiden käyttöä - niille on paremmat vastineet (CSS-tyylit). Noin yleisellä tasolla, keskitetty sisältö on todellisuudessa huonompi idea kuin miltä se voi aloittelijasta tuntua.
Onko TheRickken rekisteröity tavaramerkki? Jos ei, vältä (R):n käyttöä, vaikkei se tuossa asussaan virallinen merkintä olekaan. Noin sivuhuomiona, www-osoitetta muistuttava teksti (kuten "TheRickken.Net") voi olla huono idea logossa silloin, kun kyseistä osoitetta ei ole olemassa tai hallinnassa.
edit:
Niistä CSS-virheistä:
Ensimmäiset pari määrettä ovat lohkojen ulkopuolella.
font-style määrittää tyylin, ei kirjasinta.
#banner-valitsimen viimeiset määreet ovat virheellisiä (lukarvot puuttuvat).
A:active-lohkon jälkeen tulee lohkojen ulkopuolella olevia määreitä ja ylimääräisiä sulkeita.
Copy & paste kannattaa tehdä huolella.
Tyyliseikka: CSS:ssä on paljon ylimääräistä; esimerkkejä
border: 0; // reuna pois kaikilta puolilta border-color: red; // reuna punaiseksi -||- border: solid red; // reuna joka puolelta näillä määreillä
Lisää laadukkaita kysymyksiä ja laadukkaisiin kysymyksiin laadukkaita vastauksia.
/* Esimerkki CSS, jossa määritetään #esimerkki tunnisteiselle div-elementille reunat. */
#esimerkki{
border: thin solid #000;
}Kysymys THERICKKEN MEGA K00DSTYLEZ:
Oon 15v nobo joka ei osaa k00daa haxorii mut siis haluun siistei vastauxii. Mikä siis on vikana mun 1337 CSS kood!s???!!11oneone
/* Esimerkki CSS, jossa määritetään #esimerkki tunnisteiselle div-elementille reunat. */ kki : valkonen;
Mitä jos lukisit jonkun CSS-oppaan oikein ajatuksella läpi, mahdollisesti kahdesti? Kukaan ei jaksa listata asioita, jotka koodissasi on pielessä - alla jotakuinkin kaikki mikä ei ole väärin.
#banner
{
background: black;
}
A:visited
{
background: #00af90;
}
A:hover
{
color: #CC00CC;
font-weight: bold;
}
A:active
{
background:#e861ad;
}
#text
{
text-decoration: none;
background: #e861ad;
padding: 1cm 1cm 1cm 1cm;
margin: 20px 20px 20px 20px;
}
#copyright
{
padding: 0cm 0cm 0cm 0cm;
margin: 0px 0px 0px 0px;
}Ei jumankauta, oikeasti. Opettele lukemaan!
HTML:ssä linkkaat tiedoston tyylit.css mutta ilmeisesti sen nimi onkin tyyli.css.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Noita kahta josset saa läpi, niin sun on ihan turha muita ongelmia alkaa keksiäkään. Ja koska sulla on ideana käyttää CSS:ää, niin sitten otetaan HTML:stä pois tasan kaikki tyylimäärittelyt.
Ei ollenkaan font-tageja, ei ollenkaan align-attribuutteja, ei bgcoloria, ei mitään.
/* tämä pois */
ont-style: Tahoma;
/* tämä pois */
border-collapse: collapse;
/* sisensin */
#banner {
/* background-color riittäisi */
background: black;
/* nämä neljä: border: 1px solid blue; */
border-left: blue;
border-right: blue;
border-bottom: blue;
border-top: blue;
/* näistä puuttuu arvot, voi poistaa jos et tarvitse */
padding: px;
margin: px;
}
/* sisensin */
#linkit {
padding: 0cm;
margin: 0px;
/* tästä puuttui lopetus, lisäsin */
}
/* sisensin */
A:visited {
/* background-color */
background: #00af90;
/* erittele font-family: Tahoma; ja font-weight: bold; – font-stylellä asetetaan yleensä kursivointi */
font-style: Tahoma bold;
}
/* sisensin */
A:hover {
/* oikein! */
color: #CC00CC;
font-weight: bold;
}
/* sisensin */
A:active {
/* background-color */
background:#e861ad;
/* font-family */
font-style: Arial;
/* oikein! */
font-color: #00af90;
}
/* ALKAA: nämä pois */
border-left:10px;
border-right:10px;
border-bottom:650px;
border-top:650px;
}
}
/* LOPPUU: nämä pois */
/* sisensin */
#text {
/* yleensä tällä poistetaan alleviivaus */
text-decoration: none;
/* background-color */
background: #e861ad;
/* korvaa käyttäen border: 3px double blue; */
border-left-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-top-color: blue;
border-left-style: double;
border-right-style: double;
border-bottom-style:double;
border-top-style: double;
/* voisivat olla padding: 1cm; ja margin: 20px; */
padding: 1cm 1cm 1cm 1cm;
margin: 20px 20px 20px 20px;
/* nämä pois */
padding: 0cm 0cm 0cm 0cm;
margin: 0px 0px 0px 0px;
}
/* sisensin */
#copyright
{
/* voisivat olla padding: 0; margin: 0; */
padding: 0cm 0cm 0cm 0cm;
margin: 0px 0px 0px 0px;
}Hyvä suomenkielinen opas css:n ja (x)html:n opiskeluun löytyy täältä.
Kiitos kaikille vaivannäöstänne enköhän tajunnut, että koodini oli täyttä sontaa. Voisiko joku vielä kertoa, että miten tälläinen drop-down navigaatio tehdään ainakin Putkasta Merri tietää sen. :)
Tarkoititkohan tämmöistä?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function mene()
{
var nav = document.getElementById("nav");
window.location = nav.options[nav.options.selectedIndex].value;
}
</script>
</head>
<body>
<select id="nav">
<option value="index.html">Etusivu</option>
<option value="pelit.html">Pelit</option>
</select>
<input type="button" onclick="mene()" value="Mene">
</body>
</html>Hennkka kirjoitti:
Tarkoititkohan tämmöistä?
Oletko koskaan tullut ajatelleeksi HTML-pätkiäsi käytettävyyden kannalta? Oleellista toiminnallisuutta ei yksinkertaisessti saa kätkeä JavaScript-komentosarjojen taakse. (Useimmin näiden pudotusvalikkojen kanssa JavaScriptillä muutetaan lista toimimaan niin, että se 'toimii' heti valinnan jälkeen - ja tuo painike on perinteinen lomakkeen lähetyspainike, joka toimii kaikissa selaimissa. Tarvittaessa koko painikkeen voi JavaScriptillä(!) poistaa näkyvistä sivun latautuessa).
Hmm...Pitääpä miettiä sivujen toimintaa enemmän. Entäs tämä php versio?
<form action="siirry.php" method="get">
<select name="nav">
<option value="index.html">Etusivu</option>
<option value="pelit.html">Pelit</option>
</select>
<input type="submit" value="Mene">
</form>siirry.php
<?php
header('location: '.$_GET['nav']);
?>No tuossa nyt ei ole päätä eikä häntää, koska samantien voisi laittaa linkit noille sivuille. Erityisesti tietoturvan kannalta aika huono idea, koska käyttäjä voi syöttää ihan mitä tahansa tuolle koodille.
Eiköhän nyt tarkoiteta ärsyttävästi eikun hienosti esiin tulevaa valikkoa, kun hiiren vie kohteen päälle. Tätäkin valikkoratkaisua kannattaa miettiä aika tarkkaan.
Niin varmaan. Viestistä ei vain saanut selville, että minkä laista valikkoa haluttiin. No en nyt tänne lähde listaamaan, mitä semmoiseen valikkoon tarvitaan, mutta tästä voisi olla hyötyä siinä tapauksessa.
ps.Ei omastakaan mielestäni tuossa toisessa vinkissäni mitään järkeä ollutkaan.
Tarkoitin tälläistä jonka otin Merrin sivuilta: http://merri.net/xhtml/js_enhanced_css_menu/
Tästä tulee "ummet ja lammet" -postaus... keskittyen vahvasti näiden valikoiden IE-ongelmiin. Lyhyestä virsi kaunis: kaikki CSS:n valikot perustuvat :hoverin pohjalle. Vanhoissa IE-selaimissa :hover toimii kuitenkin vain linkkielementeille.
Tuon viisi vuotta sitten kyhäämäni valikon "huono" puoli on se, että se vaatii juuri vähän ekstraa toimiakseen IE6:lla (HTC-tiedosto) – se mahdollistaa :hoverin mille tahansa elementille. CSS on kuitenkin muutoin universaali, vaikka IE onkin tosi helppo rikkoa pienelläkin muutoksella. Helppo rikkoutuminen on lopputulosta siitä, että tavoitteena on ollut joustava valikon leveys: levein sisältö määrittää sen, miten leveä kukin valikko on. Tämmöinen kikkailu on vaikeaa saada toimimaan vanhoissa IE:n versioissa.
JavaScript-osuus taas on täysin valinnainen, se mahdollistaa vain valikon auki pysymisen vähän pidempään.
CSSplay tarjoaa paljon lisää erilaisia vaihtoehtoja. Osa parempia, osa huonompia. Suurin osa pyrkii välttämään minkäänlaista JavaScriptin tarvetta, mutta toimivat myös jopa IE6:lla.
HTML + TIME -valikko on yksi uudempi mielenkiintoinen tuttavuus. Valikon voi sinänsä suunnitella ensin miten haluaa ja sitten tehdä seuraavat lisäykset:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
muotoon
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:t="urn:schemas-microsoft-com:time">
CSS-lisäys: #valikko ul { behavior: url(#default#time2); }
Sitten kullekin päätason li-elementille tarvitsee määritellä oma ID:
<ul id="valikko">
<li id="v1">
<a href="linkki.html">Päätason linkki</a>Ja avautuvalle valikolle taas tulee begin, end ja timeAction -attribuutit, jotka viittaavat aiemmin määriteltyyn ID:hen:
<ul begin="v1.mouseenter" end="v1.mouseleave" timeAction="display">
<li><a href="eka.html">Ensimmäinen sivu</a></li>
<li><a href="toka.html">Toinen sivu</a></li>
</ul>
</li>
</ul>Eli tämä toimii vanhoissa IE:n versioissa sillä tavoin, että ul-elementille on CSS:ssä määritelty tyyli display: none; ja kun li#v1 mouseenter rävähtää, niin timeActionin display saa aikaan tyylin muutoksen display: block; – vastaavasti kun tapahtuu mouseleave, niin valikko sulkeutuu kun ul-elementin tyyliksi palautuu display: none;
Muut selaimet taas luottavat CSS:ssä määriteltyyn :hover-sääntöön valikon näyttämiseksi.
Sanoisin jo kaikille näille IE6:n paapojille, että haistakaa vee. Jos jonkun yrityksen intra vaatii IE6:n niin yksi hiton hailee. Se syöpä ei silti kuulu internetiin. IE7:kaan ei osaa vielä ~yhtään mitään, mutta taisi olla juurikin nuo selectorit se osa-alue, mitä siinä hieman rukattiin.
Teuro kirjoitti:
No tuossa nyt ei ole päätä eikä häntää, koska samantien voisi laittaa linkit noille sivuille. Erityisesti tietoturvan kannalta aika huono idea, koska käyttäjä voi syöttää ihan mitä tahansa tuolle koodille.
Tietoturvalla ei ole tässä mitään tekemistä. Antaa käyttäjän syöttää itselleen ihan mitä tahtoo.
The Alchemist kirjoitti:
Tietoturvalla ei ole tässä mitään tekemistä. Antaa käyttäjän syöttää itselleen ihan mitä tahtoo.
Jospa siis annetaan syöteeksi ?nav=../salainen/kansio/asetukset.xml, niin tuo scripti menee mukisematta kyseiseen paikkaan. Eli kyllä sillä tietoturvalla on hiukan väliäkin.
Teuro, eihän se skripti mene mihinkään. Skripti vain kertoo selaimelle, minne mennä. Käyttäjä pääsee siis aivan täsmälleen samaan tulokseen kirjoittamalla kyseisen tekstin suoraan osoiteriville.
Se miksi lähdin IE6:sta höpöttämään on se, että se sattuu olemaan yksi tuon linkitetyn esimerkin olennaisimpia asioita. Omilla sivuilla sen voi onneksi jättää huomioitta. Innostuin silti kirjoittamaan asiasta enemmän kun satuin löytämään ihan vain muutaman kuukauden vanhoja ratkaisuja vanhaan haasteeseen. Jos se tekee IE6-paapojan, niin voi balrogin peräpää sentään jos se nostaa myöhäisangsteja.
Tähän väliin sitten odotellaan, että Rickken saisi aikaiseksi kyhätä edes jonkunlaista omakokeiltua valikkoyritelmää näytille, niin voi taas vaihteeksi paneutua ihan itse asiaan eikä sen viereen.
Anteeksi vastaukseni myöhään, mutta voitteko antaa jotain esimerkkiä tuollaisesta sivusta, jossa ei olisi muuta höskää. Ei oikein uppoa.
Tästä vielä, että onko vastoin "sääntöjä" käyttää divejä sekä tableja samassa sivustossa?
On vastoin "sääntöjä" käyttää tableja sivun osien asetteluun, eikä tämä riipu mitenkään siitä, onko sivulla käytetty lisäksi divejä vai ei. Taulukon on tarkoitus esittää taulukkoon sopivaa tietoa kuten vaikkapa tässä C++-oppaassa. Siihen sen käyttö on aina ja jokaisessa tilanteessa sallittua. Lähes kaikki muu käyttö on vastoin "sääntöjä".
Myöskään divejä ei ole millään tavalla pakko käyttää asetteluun, vaan esimerkiksi linkkilista voi olla ul-elementti ja sen voi asetella paikalleen suoraan ul-elementtinä.
Miksi yrität hypätä suoraan tuollaiseen melko mutkikkaaseen asiaan kuin drop-down-valikkoon? Opettele ensin perusasiat: miten CSS:ää kirjoitetaan sivulle, millaisia ominaisuuksia on olemassa ja mitä niillä edes suunnilleen voi tehdä.
Metabolix: Tartitsisin sitä yhdelle toiselle sivulleni. Kiitos tuosta linkistä sieltä löytyi juuri paljon kaikkea jännää ;)
Aihe on jo aika vanha, joten et voi enää vastata siihen.