Ausblendung von Zellen

[Nopoman]

Hallo!

Ich habe etwas Probleme mit der Anleitung zum Ausblenden von Elementen über CSS, die hier zu finden ist:

http://aktuell.de.selfhtml.org/tippstricks/css/drucklayout/

Ich schaffe es einfach nicht, Zellen einer Tabelle auszublenden, in einer Zelle ist der Text, der auf dem Ausdruck noch erscheinen soll, die anderen Zellen sollen hingegen beim Druck nicht erscheinen.

Kann mir jemand einen Tipp geben, wie das funktioniert?

Soll ausgeblendet werden:

<tr>
<td>
</td>
</tr>

Soll nicht ausgeblendet werden:

<tr>
<td>
Hier ist der Text.
</td>
</tr>

Soll wiederum ausgeblendet werden:

<tr>
<td>
</td>
</tr>

Ich danke euch!

Nopo

[Tom]

Hello,

da war gerade die letzten Tage ein interessanter Thread zum Thema "Kombination von Klassen"

Man kann einer Zelle mehrere Klassen zuordnen:

@media print
{
  .noprint
  {
    visibility:hidden;
  }
}

[link.http://de.selfhtml.org/css/formate/einbinden.htm#media]
http://de.selfhtml.org/navigation/css.htm#positionierung

Soll ausgeblendet werden:

<tr>
<td class="noprint">
</td>
</tr>

Soll nicht ausgeblendet werden:

<tr>
<td>
Hier ist der Text.
</td>
</tr>

Soll wiederum ausgeblendet werden:

<tr>
<td class="noprint">
</td>
</tr>

Ich danke euch!

Nopo

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Nopoman]

Hallo und danke für Deine Antwort!

Ich schaffe es aber nicht, Zellen auszublenden.

Beispiel:

<td height="110" bgcolor="#D0DFEF" width="103"></td>
<td height="110" colspan="3" bgcolor="#D0DFEF" width="788">
<a href="/"><img border="0" src="/images/logo.jpg" width="800" height="110"></a></td>
<td height="110" bgcolor="#D0DFEF"></p>

Setze ich <p class=noprint> vor den Hyperlink, so wird das Logo ausgeblendet, jedoch nicht der Zellenplatz freigegeben. Vor <td> kann ich die Anweisung zum Ausblenden nicht setzen, da passiert gar nichts. Setze ich die Anweisung um den <table>, so wird alles ausgeblendet, also auch der Text, der eigentlich ausgedruckt werden soll.

Bin dankbar für jeden Tipp!

[Ingo Turski]

Hi,

Setze ich <p class=noprint> vor den Hyperlink, so wird das Logo ausgeblendet, jedoch nicht der Zellenplatz freigegeben.

wie kannst Du denn etwas anderes erwarten, wenn die Zelle eine feste Höhe und Breite hat und die Höhe außerdem ja auch über die benachbarten Zellen beeinflußt wird (und die Breite vermutlich durch die darüber- bzw. darunterliegenden Zellen)?

freundliche Grüße
Ingo

[Nopoman]

wie kannst Du denn etwas anderes erwarten, wenn die Zelle eine feste Höhe und Breite hat und die Höhe außerdem ja auch über die benachbarten Zellen beeinflußt wird (und die Breite vermutlich durch die darüber- bzw. darunterliegenden Zellen)?

freundliche Grüße
Ingo

Ich kann sowas erwarten, weil ich heute schon wieder viel zu lange an JavaScripten gebastelt habe. Da geht die Phantasie einfach mit einem durch ;)

Soweit, so gut: ich habe die Zellen der betreffenden Tabelle soweit ausgeblendet, dass nur noch die Zelle mit dem Text übrig bleibt.

Problem Nummer 1: da diese Zelle ja auch eine fixe Breite hat, passt der Text nicht auf eine DinA4-Seite. Gibt es da eine Angabe, die ich in print.css machen kann, damit der Text sich dem Ausgabemedium anpasst?

