[css] Complex probleem voor eenvoudige opmaak

[edeboeck]

Omdat de situatie iets te complex is om in de titel samen te vatten, volgt hier de uitleg van het probleem.
Samengevat: ik wil dat niet-bezochte links en links waarover je hovert, onderlijnd worden, maar niet als ze al bezocht zijn en er niet over hovert. ECHTER, dit mag enkel als de links in een paragraaf staan, dus gebeurt dit met volgende css:

Cascading Stylesheet:

p a:visited {
    text-decoration: none;
}
p a:link, p a:hover {
    text-decoration: underline;
}

De andere links worden ENKEL onderlijnd bij hover, daarvoor dient dit stukje css:

Cascading Stylesheet:

a:link, a:visited {
    color: #455575; 
    font-family: Tahoma, Verdana, Arial;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

Wat is nu het probleem: de webpagina wordt gegenereerd door Joomla en bij gebruik van {mosimage} levert dat volgend stukje op:

HTML:

<p>
  <div class="thumbnailleft">
    <a rel="lightbox[Image]" href="..."><img src="..." alt="..." /></a>
  </div>
  De jonge Duits-Turkse Ibo is ... <a href="..." >url1</a>
   ... tekst ... <a href="..." >url2</a> en <a href="..." >url3</a>. ... nog meer tekst.
</p>
<p>
   ... tekst ... <a href="..." >url4</a> ... tekst ...
</p>

De url's in de eerste paragraaf (url1, url2, url3) worden niet onderlijnd ... url's in paragrafen waarin geen {mosimage} voor de url staat (url4), worden wél goed weergegeven.

Ik heb al verschillende sites rond css afgesurft, maar zoals ik al vreesde is deze situatie te specifiek.
Iemand ideeën?

[Verwijderd]

Door de <div> wordt de <p> afgesloten, want er mag geen div in een p voorkomen, dus gaat de parser er vanuit dat je wel het volgende bedoeld zult hebben:

HTML:

<p>
  </p><div class="thumbnailleft">
    <a rel="lightbox[Image]" href="..."><img src="..." alt="..." /></a>
  </div>
  De jonge Duits-Turkse Ibo is ... <a href="..." >url1</a>
   ... tekst ... <a href="..." >url2</a> en <a href="..." >url3</a>. ... nog meer tekst.
</p><!-- wordt genegeerd -->
<p>
   ... tekst ... <a href="..." >url4</a> ... tekst ...
</p>

Kortom: gewoon geldige HTML genereren, dan kun je beter voorspellen wat er gebeurt. En kun je beter dicteren wat er gebeuren moet.

[crisp]

Dat is simpelweg omdat Joomla in dit geval invalide HTML produceert. Een paragraaf mag geen bloklevel-elementen bevatten, dus wanneer de HTML parser de div tegenkomt zal hij impliciet de paragraaf afsluiten. Bekijk de DOM-tree maar eens van dat stukje markup

Waarschijnlijk zal Joomla wel net als Wordpress een regexp-based paragrafeer-algorithme gebruiken, en dat gaat meestal niet zo lekker

/laat

[ Voor 22% gewijzigd door crisp op 03-02-2008 12:20 ]

[edeboeck]

Cheatah en crsip: bedankt voor de zinvolle input ... dat verklaart inderdaad waarom ik bij "View page source" géén "</p>" zag voor "<div>" en bij "View selection source" wel (die laatste zal wschl gebruik maken van de dom-tree.

Verwijderd schreef op zondag 03 februari 2008 @ 12:14:(snip)
Kortom: gewoon geldige HTML genereren, dan kun je beter voorspellen wat er gebeurt. En kun je beter dicteren wat er gebeuren moet.

Spijtig genoeg is dit geen optie ... we zitten nog wel even vast aan de 1.0.13 (ben overgang naar 1.5 aan het voorbereiden, maar dat duurt nog wel wat.

Dankzij jullie tip gebruik ik een even eenvoudige als doeltreffende work-around: ik laat de paragraaf pas beginnen nà de {mosimage} ... dat is grafisch wel iets minder omdat je met dat lijntje verschil zit, maar dat is dan ook maar zo (gebeurt enkel voor die paragrafen waarin én een {mosimage} staat én een url én die eerste voor de tweede voorkomt.

Tenzij jullie iemand natuurlijk weten weet of dit ook via css-selectors of iets dergelijks kan ... maar dan zou ik moeten kunnen detecteren dat vlak daarvoor zo een div met die class staat (aangezien de tekst dom-gewijs dan onder "<td>" valt en ik andere "<td>"'s heb waarin url's enkel bij hover onderlijnd mogen worden ... en dat lukt me niet ... weet niet eens of het mogelijk is

[ Voor 1% gewijzigd door edeboeck op 03-02-2008 12:49 . Reden: ook anderen mogen het probleem uit het laatste stukje aankaarten ;-) ]

[bRight]

Misschien dat je het een stukje terug naar de root van de DOM tree kunt oplossen door er een div omheen te gooien?

Cascading Stylesheet:

div.bla a:visited { 
    text-decoration: none; 
} 
div.bla a:link, div.bla a:hover { 
    text-decoration: underline; 
}

HTML:

<div class="bla">
    <div class="thumbnailleft"> 
        <a rel="lightbox[Image]" href="..."><img src="..." alt="..." /></a> 
    </div> 
    De jonge Duits-Turkse Ibo is ... <a href="..." >url1</a> 
    ... tekst ... <a href="..." >url2</a> en <a href="..." >url3</a>. ... nog meer tekst. 
    <p> 
        ... tekst ... <a href="..." >url4</a> ... tekst ... 
    </p>
</div>