CSS kérdésem van

[Pjotr]

Szélességre nekem is! Ha megadod a <td> magasságát, lehal. Ha több soros, lehal.

 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Display Block Test</title> 
    <meta charset="iso-8859-2">
    <style>
        * { margin: 0; padding: 0; border: 0; }
        table {  }
        td { width: 100px; height: 100px; }
        a { color: blue; }
        a:hover { color: red; background-color: yellow; }
        td a { display: block; }
    </style>
</head> 
<body>
<table> 
    <tr> 
        <td><a href="#">Link 1 Link 1 Link 1 Link 1</a></td> 
        <td><a href="#">Link 2</a></td> 
        <td><a href="#">Link 3</a></td> 
    </tr> 
</table>
</body>
</html>

[KGigi]

Wow. És tényleg. A colspant és a megadott magasságot sem követi.

 

Teszt 1: Ha a linkeknek megadok fix magasságot, azt leköveti, a height: 100% viszont nem csinál semmit.

 

Teszt 2: Ha a linkeknek 100%-os magasságot adok, a celláknak pedig fix magasságot, akkor jó a sima celláknál, de csak egy cella magasságáig colspan-nel.

 

Teszt3: Ha a cellák magassága százalékban van megadva, a táblázat magassága pedig fix, akkor Firefox alatt tökéletes, Opera alatt viszont a rowspan-es cellában fent és lent is van egy kb. 10 pixeles sáv. De ez még mindig a legjobb próbálkozásom:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>IE display:block test</title> 
<style type="text/css">
table { height: 300px; }
td { width: 120px; height: 100%; } 
a { display: block; } 
a:link, a:visited { background: #f00; } 
a:hover, a:active { background: #00f; } 
</style> 
</head> 
<body>
<div> 
<table> 
  <tr> 
    <td><a href="" style="height: 100%">Link 1</a></td> 
    <td><a href="">Link 2</a></td> 
    <td rowspan="2"><a href="" style="height: 100%">Link 3</a></td> 
  </tr>
  <tr>
    <td colspan="2"><a href="">Link4</a></td>
  </tr> 
</table>
</div>
</html>

[payskin]

Ja, már értem!

 

[payskin]

Ugyanaz* a kód, mint fent, ennyi változtatással:

 

    <style>
        * { margin: 0; padding: 0; border: 0; }
        a { color: blue; }
        a:hover { color: red; background-color: yellow; }
        table { width: 100%; }
        td { width: 33%; height: 100px; background-color: #eef; border: 1px solid #ccf; }
        td * { height: 100%; }
        td a { display: block; }
    </style>

 

 

Izé, pillanat, most össze-vissza van a CSS... Mindjárt rendet vágok... done.

 

*Majdnem ugyanaz

 

a height100%; miatt nem lehet vertikálisan középre biggyeszteni a szöveget.

Vazz, vissza a tervezőasztalhoz... Rájöttem, hogy egyrészt ez nem fog összejönni, hiszen ha kitölti a TD-t, akkor nem tud középre igazítódni. Másrészt ha a TD-k eltérő nagyságúak, akkor az néz ki jobban, szerintem, ha mindenki topon van vertikálisan.

[KGigi]

Ezzel csak az a baj, hogy Pjotr nem ismeri a cellák magasságát. Az enyémnél is ismerni kell a táblázatét, illetve nem lehet középre igazítani a linkeket.

 

Szerk.

Látom közben te is rájöttél. De a cellák magassága sem játszik.

[payskin]

Erõsen így járás esete van a dolognak, úgyhogy valóban javascript irányban kellene gondolkodni...

[payskin]

Mit szóltok egy ilyenhez?

 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Display Block Test</title> 
    <meta charset="iso-8859-2">
    <style>
        * { margin: 0; padding: 0; border: 0; }
        a { color: blue; }
        a:hover { color: red; background-color: yellow; }
        table { width: 100%; }
        td { width: 33%; background-color: #eef; border: 1px solid #ccf; }
        td:hover { background: yellow; cursor: pointer; }
    </style>
</head> 
<body>
<table> 
    <tr> 
        <td><a href="#1"><span>Link 1</span></a></td> 
        <td><a href="#2">Hatott ütött az óra<br>útra kelt az uborka<br>mert a kertet megunta<br>széjjelnéz a városba</a></td> 
        <td><a href="#3">Link 3</a></td> 
    </tr> 
</table>
<script>
(function()
{
    document.onclick = function(e)
    {
        var target = e.target;
        if (target.nodeName == 'A') {
            return true;
        } else {
            for (var i = 0, n = target.children.length; i < n; i += 1) {
                if (target.children[i].nodeName == 'A') {
                    document.location = target.children[i].getAttribute('href');
                }
            }
            while (target && target.nodeName != 'TD') {
                target = target.parentNode;
                if (target && target.nodeName == 'A') {
                    document.location = target.getAttribute('href');
                }
            }
        }
    };
})()
</script>
</body>
</html>

[Pjotr]

Ez így lassú, nem? Ennél jobb használni a jQuery.delegate()-et. Vagy legalábbis nem a document-hez kellene kötni, hanem mondjuk a <table> elemekhez.

 

$('table').delegate('td, th', 'click', function () {
    var $a = $(this).children('a');
    if (!!$a && $a.size() == 1) {
        window.location = $a.first().attr('href');
    }
});

 

Talán mûködik, de mindenképp csak akkor, ha a <td>-ben, <th>-ban 1 <a> van.

[payskin]

Nyilván azért kötöttem a documentre, mert ez egy példa volt, a konkrét oldalon az adott táblához kötném.

 

Miért volna lassú? Pláne a jQueryt is beleszámítva? Nem szeretek jQueryt használni olyan dolgokra, amik anélkül is megoldhatók... Klassz, hogy ezt leírod 6 sorban, de emögött kilométernyi javascript van, ami szerintem bonyolultabb, hosszabb, talán lassabb is, mint az én megoldásom.

[Pjotr]

A teljes document bejárása miatt lassú. Ezért nem is ajánlják a .live()-ot olyan helyzetekben, mikor kiváltható .delegate()-tel. Mondjuk pl. a .click() helyett meg jobb a .live()-ot használni.

 

jQuery-t akkor érdemes használni olyan dolgokra, amelyekhez nem kellene, ha már más miatt úgyis ott van a lapon.

[payskin]

A teljes document bejárása miatt lassú.

Nincs benne teljes dokument-bejárás. Ha , akkor viszlát, egyébként meg előbb a gyerekeket nézi végig (ezt lehet, hogy rekurzívan kéne, attól függ, mennyire bonyolult a TD tartalma), különben meg az apákat

-ig.

---

Ó hülye vagyok! Ennél lehetne egyszerűbb is... Mindjárt kipróbálom...

---

Tessék:

 

...
        } else {
            var links = target.getElementsByTagName('a');
            if (links.length) {
                document.location = links[0].getAttribute('href');
            }
            while (target && target.nodeName != 'TD') {
                target = target.parentNode;
                if (target && target.nodeName == 'A') {
                    document.location = target.getAttribute('href');
                }
            }
        }

Az első for ciklust kidobtam, és inkább a javascripttel végeztetem a piszkos munkát. Rekurziót is beleértve.

---

Na, a while ciklust is kipofoztam, így nem kell annyit ellenőrizgetni. Haladunk!

 

...

            while (target = target.parentNode) {
                if (target.nodeName == 'A') {
                    document.location = target.getAttribute('href');
                } else if (target.nodeName == 'TD') {
                    break;
                }
            }

[payskin]

Összefoglalva:

 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Display Block Test</title> 
    <meta charset="iso-8859-2">
    <style>
        * { margin: 0; padding: 0; border: 0; }
        a { color: blue; }
        a:hover { color: red; background-color: yellow; }
        table { width: 100%; }
        td { width: 33%; background-color: #eef; border: 1px solid #ccf; }
        td:hover { background: yellow; cursor: pointer; }
    </style>
</head> 
<body>
<table id="demo"> 
    <tr> 
        <td><a href="#1"><span>Link 1</span></a></td> 
        <td><a href="#2">Hatott ütött az óra<br>útra kelt az uborka<br>mert a kertet megunta<br>széjjelnéz a városba</a></td> 
        <td><a href="#3">Link 3</a></td> 
    </tr> 
</table>
<script>
(function()
{
    document.getElementById('demo').onclick = function(e)
    {
        var target = e.target;
        if (target.nodeName == 'A') {
            return true;
        } else {
            var links = target.getElementsByTagName('a');
            if (links.length) {
                document.location = links[0].getAttribute('href');
            }
            while (target = target.parentNode) {
                if (target.nodeName == 'A') {
                    document.location = target.getAttribute('href');
                } else if (target.nodeName == 'TD') {
                    break;
                }
            }
        }
    };
})()
</script>
</body>
</html>

[kléni]

<td><a href="#2">Hatott ütött az óra<br>útra kelt az uborka</br>mert a kertet megunta</br>széjjelnéz a városba</a></td>

Őő rosszul látom, vagy ide tényleg </br> van írva, ráadásul Balázstól?

[payskin]

[Pjotr]

Nincs benne teljes dokument-bejárás.

Tényleg, csak nem fejjel lefelé kéne nézni a kijelzõt. De az összefoglalt verzió már sokkal jobb(an tetszik).

 

Egész jót kérdeztem.

[payskin]

Nagyon jót kérdeztél, remek ebéd utáni töprengésre adott okot. Még ha fél lábbal át is lógtunk a JS témába...

[KGigi]

Nem rajtunk múlt, ennek nem így kéne mûködnie.

[payskin]

Fene tudja... valami különbség kell legyen a display: block és a display: table-cell között, lehet, hogy pont ez az. :-)

[advanced]

Egy nagy website-on dolgozom, rengeteg "form" lesz rajta. A designer nagyon szépet alkotott. Azt hiszem közel vagyok a megoldásokhoz, még IE9 is szépen mûködik, de IE8 és IE7 gorombáskodik velem.

Készítettem egy kivonatot: Form issues

(Próbáltam leszûkíteni a kódot minimálisra meghagyva ami csak a template-hez kell, de lehet, hogy maradtak benne fölösleges részek. ) A probléma az, hogy IE8 (és lefelé) az file inputra kétszer kell kattintani, hogy mûködjön, a select pedig egyáltalán nem mûködik. Az összes többi browser-en rendesen mûködik. Minden ötletnek nagyon örülnék.

[Pjotr]

Miért van minden <label> tag-ben? Én nem tudok valamit?

[payskin]

Az engem kevésbé zavar. De miért van a 2. mező -en belül, a harmadik -en kívül, és az elsőben miért nincs ? Ráadásul a labelek nem létező azonosítókra mutatnak. (???)

 

Szóval az a baj, hogy ha ez a "majdnem kész", akkor itt még van meló bőven, mert "spagettiben" igen nehéz hibát keresni.

 

Megnéztem IE9 kompatibilis módban, a file megy egy kattintással is, a select nem. Szerintem a nagy egymásba ágyazódás miatt elkapja valamelyik befoglaló elem (esélyesen pont a ) a kattintást, és nem passzolja le az eseményt a -ig.

 

Egyébként ráengedtem a validatort és nem örült neki. Helyből kiszúrta, hogy

nem lehet -en belül, meg hogy a -ek nincsenek hozzákötve a mezőkhöz, plusz az elgépelések.

[kléni]

Arra van valamilyen megoldás, hogy firefox (5) alatt gyorsabban töltse be a betûtípust, és ne "villogjon" egyet? A local() nem segít, így is oldalbetöltés után 1-2 mpvel jelenik meg, ami hosszú távon eléggé zavaró.

[Kiskalóz]

Van egy popup DIV-em ami szépen meg is jelenik. Az egér mutatójától indul jobbra és lefele.

Hogyan tudnám rávenni, hogy ne jobbra lefele nyissa a div-et hanem kobra-balra50-50%-ba, és lefele?

[payskin]

margin-left: -50%;

 

?

[Kiskalóz]

nem -50% hanem -20% de tökéletes

 

köszönöm!

 

(ha -50%-ot írok be akkor átdobta a képernyõ bal oldalára)