Css und if-clause

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Liebe/-r Experte/-in,
ich habe eine Frage:
Kann ich in einem css -Style-Bereich ein if unterbringen?

.page-number {  
 text-align: center;  
}  
 .page-number:before {  
 content:counter(page) ;  
 }

Und zwar geht es um die pdf-Erstellung. Was ich möchte ist, dass die Seitennummerierung erst auf der zweiten Seite startet, bzw. die css Eigenschaften.

Was ich möchte ist sowas wie
[code
if(counter(page)=1){
.page-number {
text-align: center;
}
}
else
{
background-image: url(…/images/bg.gif);

.page-number:before {
content:counter(page) ;
}}
[/code]

Also das ab der zwieten Seite Seitennummer und ein Hintergundbild angezeigt werden.
Vieleicht auch über sowas wie Pfuschlösung, dass man sagt display:hidden wenn page(count)!=1…
Any Idea?
Danke für Anregungen!
Oliver

#2

Also wenn es Dir um PDF ERstellung geht, dann würde ich mich erst mal hiermit:
http://www.drweb.de/magazin/pdf-dokumente-mit-php-er…
beschäftigen.
Ist die elegantere Variante und da kannst Du dann auch mit if arbeiten.

CSS ist (genau wie HTML) keine Programmiersprache, also gibts da auch kein if/else.

#3

Hallo, eine wirkliche Idee habe ich grad nicht, aber CSS ist ja lediglich für die Formatierungen zuständig. Du wirst um den Einsatz einer (serverseitigen) Skriptsprache nicht herumkommen. Beste Grüße und weiterhin viel Erfolg.

j
Liebe/-r Experte/-in,
ich habe eine Frage:
Kann ich in einem css -Style-Bereich ein if unterbringen?

.page-number {  
> text-align: center;  
> }  
> .page-number:before {  
> content:counter(page) ;  
> }

Und zwar geht es um die pdf-Erstellung. Was ich möchte ist,
dass die Seitennummerierung erst auf der zweiten Seite
startet, bzw. die css Eigenschaften.

Was ich möchte ist sowas wie
[code
if(counter(page)=1){
.page-number {
text-align: center;
}
}
else
{
background-image: url(…/images/bg.gif);

.page-number:before {
content:counter(page) ;
}}
[/code]

Also das ab der zwieten Seite Seitennummer und ein
Hintergundbild angezeigt werden.
Vieleicht auch über sowas wie Pfuschlösung, dass man sagt
display:hidden wenn page(count)!=1…
Any Idea?
Danke für Anregungen!
Oliver

#4

Hallo Oliver,
if-Anweisungen und ähnliches gibt es in CSS nicht, da CSS eine reine Deklarations- und keine Programmiersprache ist.
Dein Problem müsste man also anders angehen.
Leider weiß ich nicht, wie dein Dokument-Quelltext aufgebaut ist, ob es sich um HTML, XML o. ä. handelt.
Ich schreibe einfach mal kurz meine Gedanken dazu auf:

Man kann das soundsovielte Element eines Selektors im Dokument mit der :nth-of-type Pseudoklasse ansprechen.
Beispiel:

Das ist Seite 1Das ist Seite 2Das ist Seite 3Das ist Seite 4…und so weiter.

Dann ließe sich dein Ansatz zum Beispiel so lösen:

document page:before {
content: counter(page);
…
}

Um davon jetzt die erste (zweite, dritte, usw.) Seite auszunehmen, schreibst du einfach:

document page:nth-of-type(1):before {
display: none;
}

Damit wird das erste -Element des Dokuments ausgewählt.

Das lässt sich übrigens nicht nur mit einfachen Zahlen angeben, du kannst auch viel kompliziertere Angaben („jedes 2. Element“) etc. machen.
Eine gute Zusammenfassung dazu gibt es (auf englisch) zum Beispiel hier:
http://css-tricks.com/how-nth-child-works/

Im Übrigen solltest du aber auch schauen, ob das entsprechende Umwandelprogramm, mit dem du deinen Code in eine PDF-Datei überführst, diese CSS-Selektoren unterstützt. Moderne Browser tun das auf jeden Fall.

Ich hoffe, ich konnte dir weiterhelfen.
Gruß, Florian

#5

Hi,
waow, das war schnell! Danke erstmal.
Hm, mitg fpdf habe ich es am laufen.
Nur leider bietet fpdf so gut wie keine Formatierungsmöglichkeiten.
Es scheitert schon an einem simplen -
Bislang habe ich eine simple textarea genutzt.
Nun möchte ich das Ganze etwas komfortabler haben und den tinymce einbinden. Einfach um ZB einen Satz in Rot dar zu stellen.

Nun könnte ich natürlich mit einem Wahnsinns aufwand eine eigen Funktion schreiben, welche mit massig str_replace das ganze ins fpdf Format prest.

Aber dann scheitere ich am zweiten Schritt. Und zwar bin ich aktuell bei dompdf angelangt. Dort wird einfach die gesamte Ausgabe als langer string in eine Var geschrieben. Die wird dann geparst.

Ziel von Schritt 2 wäre, dass man einfach bei allen Projekten einen Button einfügt und auf Knopfdruck von jeder Seite ein pdf machen kann.
Also if(!pdfknopf) echo $html-ausgabe; else write_pdf($html-ausgabe);

Gruß
Oliver

#6

Hi,
waow, das war schnell! Danke erstmal.
Hm, mitg fpdf habe ich es am laufen.
Nur leider bietet fpdf so gut wie keine Formatierungsmöglichkeiten.
Es scheitert schon an einem simplen -
Bislang habe ich eine simple textarea genutzt.
Nun möchte ich das Ganze etwas komfortabler haben und den tinymce einbinden. Einfach um ZB einen Satz in Rot dar zu stellen.

Nun könnte ich natürlich mit einem Wahnsinns aufwand eine eigen Funktion schreiben, welche mit massig str_replace das ganze ins fpdf Format prest.

Aber dann scheitere ich am zweiten Schritt. Und zwar bin ich aktuell bei dompdf angelangt. Dort wird einfach die gesamte Ausgabe als langer string in eine Var geschrieben. Die wird dann geparst.

Ziel von Schritt 2 wäre, dass man einfach bei allen Projekten einen Button einfügt und auf Knopfdruck von jeder Seite ein pdf machen kann.
Also if(!pdfknopf) echo $html-ausgabe; else write_pdf($html-ausgabe);

Gruß
Oliver
.

#7

Hey,
das hört sich super vielversprechend an!
Im Prinzip scheint es da s zu sein, was ich suche:
Hallo WeltDas ist Seite 2Das ist Seite 3Das ist Seite 4…und so weiter.

Ich schau mal! Danke erstmal!!!
Oliver

#8

Hallo

CSS ist eine Beschreibungssprache („wie ist etwas“), keine Programmiersprache („wie geht etwas“). Daher gibts keine Verzweigungen.

Das einfachste was du machen kannst ist die Page Selectors gemäß dem aktuellen Draft von CSS3 zu nutzen:

@page {
@bottom-center { content: counter(page); }
}
@page:first {
@bottom-center { display:none; counter-reset: page 0; }
}

Kann aber sein, dass das nicht in jedem Browser unterstützt wird. Die größten müssten das aber können. Display:none verhindert dass auf der ersten Seite die Nummerierung angezeigt wird. Desweiteren beginnt die Nummerierung bei 0, damit die 2. Seite (da wo die Nummerierung starten soll) eine 1 steht.

Hab ich jetzt aus dem Kopf rekonstruiert unter zuhilfenahme des W3C-Draft: http://www.w3.org/TR/css3-page/#page-properties

Hoffe es hilft dir

#9

Du kannst das einfach und schnell über externe CSS Dateien lösen, z.B.

if ($_GET[Page]
}
else {
echo "
}

Das ganze natürlich im HEAD Bereich deines PHP Scriptes. Direk im CSS ist das nicht möglich.

#10

Hallo,
danbke für die superschnelle Antwort!
Hm, ich bin nun nicht so der css-Spezi.
Bei mir steht im css halt:

.page-number {
text-align: center;
}
.page-number:before {
content:counter(page) ;
}

Sehe ich das richtig, dass ich dann das @page ersetzen müsste durch .page-number?
Einen ähnlichen Ansatz habe ich bekommen à la:

document page:nth-of-type(1):before {
display: none;
}

Aber das funktioniert leider nicht. Dann wird alles versteckt.
Gruß
Oliver

#11

Ohne den restlichen Quellcode ist das schwer zu sagen was man machen muss.

Kannst du mir ein Beispiel zukommen lassen (html+css mit etwas dummy-text), dann schau ich mal drüber. Dann kann ich dir sagen, was du ändern musst. Wenn du nicht willst, dass das öffentlich sein soll, schicks mir per privater Nachricht

#12

Ok. Superfettes Dankeschön:

<?php require_once("dompdf_config.inc.php");
$html='Header and Footer example @page { margin: 2cm; } body { font-family: sans-serif; margin: 0.5cm 0; text-align: justify; } #header, #footer { position: fixed; left: 0; right: 0; color: #aaa; font-size: 0.9em; } #header { top: 0; border-bottom: 0.1pt solid #aaa; } #footer { bottom: 0; border-top: 0.1pt solid #aaa; } #header table, #footer table { width: 100%; border-collapse: collapse; border: none; } #header td, #footer td { padding: 0; width: 50%; } @page { @bottom-center { content: counter(page); } } @page:first { @bottom-center { display:none; counter-reset: page 0; } } hr { page-break-after: always; border: 0; } Example document Author Test Section 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue ......
#13

Oh ($_GET[Page] ist eine feste variable?
Klar, eine Möglichkeit.
Mal sehen, ob dompdf da mitspielt…

#14

Hey,

Kann ich in einem css -Style-Bereich ein if unterbringen?

Nein, in reinem CSS kennt keine If-Abfragen.

Was ich möchte ist sowas wie
[code
if(counter(page)=1){
.page-number {
text-align: center;
}
}
else
{
background-image: url(…/images/bg.gif);

.page-number:before {
content:counter(page) ;
}}
[/code]

Hast Du Dich mal mit :nth child beschäftigt?
http://css-tricks.com/how-nth-child-works/

Ich habe das nicht ausprobiert, aber vielleicht lässt sich da was bauen?

Mehr Ideen habe ich ehrlich gesagt nicht,

sorry
Christian

#15

Hallo Oliver,

im Normalfall wird ja ein PDF irgendwie mit einer php-Methode oder Script generiert. Wäre es da nicht möglich hier per php-if oder ein if in der Programmlogik mit zwei verschiedenen CSS-Klassen zu arbeiten?

Wo genau wird denn das PDF generiert?

Gruß
Gernot Gawlik

#16

Hallo Oliver,
in der CSS3 Page Spezifikation habe ich das „:first“ Pseudoelement gefunden: http://www.w3.org/TR/css3-page/#first (sowie http://www.w3.org/TR/css3-page/#cascading-and-page-c… bei Example 10). Allerdings scheint das noch kein Browser zu unterstützen. Ich vermute auch, dass du mit JavaScript nicht weiterkommen wirst. Ich habe also momentan keine Lösung für dich.
Sorry,
Thomas

#17

Hallo Oliver, hier wird das CSS-Themengebiet fur mich verlassen. Sorry. Da sind Pdf oder PHP-Foren einschlägig. Viele Grüße

#18

In CSS sind solche If-Anweisungen nicht möglich. CSS ist eine Gestaltungs- und Formatierungssprache und keine Programmiersprache.

Mit jquery könntest du vielleicht eine Lösung finden. Siehe z.B. in der jquery API Documentation

#19

Hi,
danke für die schnelle Antwort. Das ist neu, habe ich von gehört, ist aber sicherlich ein Ansatz!
Gruß
Oliver

#20

Hi,
generiert wird mit dompdf. Hm zwei Klassen.
Da scheintg dompdf die Ohren an zu legen.
Aber das machen auch fpdf oder tcpdf oder html2pdf nicht wirklich mit. Man kann zwar die Seitenzahlen ausgeben, aber nicht in eine Var packen.
Ideal wäre natürlich: if($seitenzahl>1) echo " …"; else echo " …";
Gruß
Oliver