Problem Nummer 2: Die Navigation, die aus einem JavaScript besteht, kann nur durch <div id=navigation>, nicht aber durch <p class=noprint> ausgeblendet werden. Warum?

Problem Nummer 3: Das unter "Problem Nummer 2" beschriebene Ausblenden funktioniert beim IE, nicht aber unter Firefox. Wie kann ich die Navigation aber unter beiden Browsern beim Drucken ausblenden lassen?

Seid bitte nachsichtig mit mir, CSS ist nicht meine Welt :)

[Tom]

Hello,

Problem Nummer 1: da diese Zelle ja auch eine fixe Breite hat, passt der Text nicht auf eine DinA4-Seite. Gibt es da eine Angabe, die ich in print.css machen kann, damit der Text sich dem Ausgabemedium anpasst?

Habe ich heute gerade für einge verknotete Seiten gemacht. Das Problem ist, dass die teilweise aus einer Datenbank heraus include(d|t) werden und da manchmal noch absolute Angaben auftauchen. Das ist nicht so prall zu pflegen. Die CSS-Angaben müssen ja im <head> der HTML-Ausgabe gesammelt werden.

Der der Vorgänger dafür kein Konezpt eingebaut hat, habe ich jetzt die Arbeit...

Aber schon ein Tipp:
BreiAngaben für den Druck in cm, Fonts in pt. 17cm für die Breite passen meistens.

Wenn Du also sowas aufbaust, dann denk daran, verteilte CSS-Angaben für Klassen in einem Array "auzusummieren" und dann kannst Du mit ob_start() und ob_end....() arbeiten.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Ingo Turski]

Hi,

Problem Nummer 2: Die Navigation, die aus einem JavaScript besteht, kann nur durch <div id=navigation>, nicht aber durch <p class=noprint> ausgeblendet werden. Warum?

Du willst ein P um ein DIV spannen? Das könnten standardkonforme Browser sehr übel nehmen, wodurch sich Problem 3 erklärt. Abgesehen davon könnte Deine Klasse hier in Konkurenz zur ID stehen und natürlich verlieren.

freundliche Grüße
Ingo

[Nopoman]

Du willst ein P um ein DIV spannen? Das könnten standardkonforme Browser sehr übel nehmen, wodurch sich Problem 3 erklärt. Abgesehen davon könnte Deine Klasse hier in Konkurenz zur ID stehen und natürlich verlieren.

Nein, nein, ich will natürlich kein p um ein div spannen, das macht ja gar keinen Sinn. Mir ging es darum, dass die Navigation durch <script> und </script> umschlossen wird. Wenn ich die Navigation nun in der Druckansicht ausblenden will, so funktioniert das mit p nicht, jedoch mit div. Letzteres jedoch auch nur, wenn man den IE verwendet.

Deshalb meine Frage: wie muss die CSS-Anweisung vor <script> und nach </script> lauten, damit die Navigation in allen gängigen Browsern ausgeblendet wird?

[Ingo Turski]

Hi,

Nein, nein, ich will natürlich kein p um ein div spannen, das macht ja gar keinen Sinn. Mir ging es darum, dass die Navigation durch <script> und </script> umschlossen wird.

ok, aber was steht letztlich im script? Blockelemente? Dann würe ein umschließendes P zwar nicht vom Validator bemängelt, wäre aber trotzdem falsch.

Wenn ich die Navigation nun in der Druckansicht ausblenden will, so funktioniert das mit p nicht, jedoch mit div.

Dan nimm doch DIV und prüfe, ob andre Styles hier evtl. stärker wirken. Wenn's überhaupt nicht klappt, gib dem DIV eine ID.

freundliche Grüße
Ingo

[Nopoman]

Dan nimm doch DIV und prüfe, ob andre Styles hier evtl. stärker wirken. Wenn's überhaupt nicht klappt, gib dem DIV eine ID.

Genau das habe ich ja gemacht!

Die Navigation habe ich mit <DIV id=navigation> und </div> umschlossen. In print.css habe ich navigation folgendermaßen angegeben:

