[CSS] Overulende css style ???

[Theske]

Goedemorgen,

De bedoeling is om met behulp van een stylesheet slechts een veld (die weer beschikt over meerdere tabellen) uit te printen, en dus de rest van de pagina niet uit te printen.

Ik dacht dat te doen met de volgende style

Cascading Stylesheet:

@media print 
{
  .td_welprinten {
    display: inline;
  }
  * {
    display: none; 
  }
}

Gezien IE geen table-cell ondersteunt heb ik deze gebruikt.

Aan het desbetreffende veld heb ik het volgende toegevoegd::
<td class="td_welprinten" valign="top">

Dit leek mij juist en verwachte dat het zou werken, maar helaas kreeg ik alleen een mooie witte pagina te zien met slechts kop- en voettekst.

Uiteindelijk heb ik alle mogelijkheden in de style gezet, maar ook dit werkte niet...

Cascading Stylesheet:

@media print 
{
  .td_welprinten {
    display: inline;
    display:inherit;
    display:compact;
    display:inline-table;
    display:list-item;
    display:marker;
    display:run-in;
    display:table;
    display:table-caption;
    display:table-cell;
    display:table-row-group;
    display:table-row;
    display:table-header-group;
    display:table-footer-group;
    display:table-column-group;
    display:table-column;
  }
  * {
    display: none; 
  }
}

Het lijkt erop dat de * {display:none; } de rest overruled.

Weet iemand misschien hoe het komt dat bewuste veld ook verborgen wordt bij het printen????

[André]

Verander de volgorde in je bovenste voorbeeld of zet !important achter je inline.

[crisp]

Of maak je 1e rule meer specifiek (hoewel een class-selector al hogere specifiteit heeft dan de * selector - dit lijkt me dus een browserbug).

[ Voor 63% gewijzigd door crisp op 27-10-2005 09:33 ]

[Theske]

ik heb nu hetvolgende....

Cascading Stylesheet:

@media print 
{
  * {
    display: none; 
  }
    .td_welprinten {
    display: inline; !important
  }
}

Maar ook dit werkt niet....
En wat bedoel je precies met het specifieker maken?

[Clay]

met * maak je de (html en ?) body node(s) natuurlijk ook onzichtbaar, als je daarbinnen weer iets inline maakt doet dat natuurlijk niets. Op zich klopt je denkwijze trouwens wel, een classname heeft namelijk een stuk hogere specificity dan het sterretje, die 0 specificity heeft, en dus eigenlijk nooit iets overrulen kan.

[Theske]

Een browser bug.......
Bedoel je dan op IE zelf of toevallig mijn versie.
Ik heb het op meerdere pc's hier geprobeerd, maar het werkte in geen gevallen...
Ook heb ik FireFox geprobeerd, maar ook dat werkt niet.
Het maakt de html tags er binnen in niet meer zichtbaar zeg je, maar die behoren toch ook gewoon tot de class? of zie ik dat nou verkeerd?
Misschien verder een idee hoe ik dit zou kunnen oplossen??

[Clay]

Nee hoor, dat is geen bug.
Iets met display:watdanook; dat ergens inzit met display:none; ga je gewoon onmogelijk zichtbaar krijgen. De parent wordt niet gerenderd door de display:none, en neemt geen flow ruimte in beslag. Iets daarbinnen kan je met een andere display niet ineens - wel - weer in die flow krijgen. Het is niet onzichtbaar, het is er gewoon helemaal niet.

[Theske]

Is er dan een andere manier waarop ik alleen dat ene veld (<td>) kan laten uitprinten?? zonder weer moeilijk te gaan doen met JS door de inhoud van dat veld te kopieren en uit te printen of iets dergelijks...

[crisp]

Theske schreef op donderdag 27 oktober 2005 @ 10:08:
Is er dan een andere manier waarop ik alleen dat ene veld () kan laten uitprinten?? zonder weer moeilijk te gaan doen met JS door de inhoud van dat veld te kopieren en uit te printen of iets dergelijks...

Je zou dan zoiets moeten doen:

Cascading Stylesheet:

table td { display:none; }
table td.td_welprinten { display:table-cell; }

[Theske]

crisp schreef op donderdag 27 oktober 2005 @ 10:30:
[...]

Je zou dan zoiets moeten doen:

Cascading Stylesheet:

table td { display:none; }
table td.td_welprinten { display:table-cell; }

Ook dit werkt helaas niet
Ik snap d'r echt niks meer van
Maar table-cell werkt zowieso niet bij IE kwam ik ergens tegen, omdat het css2 is ofso.
Dus ik heb inline ook geprobeerd, omdat ik ook weer ergens las dat dat wel zou werken...... maar dit mocht ook al niet baten. Ook heb ik important erachter gegooid enz....
Nog meer suggesties, of manieren.. of doe ik iets anders fout misschien??
Ik roep de class op met
class="td_welprinten"... dat lijkt me gewoon goed te zitten. En verder is het dus een td van een tabel. en deze td bezit dus meerdere tabellen enz..... misschien dat het daarmee te maken heeft.
ik hooooop dat jullie me verder kunnen helpen.
Heeft niet toevallig iemand anders zo soort iets gebruikt, waarmee je een bepaald veld van een pagina print?

[crisp]

Ja, met geneste tabellen zal dat wel lastig gaan worden...
En wb IE: ik denk dat een display: block dan netter is dan een display: inline

[Theske]

Ja geneste tabellen, zo noem je dat
Maargoed, het wordt dus vrij lastig om het dan voor elkaar te krijgen? Want block werkt ook dus ook niet.
Misschien suggesties over hoe het dan wel op een zo effectief en efficient mogelijke manier wel kan? Desnoods zonder css, maar wel zodat het dus makkelijk toepasbaar is op elke willekeurige pagina.

[Verwijderd]

Een beetje een vieze oplossing maar je kana ltijd op 100% van de grootte een div eroverheen gooien met een volle kleur, of een background image indien je die gebruikt op je body. Gewoon je body zelf maar namaken in een div, en die dan op z-index 1 zetten, over alles heen dus, en de wel uit te printen dingen geef je een z-index 2

[André]

Maak een aparte stylesheet en link hem gewoon op de normale manier met een link tag. Laat media="print" daar eerst uit en kijk op je scherm hoe heter uit ziet. Zodra je dan alleen het te printent gedeelte zichtbaar hebt kun je media="print" er in zetten. Dat debugged al een heel stuk makkelijker.

[Theske]

Ik ben bezig geweest ermee, maar er komt nog niet heel veel succes uit.
Ik heb het maar eens gewoon geprobeerd met

Cascading Stylesheet:

.td_nietprinten { display:none; }
.td_welprinten { display:block;}

en dan op deze manier bij elk veld aangeven of hij weergegeven moet worden, of niet. Maar dat schiet natuurlijk ook niet op, maar het is in ieder geval een teken dat hij het met deze code none/block het wel hoord te doen.
Alleen dan nu het aangeven dat alles op none moet staan behalve td_welprinten.
Met de code die jij me gaf was het ook niet gelukt, ik heb hier ook wat mee gespeeld....
Verder ben ik er niet uitgekomen...

[Verwijderd]

Dat zou ik dna oplossing met of een server side script als je tabellen toch dynamisch opgebouwd zijn.

PHP:

<td class="
<?php
if($print == TRUE){echo "wel_printen";} else{echo"niet_printen";}
?>
">

En anders met javascript alle tablecells afgaan en kijken of de class wel_printen is, als dat niet zo is een class aanmaken met als waarde niet_printen.

[ Voor 11% gewijzigd door Verwijderd op 28-10-2005 00:13 ]