zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mehrere Elemente automatisch in div packen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.09.2015, 18:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2015
Beiträge: 3
User221 befindet sich auf einem aufstrebenden Ast
Frage Mehrere Elemente automatisch in div packen

Hallo zusammen,
Ich möchte das Layout einer Webseite so bearbeiten, dass keine der auf ihr abgebildeten Tabellen und Überschriften durch einen Seitenumbruch getrennt werden. Auch die Tabellen in sich sollen sofern sie auf eine DINA4 Seite passen nicht getrennt werden.

In der CSS Datei habe ich diese Regel definiert, die aber nur für die Tabellen funktioniert.

@media print {
h3 {page-break-after: avoid;}
table {page-break-inside: avoid;}
}

Weil das nicht funktioniert hat, habe ich testweise einige Überschriften zusammen mit deren Tabellen in ein div gepackt und mit "<div style="page-break-inside: avoid;">" versehen, was gut funktioniert.

Bsp:
<div style="page-break-inside: avoid;">
<h3>Üerschrift</h3>
<table>
<tbody>
<tr>
<th>Datum</th>
<th>Thema</th>
</tr>
<tbody>
<table>
</div>

Ohne div würde h3 und table im pdf durch einen Seitenumbruch getrennt werden.

Nun zur Frage:
Gibt es eine Möglichkeit durch das CSS mehrere Elemente (hier <h3> und <table>) automatisch in div Container zu packen, sodass man das nicht manuell eintippen muss ?

Danke im Vorraus

Geändert von User221 (07.09.2015 um 18:07 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.09.2015, 01:22
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Nun, Dir geht es offensichtlich um die Druckausgabe.

Da Du für den Druck sowieso eigene Anweisungen erstellen solltest/könntest , könntest du der Table display:block verpassen (page-break funktioniert regelmäßig nur bei Blocklementen), damit sollte sich ein Bruch über mehrere Seiten ebenfalls vermeiden lassen und du sparst Dir das Gefrickel mit zusätzlichen HTML-Elementen. (ich gehe mal davon aus dass es funktioniert)

Rein von der Semantik her würde ich anstelle der Überschrift (h3) hier ein caption-side nehmen. Das ist auch für Maschinen besser lesbar, bzw. zuordenbar.

caption-side: Tabellenüberschrift: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets



Zu deiner Frage übrigens: Nein
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.09.2015, 15:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2015
Beiträge: 3
User221 befindet sich auf einem aufstrebenden Ast
Standard

Hi andir, vielen Dank für deine Antwort.

Obwohl ich glaube, dass table standardmäßig schon ein Blockelement ist, habe ich's mal ausprobiert.
Das Vermeiden von Seitenumrüchen innerhalb Tabellen funktioniert einwandfrei, doch leider wird die Überschrift in der Druckausgab immernoch von der Tabelle getrennt, wenn die Tabelle aufgrund der "page-break-avoid" Anweisung auf die nächste Seite rutscht (Die Überschrift steht dann auf der einen Seite, die Tabelle auf der nächsten). Der Überschrift eine" page-break-after" Anweisung zu verpassen hat in diesem Kontext keine Auswirkung.
hast du dafür noch einen Rat ?
Mit Zitat antworten
  #4 (permalink)  
Alt 08.09.2015, 16:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Naja es gibt schon Unterschiede zwischen Tabellen und Block-Elementen. Tabellen erzeugen zwar auch einen Umbruch, aber sind z.B. nur so breit wie ihr Inhalt, es sei denn man ändert es im CSS. Block-Elemente dagegen nehmen halt die maximal verfügbare Breite ein.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.09.2015, 17:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2015
Beiträge: 3
User221 befindet sich auf einem aufstrebenden Ast
Standard

Achso, das wusste ich nicht.
Und hast du auch ein Idee wie ich das oben beschriebene Problem, wobei die Überschriften von den Tabellen getrennt werden lösen könnte ?
Mit Zitat antworten
  #6 (permalink)  
Alt 08.09.2015, 19:38
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Sofern Du table und h3 getrennt auszeichnest, ist mir das Verhalten schlüssig.
hast du mal über das caption-side nachgedacht/probiert?

Edit: tabellen sind weder block noch inline-Elemente, sondern was eigenes, soweit ich mich erinnere.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (08.09.2015 um 19:41 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
css, div, element, packen, steckn

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV Höhe 100% Daniel86 CSS 12 29.07.2011 13:40
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Probleme DIV Höhe, Anordnung kran CSS 4 07.11.2010 11:23
Im DIV Container das <a> Elemente formatieren VincentSpamn CSS 5 26.08.2009 14:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:02 Uhr.