#navigation, form, .noprint {
    display:none;
  }

Wie geschrieben wird die Navigation dann im IE korrekt ausgeblendet, im Firefox jedoch nicht!

Hat jemand eine Ahnung, wieso das so ist und wie man das beheben kann?

[MudGuard]

Hi,

Wie geschrieben wird die Navigation dann im IE korrekt ausgeblendet, im Firefox jedoch nicht!
Hat jemand eine Ahnung, wieso das so ist und wie man das beheben kann?

Wie wärs denn mal mit der URL der Seite, daß man sich das angucken kann?

cu,
Andreas

[Ingo Turski]

Hi,

Die Navigation habe ich mit <DIV id=navigation> und </div> umschlossen. In print.css habe ich navigation folgendermaßen angegeben:

#navigation, form, .noprint {

Du sprichst hier u.a. #navigation an. Es könnte sein, daß eine spätere Definition hierzu dies überschreibt. Steht das Druck-CSS tatsächlich an letzter Stelle?
Möglicherweise stört sich Firefox aber auch daran, daß Du die ID nicht in Quotes gesetzt hast und ignoriert sie.

Ein Versuch wäre vielleicht noch <div id="navigation" class="noprint">.

freundliche Grüße
Ingo

[Louis]

Hallo Nopoman

Setze ich <p class=noprint> vor den Hyperlink, so wird das Logo ausgeblendet, jedoch nicht der Zellenplatz freigegeben. Vor <td> kann ich die Anweisung zum Ausblenden nicht setzen, da passiert gar nichts. Setze ich die Anweisung um den <table>, so wird alles ausgeblendet, also auch der Text, der eigentlich ausgedruckt werden soll.

Was erzählst Du da, ich verstehe kein Wort! Weshalb willst Du <p class=noprint> irgendwohin setzen. Mach doch einfach was Tom vorgeschlagen hat: <td ...deine Anweisungen... class="noprint">
Wo liegt da das Problem? Ich verstehe das nicht.

Gruss
Louis

P.S. innerhalb von <p> darf sowieso kein <td> oder gar <table> sein, das versteht ein sinnvoller Browser selbstverständlich nicht. (Wie soll er auch, das würde ja kein Sinn ergeben, <p> soll ja ein Textabsatz 'darstellen')

[Tom]

Hello,

da war gerade die letzten Tage ein interessanter Thread zum Thema "Kombination von Klassen"

Man kann einer Zelle mehrere Klassen zuordnen:

Da habe ich vorhin auf die Schnelle die Hälfte vergessen.
Die <td> können einer ganz normalen Standardklasse zugeordent werden und dann kann dahinter noch die Klasse noprint angegeben werden, die aber nur dann berücksichtigt wird, wenn sie auch gelesen werden durfte. Ob die Klasse gelesen wird, steuert man mit de Media-Option:

.text
{
  /* die normalen Angaben */
}

@media print
{
  .noprint
  {
    visibility:hidden;
  }
}

[link.http://de.selfhtml.org/css/formate/einbinden.htm#media]
http://de.selfhtml.org/navigation/css.htm#positionierung

Soll ausgeblendet werden:

<tr>
<td class="text noprint">
</td>
</tr>

Soll nicht ausgeblendet werden:

<tr>
<td class="text">
Hier ist der Text.
</td>
</tr>

Soll wiederum ausgeblendet werden:

<tr>
<td class="text noprint">
</td>
</tr>

Ich danke euch!

Nopo

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Zeromancer]

Hallo,

je nach Ausgabemedium greift ein anderes Stylesheet.

Soll ausgeblendet werden:
<tr>
<td>
</td>
</tr>
Soll nicht ausgeblendet werden:
<tr>
<td>
Hier ist der Text.
</td>
</tr>
Soll wiederum ausgeblendet werden:

Dann gib doch eine Klasse oder ID für <tr> an schreibe in das Stylesheet für die Printausgabe für diese Klasse/ID "display:none".

Mit freundlichen Grüßen

André