/*indeksigrid-sivuni indeksigrid2.css = tyyligrid1 */ * { box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; /*EI BODYSSA PALMUKUVAA*/ /*background-image: url(indeksitaustat/palmut3.jpg); OLI KÄYTÖSSÄ KOKO HOIDOLLE - ASIDE:ssa palmut3Pieni*/ background-color: silver; } h1,h2,h3,h4 { font-family: 'Indie Flower', cursive; } /* header */ header { /*background-color: #B39797; VAIHDOIN rgba(241,241,241,0.8); background-image: url(Ristikot/ristikkoTaustaa.jpg); background-image: url(indeksitaustat/laatikkotausta.jpg); background-image: url("taustakuviksi/Merenneito.jpg"); */ /*linkkivalikon tausta oma Paintissa tekemäni*/ padding: -40px; /*padding: 20px;*/ text-align: center; font-size: 25px; height:200px; } .varitetty_otsikko { /*background-image: linear-gradient(rgb(217, 194, 198),rgb(111, 107, 107)); background-image: url("palloja.jpg");*/ } /* nav label, #purilainen, input -aivan alussa- mutta löytyy hampurilaissäätöjä JOS TÄMÄ ON POISSA KÄYTÖSTÄ - ISOLLA NÄYTÖLLÄ NÄKYY PURILAISEN 3 VIIVAA ALLEKKAIN oranssi HAMPURILAISVALIKKO eli PURILAINEN piiloon JES PURILAINEN TULI NÄKYVIIN JA KLIKKAAMALLA TULI MENUVALIKKO ESIIN kapeat ALEKKAIN - ei toimi netissä ! */ nav label, #purilainen, input { display: none; } /**/ #laatikko { /*width: 800px; */ width: 100%; height: 1500px; /*400*/ border: dotted 5px rgb(62, 62, 63); padding: 40px; margin-left: 10px; /*0.5em;*/ margin-right: 10px; /*0.5em;*/ /*background-color: rgb(146, 136, 155);*/ background-image: url(taustakuviksi/laatikkotausta.jpg); background-repeat: no-repeat; /*MITÄ TARKOITTAA REPEAT?*/ /* border-box, padding-box tai content-box */ background-origin: content-box; /*color: white;*/ } /*Ristikot2-sivulle painikelaatikko EI VOIMASSA*/ /* #painikelaatikko { /* divin ulkoasu - iso alue ja uloin reuna*/ border: 2px grey solid; /*background-color:#F7EAF6; */ background-color: rgb(159, 160, 162); /* divin sisällä asiat aseteltu vasemmalle */ text-align:left; padding-left:10px; /* divin keskitysastuksia */ margin-top:40px; margin-left:auto; margin-right:auto; /* leveys ja korkeus siten, että iso kuva mahtuu divin sisälle ja pikku kuvat myös */ width: 780px; height:550px; /* tarvitaan, jotta iso kuva asettuu oikein divin sisälle */ position: relative; } */ /* Ristikko-linkit menivät hyvää järjestykseen laatikossa 7.9. */ /*#kierto li */ li.kuvagalleria { list-style-type: none; /* pallukat pois */ display:inline; position:relative; float:left; width: 150px; } /*OVALBUTTON2*/ /* li-elementin perusmäärittelyt */ #ovalbutton2 li { float: left; /*jos halutaan painikkeet samalle riville */ list-style-type: none; width: 150px; /* tekstille varattava tila */ line-height: 24px; /* taustakuvan korkeus */ /*text-align: center;*/ margin-bottom: 10px; /* marginaalit sen mukaan, onko painikkeet alekkain vai vierekkäin */ margin-left: 5px; } /* ensin määritellään painikkeen vasen puoli ja teksin muotoilut */ /* kuva asemoidaan vasemmalle ylhäälle (left top) ja kuvasta näytetään yläosa (top) */ #ovalbutton2 a { background: transparent url('oval-orange-left.gif') no-repeat top left; /* PAINIKKEEN VASEN LAITAVÄRI */ display: block; font: bold 13px Tahoma; color: purple; line-height: 24px; /* Sama kuin taustakuvan korkeus --> teksti keskellä riviä */ padding-left: 5px; /* Kuvan vasem. puolen leveys - oli 11px mutta nyt menee vas.puol. uppoaa txtiin */ text-decoration: none; } /* ------------------------------------------------------------------------------------- */ /* Painikkeen oikeapuoli on span-elementin taustakuvana. Kuva asemoidaan ylhäälle oikealle (top right), kuvasta näkyy vain se osa joka mahtuu li-elementin leveyteen */ #ovalbutton2 a span { background: transparent url('oval-orange-right.gif') no-repeat top right; /* PAINIKKEEN oikea LAITAVÄRI*/ display: block; padding-right: 11px; /* Sama arvo kuin edellä padding-left --> teksti keskelle */ } /* ------------------------------------------------------------------------------------- */ /* Hover-kuva esille, kuva asemoidaan alareunastaan -painikk vas puolen sävy */ #ovalbutton2 a:hover { background-position: bottom left; } /* ------------------------------------------------------------------------------------- */ /* Hover kuva esille, kuva asemoidaan alareunastaan -painikk oik puolen sävy */ #ovalbutton2 a:hover span { background-position: bottom right; color: black; } /* ------------------------------------------------------------------------------------- */ /* -------------------------------OVAALINAPPI1 LI (ei UL) jooga------------------------------- */ /*OVAALINAPPI1 Jooga (myös ehkä ristikot? kirjat?)*/ /* li-elementin perusmäärittelyt VALITTI ID-DUPLIKAATISTA! TÄÄ 111 EI OO KÄYTÖSSÄ */ #ovaalinappi111 li { float: left; /*jos halutaan painikkeet samalle riville */ list-style-type: none; width: 150px; /* tekstille varattava tila */ line-height: 24px; /* taustakuvan korkeus */ /*text-align: center;*/ margin-bottom: 10px; /* marginaalit sen mukaan, onko painikkeet alekkain vai vierekkäin */ margin-left: 5px; } /* li-elementin perusmäärittelyt KOKEILEN LUOKKANA */ .ovaalinappi1 li { float: left; /*jos halutaan painikkeet samalle riville */ list-style-type: none; width: 150px; /* tekstille varattava tila */ line-height: 24px; /* taustakuvan korkeus */ /*text-align: center;*/ margin-bottom: 10px; /* marginaalit sen mukaan, onko painikkeet alekkain vai vierekkäin */ margin-left: 5px; } /* ------------------------------------------------------------------------------------- */ /* ensin määritellään painikkeen vasen puoli ja teksin muotoilut */ /* kuva asemoidaan vasemmalle ylhäälle (left top) ja kuvasta näytetään yläosa (top) */ /* FONTTIKOKO ja -VÄRI */ .ovaalinappi1 a { background: transparent url('1vasen.gif') no-repeat top left; /* PAINIKKEEN VASEN LAITAVÄRI */ display: block; font: bold 13px Tahoma; color: purple; line-height: 24px; /* Sama kuin taustakuvan korkeus --> teksti keskellä riviä */ padding-left: 5px; /* Kuvan vasem. puolen leveys - oli 11px mutta nyt menee vas.puol. uppoaa txtiin */ text-decoration: none; } /* ------------------------------------------------------------------------------------- */ /* Painikkeen oikeapuoli on span-elementin taustakuvana. Kuva asemoidaan ylhäälle oikealle (top right), kuvasta näkyy vain se osa joka mahtuu li-elementin leveyteen */ .ovaalinappi1 a span { background: transparent url('1oikea.gif') no-repeat top right; /* PAINIKKEEN oikea LAITAVÄRI*/ display: block; padding-right: 11px; /* Sama arvo kuin edellä padding-left --> teksti keskelle */ } /* ------------------------------------------------------------------------------------- */ /* Hover-kuva esille, kuva asemoidaan alareunastaan -painikk vas puolen sävy */ .ovaalinappi1 a:hover { background-position: bottom left; } /* ------------------------------------------------------------------------------------- */ /* Hover kuva esille, kuva asemoidaan alareunastaan -painikk oik puolen sävy */ .ovaalinappi1 a:hover span { background-position: bottom right; color: black; } /* ------------------------------------------------------------------------------------- */ /* -------------------------------LI------UL-------punainen tausta linkissä------------------------------------- */ /* ------------------------------------------------------------------------------------- */ /* ----------KUN OTIN KAIKKI POIS NIIN ristikko, ruuat, jooga PAINIKKEET MENI ok-näköisiksi vas.puolen osalta!!!! MUTTA linkkialueet ja väliviivat ym. linkkiasetukset katosivat tietenkin------------------ eliminoin li a pois painikkeet normalisoituivat, palautin takaisin ja aloin testaamaan yksittäisiä asetuksia paddingin poisto auttoi painikkeiden normalisointiin */ /*NÄMÄ LI-asiat vaikuttavat RUUAT- ja JOOGA-DIVIN ovaalinapin LI-ASIOIHIN MYÖS, kuten vasen navin ja oikean navin asioihin linkkipainikkeista jätin UL:it pois - otti painikkeisiin vasen- ja oikeanaveille tarkoitetun linkkialueen UL - piti ottaa Ristikko-sivulta ovalbutton2-diveist pois UL:it sekä Menu-linkistä pois koska teki muuten harmaat laatikot, joissa violetit pyöristyneet reunat - tehden linkkialueen*/ /* Vertical Navigation Bar LINKKIOSIO */ /* To build a vertical navigation bar, you can style the elements inside the list, in addition to the code from the previous page: */ /* LI a - KUN TÄMÄ POIS, linkkipainikkeet normalisoituivat */ li a { display: block; /* width: 150px; TÄMÄ VAIKUTTI LINKKILAATIKOSSA TEKSTIALUEEN LEVEYTEEN, jos esim. 50 oikea puoli linkkipainikekuvasta lyhenee! - KUN OTIN POIS KÄYTÖSTÄ LEVEYS ON LEVEIMMÄN TEKSTIN MUKAINEN*/ color: rgb(184, 12, 112); /*LINKIN VÄRI*/ /* padding: 8px 16px; KUN TÄMÄ POIS, linkkipainikkeet normalisoituivat*/ text-decoration: none; /* ks. alla selitys */ } /* display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want) width: 60px; - Block elements take up the full width available by default. W e want to specify a 60 pixels width */ /* What does text-decoration do? The text-decoration-style property sets the style of the underline on links and the underline, overline, or line-through on any text with text-decoration applied. Mitä tekstin koristelu tekee? Text-decoration-style -ominaisuus määrittää linkkien alleviivauksen tyylin ja minkä tahansa tekstin koristelua käyttävän tekstin alleviivauksen, yliviivauksen tai läpiviivauksen tyylin.*/ /* You can also set the width of