Keskustelu: Nettisivujen teko: CSS-probleemi

Kun ei muista, niin pitää kysyä. Ongelmana on tietty se, että linkit eivät toimi, kuten eivät myöskään titlet. Vika korjaantuu, jos .yla* divejä ei käytä samalla rivillä, mutta sehän ei tule kysymykseenkään. Hieman epäilen, ettei position: absolute ole korrekti ilmaisu. Etten vain joutuisi jälleen hässimään koko höskää floateilla?

tyyli.css

a{
  text-decoration: none;
  }

a:hover{
  text-decoration: underline;
  }

.ylaprote{
  padding-left: 10%;
  position: absolute;
  font-weight: bold;
  }

.ylahiili{
  padding-left: 31%;
  position: absolute;
  font-weight: bold;
  }

.ylarasva{
  padding-left: 56%;
  position: absolute;
  font-weight: bold;
  }

.ylaoma{
  padding-left: 78%;
  position: absolute;
  }

foo.php

<div class="ylaprote">
 <a href="proteiinit.php" target="iffi"
  alt="Ensisijaiset proteiinilähteet"
   title="Ensisijaiset proteiinilähteet">PROTEIINIT</a></div>
<div class="ylahiili">
 <a href="hiilarit.php" target="iffi"
  alt="Ensisijaiset hiilihydraattilähteet" title="Ensisijaiset hiilihydraattilähteet">
   HIILIHYDRAATTI</a></div>
<div class="ylarasva">
 <a href="rasvat.php" target="iffi"
  alt="Ensisijaiset rasvalähteet" title="Ensisijaiset rasvalähteet">
   RASVA</a></div>
<div class="ylaoma">
 <b alt="Annoksesi proteiinin, hiilihydraatin ja rasvan määrä"
  title="Annoksesi proteiinin, hiilihydraatin ja rasvan määrä">OMA</b></div>

En oikein muista minäkään, mutta

sivu kirjoitti:

absolute
The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

missä sivu on http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme .

Täällä on lelu, jolla voi kokeilla nopeasti.

http://www.w3schools.com/css/tryit.asp?filename­=trycss_position_absolute

Voi että, olipa näppärä sivu. Kun antoi vielä topin, niin johan rupesi toimimaan. Miksi - en tiedä, mutta väliäkö tuolla kun näyttää toimivan. Kerrassaan mainiota. Thak, niinkuin ruotsissa sanotaan.

tyyli.css

a{
  text-decoration: none;
  }

a:hover{
  text-decoration: underline;
  }

.ylaprote{
  position: absolute;
  left: 10%;
  top: 5%;
  font-weight: bold;
  }

.ylahiili{
  position: absolute;
  top: 5%;
  left: 31%;
  font-weight: bold;
  }

.ylarasva{
  position: absolute;
  left: 56%;
  top: 5%;
  font-weight: bolder;
  }

.ylaoma{
  position: fixed;
  left: 78%;
  top: 5%;
  }

edit Ja vielä näppärämmäksi meni, kun heitti nuo topit kokonaan pois. Sen siitä saa, kun on tällainen.

tyyli.css

a{
  text-decoration: none;
  }

a:hover{
  display: block;
  margin-left: -5px;
  padding-left: 5px;
  margin-right: -5px;
  padding-right: 5px;
  margin-top: -2px;
  padding-top: 2px;
  margin-bottom: -4px;
  padding-bottom: 4px;
  background-color: #FFFFCC;
  text-decoration: underline;
  }

    .tyhjaa{
     position: absolute;
     right: 13%;
     font-size: 90%;
     font-weight: bold;
     }

Jotenkin oudolta tuo näyttää, mutta tuntuu toimivan vielä tilapäisesti. Ongelma onkin siinä, että .tyhjaa:n ei tulisi noudattaa yllä mainittua hoverointia laisinkaan. Hakukoneilla on jotain pahaa vastaani, joten kysyn teitin neuvoa - millä <div class="tyhjaa"> saadaan normaaliksi?

Joudut nollaamaan asetukset, eli { margin : 0; padding :0; background : transparent; text-decoration : none; } ovat varmaan ihan riittäviä sääntöjä. Ja noin muuten, jos käytät tuota .tyhjaa luokkaa vain linkkeihin, niin merkkaa a siihen eteen myös: nopeuttaa hivenen sivun CSS:n käsittelyä ja tekee koodista luettavampaa, kun selviää että sitä tosiaan käytetään linkkien kanssa.

Jos tuo jatkaa vielä :hoverin noudattamista, niin lisää vaan a.tyhjaa,a:hover.tyhjaa niin varmasti tottelee. Mitä tarkempi sääntö, sitä suurempi prioriteetti. Eri selaimilla voi olla tulkintaeroja bugien takia.

Komento takaisin. Tämä näyttää toimivan mitä mainioimmin, paitsi että nyt eivät sitten ne muut linkit enää hoveroi. Argh, olen juuttunut suohon.

a{
  text-decoration: none;

a.tyhjaa
  text-decoration: none;
 }

a:hover{
  display: block;
  margin-left: -5px;
  padding-left: 5px;
  margin-right: -5px;
  padding-right: 5px;
  margin-top: -2px;
  padding-top: 2px;
  margin-bottom: -4px;
  padding-bottom: 4px;
  background-color: #FFFFCC;
  text-decoration: underline;

a:hover.tyhjaa
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  background: transparent;
  text-decoration: none;
  }

a.tyhjaa:hover?