Avaleht
uus teema   vasta Tarkvara »  WWW »  CSS text-decoration ja alamelemendid märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
Aq
HV kasutaja

liitunud: 01.01.2003
sõnum 08.07.2013 12:01:33 CSS text-decoration ja alamelemendid vasta tsitaadiga
Sattusin huvitava fenomeni otsa, mida ei oska ise seletada. Mul on CMS, mis genereerib menüüelemendid LI loenditena ja paneb aktiivsele loendielemendile külge klassi .current. Miskipärast ei suuda ma aga teha nii, et text-decoration: underline kehtiks ainult selle .current klassiga elemendi, mitte selle alamelementide kohta. Kas keegi oskab öelda, miks allpool toodud koodis CSSi teine rida suudab üle kirjutada küll teksti värvi, aga ei suuda üle kirjutada text-decoration väärtust:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title></title>
<style type="text/css">
   .current { text-decoration: underline; color: blue; }
   .current ul li { text-decoration: none; color: red; }
</style>
</head>
<body>
<ul>
   <li>Esimene</li>
   <li class="current">Teine
      <ul>
         <li>Alampunkt üks</li>
         <li>Alampunkt kaks</li>
      </ul>
   </li>
   <li>Kolmas</li>
</ul>
</body>
</html>

Ja mis oleks mõistlik viis (ilma alamelementidele klassi määramata) saavutamaks seda, et .current element oleks allajoonitud, aga selle alamelemendid ei oleks allajoonitud?
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
19Mart94
HV kasutaja

liitunud: 22.06.2010



Autoriseeritud ID-kaardiga
sõnum 08.07.2013 12:32:27 vasta tsitaadiga
text-decoration-i ei saa nii eemaldada (http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration). Mida mina teeksin - muudaksin CMSi generaatorit seal, kus lisatakse current klass (et tulemus tuleks järgnev):
html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.                 .current {color: blue;}
  8.                 .current span { text-decoration: underline; }
  9.                 .current ul li { color: red; }
  10.         </style>
  11. </head>
  12. <body>
  13.         <ul>
  14.                 <li>Esimene</li>
  15.                 <li class="current"><span>Teine</span>
  16.                         <ul>
  17.                                 <li>Alampunkt üks</li>
  18.                                 <li>Alampunkt kaks</li>
  19.                         </ul>
  20.                 </li>
  21.                 <li>Kolmas</li>
  22.         </ul>
  23. </body>
  24. </html>
Kommentaarid: 33 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 31
tagasi üles
vaata kasutaja infot saada privaatsõnum
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 08.07.2013 12:36:51 vasta tsitaadiga
Aq, ma ei oska seda nüüd hästi seletada aga pmst kõik on õige. Underline tekibki .current classiga elemendile. Kogu (inline) sisu mis seal sees on saab siis selle underline omale. Sa ei saa aga child elemendiga muuta parenti CSSi. Ehk siis .current ul li selector muudab selle sisus oleva elemendi text-decoration'it kuid mitte parenti oma. Antud juhul aga underline tekibki puhtalt parenti külge.


Loodetavasti said aru - ma ei oska seda kahjuks paremini seletada icon_smile.gif

Samas kui sa räägid, et tegu on menüüga siis peaks seal sisus olema ju ka lingid? Ehk siis selline HTML struktuur nagu allpool näha võid. Sellisel juhul saad ju underline'ga mängida A elemendi peal.
html:
  1. <ul>
  2.    <li><a>Esimene</a></li>
  3.    <li class="current"><a>Teine</a>
  4.       <ul>
  5.          <li><a>Alampunkt üks</a></li>
  6.          <li><a>Alampunkt kaks</a></li>
  7.       </ul>
  8.    </li>
  9.    <li><a>Kolmas</a></li>
  10. </ul>

_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Aq
HV kasutaja

liitunud: 01.01.2003
sõnum 09.07.2013 09:40:28 vasta tsitaadiga
Jah, saadetud puhtas HTML/CSS koodis on tõesti võimalik A elemendi peal tegutseda, aga CMSis on niisugune CSS reeglite rägastik, et see ei hakka päris nii tööle. Pean vist jah ikka CMS koodi kallale minema ja veidi korda majja lööma icon_smile.gif
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 09.07.2013 09:43:09 vasta tsitaadiga
Aq, mismõtttes ei hakka tööle? Kõike saab CSSis üle kirjutada ju.
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Aq
HV kasutaja

liitunud: 01.01.2003
sõnum 09.07.2013 10:34:14 vasta tsitaadiga
Jah, isegi leidsin õiged kohad üles!

Tegemist on ühe responsive kujundusega, mis kirjutabki iga ekraanimõõdu jaoks ennast korduvalt üle + custom CSS kliendilt jne. Selles orienteerumine ajab pea päris segamini icon_smile.gif Aga jah, sain pihta kus ja mida pean tegema. Tänud praegu!
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  CSS text-decoration ja alamelemendid
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.