Wie kann man in einem HTML Template einen Seitenumbruch erzwingen?

Ich bearbeite zurzeit ein HTML Drucktemplate welches aus header body und footer besteht. Nun habe ich einen Ersetzer im Body eingefügt, welcher einen Datensatz automatisch einspielt. Problem ist nun, dass wenn der Datensatz zu groß ist, die Schrift des bodys über der des footers steht, quasi überschrieben. Ich suche nun nach einer Funktion, die den body, sobald er den footer "berührt", auf die nächste Seite schiebt, allerdings nicht komplett, sondern nur der teil, der den footer "überschreiben" würde. Habe es schon mit der page break funktion versucht, leider erfolglos. Falls dies die richtige Funktion ist, bitte ich um eine genauere Erklärung, falls nicht, bitte sonstige Lösungsvorschläge. :)

Vielen Dank im Vorraus!!

3 Antworten

doesanybodyknow

29.01.2016, 15:21

Mit PHP kannst du's lösen. Zähle erstmal wieviele Zeilen auf eine Seite passen. Dann nutze folgendes um zu erfahren wieviele Zeilen dein Datensatz in Anspruch nimmt...

$rows_max = "Maximale Zeilenanzahl pro Seite"
$str = "Datensatz"
$rows = substr_count($str, '/\n|\r/');

if($rows > $rows_max) {
 // Datensatz hier teilen
}

Als kleiner Denkanstoß.

doesanybodyknow

30.01.2016, 09:37

Na gut. Unter Umständen hat tWeuster recht. War ein Schnellschuss

Ich verwende für diesen Zweck html2pdf > www.html2pdf.fr

Einmal konfiguriert werden Seitenumbrüche automatisch erzeugt und - was mir besonders wichtig war - wird man die unschöne URL-Zeile los.

Zudem kann der Seitenbesucher das Dokument auch einfach 'drucktauglich' speichern und bei Bedarf einfach später drucken.

tWeuster

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

29.01.2016, 16:06

Die Antwort von doesanybodyknow kann ich absolut nicht empfehlen! Die Serverseitige Sprache sollte sich um die Bereitstellung der Daten kümmern, nicht jedoch um die Präsentation. Dafür gibt es nun mal html und css. Sobald der User zoomt, eine größere Schrift eingestellt oder schlicht eine andere Schriftart benutzt, kannste die "Lösung" in die Tonne treten.

Also ich hab bevor ich eben gerade recherchierte gedacht es wäre nicht möglich. Doch siehe da, es gibt anscheinend vielversprechende Ansätze:

http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page

PWolff

29.01.2016, 16:19

Mit eigenen Stilangaben für das Medium "Drucker":

https://www.google.de/search?q=html+druckversion+seitenumbruch&ie=utf-8&oe=utf-8

Und an den entsprechenden Stellen Abschnittswechsel einfügen

Geht aber wohl nicht ohne Skript

Vermutlich geht's aber mit Footern

https://www.google.de/search?q=html+druckversion+fu%C3%9Fzeile&ie=utf-8&oe=utf-8

Woher ich das weiß:Berufserfahrung – Software-Entwickler

Kann ich es irgendwie erzwingen, dass externe CSS Konfigurationen vor dem inline Code in der HTML Datei verwendet werden? Jede CSS Einstellung, die ich in einer externen CSS-Datei erstell, wird, wenn im HTML Code die selbe Einstellung nochmal vorhanden ist, von der internen überschrieben.

Beispiel:

Externes CSS:                                              Internes CSS:
z-index:1;                                                 z-index:2;

Im Browser wird der z-index 2 gezogen.

Danke für hilfreiche Antworten!

...zur Frage

Footer Hintergrundfarbe ändert sich nicht?

Hallo,

ich habe hier ein ganz einfachen Footer mit HTML und CSS. Das Problem ist, dass sich die Hintergrundfarbe des Footers einfach nicht ändert und ich keine Ahnung hab, woran das liegt. Habe schon alles versucht, was mir so bekannt ist.

Ich zweifle gerade ziemlich an mir selbst.

HTML:

<footer>   
        <section class="section_footer">
        <div class="social">
            <a href="https://facebook.com" target=”_blank”><i class="fab fa-facebook"></i></a>
            <a href="https://instagram.com" target=”_blank”><i class="fab fa-instagram"></i></a>
        </div>
        <ul class="list">
            <li><a href="Impressum.html">Impressum</a></li>
            <li><a href="datenschutz.html">Datenschutz</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="credits.html">Credits</a></li>
        </ul>
        <p class="footer_text">
            Lorem Ipsum
        </p>
        <p> <a href="#top"><i class="fas fa-arrow-up"></i></a></p>
    </section>
    </footer>

CSS:

footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    background-color: whitesmoke;
}
.section_footer {
    padding: 40px 0px;
}
.social {
    text-align: center;
    padding-bottom: 25px;
    color:gray;
    display: flex;
    justify-content: space-between;
    padding: 0 850px;
    font-size: 50px;
}
.social a {
    font-size: 25px;
    color: inherit;
    width: 40px;
    height: 40px;
    line-height: 48px;
    display: inline-block;
    text-align: center;
    margin: 0 8px;
    opacity: 0.75;
}
.social a:hover {
    opacity: 0.9;
}
footer ul {
    margin-top: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
footer ul li a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
footer ul li {
    display: inline-block;
    padding: 0 15px;
}
footer ul li a:hover {
    opacity: 1;
}
footer section p {
    margin-top: 15px;
    text-align: center;
    font-size: 30px;
    color: #aaa;
}
footer  a i {
    display: flex;
    justify-content: center;
    align-items: center;
}

Danke im Vorraus!

...zur Frage

PHP header Weiterleitung funktioniert auf dem 1&1 Server nicht?

Ich programmiere schon sehr lange PHP, weshalb es nicht an dem Code liegt...

Ein sehr großes Problem. Auf dem lokalen und auch auf einem Internet Server funktioniert mein Code. Als ich alles auf den 1&1 Webserver getan habe und auch die richtige PHP version eingestellt habe ( ist die EINZIGE einstellung für PHP ) funktioniert trotzdem nichts.

Ich habe eine Testdatei erstellt, für testzwecke, damit es leichter ist vielleicht Fehler zu finden. Mit dem ( header(Location: xyz); ) Funktioniert die weiterleitung nicht. Es bleibt einfach auf der gleichen Seite stehen. Ich habe auch vorher kein Echo Befehl, so dumm bin ich nicht.

Beispielsituation; Man loggt sich ein, und bei Fehler soll eine Fehlermeldung kommen, ansonsten einfach aufs Profil weiterleiten, aber NEEEIN man erhält keine Fehlermeldung, was bedeutet, dass man die Verbindung zur Datenbank hat und alles richtig ist, aber man bleibt auf der Loginseite. Dies ist auch beim Ausloggen der Fall. Man sollte zu Startseite weitergeitet werden nach dem ausloggen, aber man bleibt auf der logout seite.

Bitte hilft mir leute. Gibt es ein Fehler vielleicht in PHP 5.6 mit den Header funktionen oder was. Hier mein test code:

html

    head
             title   Test   title
    /head

    body
         
         ?php 

             header("Location: index.php");
          
          ? 
   
    /body

Und auch mit exit; Geht es nicht. Exit ist nicht notwendig "by the way" aber allgemein, es funktioniert einfach nicht.

...zur Frage

MAILTO in JavaScript?

Hallo,

Ich möchte gerne eine Email verschicken, also nach Knopfdruck(Buttonclick) soll das Mailprogramm geöffnet werden. Es soll bereits der Empfänger, der Betreff und ein Teil des Bodys bzw. des Inhaltes gefüllt werden. Ich habe die Mailto- Funktion gefunden in Html. Aber diese ist mir eine zu schlechte Lösung da ich dort alles bereits im html Code einfügen muss. Hat da jemand eine gute Lösung?

...zur Frage

Script Datei an bestimmter Stelle der Website anzeigen?

Guten Tag, ein Freund und ich haben für eine Arbeit unserer Schule, eine Website mit HTML und CSS programmiert. Dazu haben wir auch noch das Spiel Flappy Bird mit der P5 Library (vereinfacht Java-Script Codes) programmiert. Leider wird unser nachgemachtes Spiel erst unter dem Footer angezeigt und nicht in der Body Section.
Wir sind recht neu im Programmieren und wir finden einfach keine Lösung dafür, dass wir das Spiel nach oben verschieben können oder eben, dass es in der Body Section angezeigt wird.
Kann uns hierbei jemand helfen, bitte?

Grüße Alex

...zur Frage

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zur Frage

Ladebalken auf einer homepage erstellen!

Vorerst möchte ich sagen, dass ich bislang nur sehr viel mit html und css gemacht habe! Erst vor kurzem (ca. 1 Monat) kam php dazu!

Nun habe ich auf meiner Seite erst einmal ein Grundgerüst erstellt: body, wrapper (der den Inhalt beinhält und zentriert), header, menü und den footer!

Unabhängig vom Grundgerüst werden nun die Seiten aufgerufen, also Startseite, Seite 2, Seite 3, Impressum etc., das Grundgerüst bleibt immer gleich und muss nicht nue geladen werden! Diese verschiedenen Seiten habe ich mit php eingebunden! Dazu genaueres findet ihr in einem Tutorial, aus welchem ich dieses wissen auch bezogen habe: http://www.youtube.com/watch?v=pLpTmDv18AI&feature=c4-overview&list=UU4iSMp_NB8fMw9bHi7D_Hiw

Die PHP-Datei, die nun meine Startseite, Seite 2, Seite 3 etc. einbindet möchte ich nun einen Ladebalken zu weisen. Das heißt klickt jemand auf eine Seite, bleibt das Grundgerüst bestehen, nur der Inhalt (bzw. die eingebundene PHP-Datei) wird neu geladen, was mit einem Ladebalken veranschaulicht werden soll!

^Und wie dies geht ist nun meine Frage^ Ich freue mich schon im Voraus auf Antworten. Meine Seite ist soweit auch schon hochgeladen: filmchronik.bplaced.net , dort sieht man zwar nicht den php-code doch ist dies vielleicht trotzdem eine Hilfe! :D
Danke

...zur Frage

Dynamic Web App und Thymeleaf CSS einbinden?

Moin.

Statt JSP wollte ich ich nun Thymeleaf umschwenken. Allerdings hab ich bei Thymeleaf Probleme, die CSS Datei einzubinden. Meine Recherchen haben ergeben, dass Thymeleaf von Haus aus in src/main/resources/static/ nach Ressourcen sucht. Die hab ich auch da reingepackt. css/style.css

Mein HTML Dokument sieht die Verlinkung Folgendermaßen aus:

 <link th:href="@{/css/style.css}" rel="stylesheet" />

Meine HTML Seite befindet sich direkt im webapp Ordner.

Ich hab auch versucht die HTML Seite in den templates Ordner zu packen. Leider ebenfalls ohne Ergebnis.

Pro Forma der CSS Inhalt :)

body{
	background-color: red;
}

Hier auch mal ein Bild von der Ordnerstruktur:

...zur Frage

CSS Grid Webseite funktioniert nicht?

Das Layout für die Webseite funktioniert nicht. Ich habe das Problem lange gesucht, aber nicht gefunden. Ich wäre über jegliche Hilfe dankbar.

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    h h h h h h
    c c c c c s
    c c c c c s
    c c c c c s
    c c c c c s
    f f f f f s
}

.footer {
  grid-area: f;
}

.header {
  grid-area: h;
}

.content {
  grid-area: c;
}

.side {
  grid-area: s;
}

HTML-Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
  <nav>
</head>
<body class="container">
  <title>Eigene Webseite von ---</title>
  <header class="header">
    <h1>Hauptseite meiner Webseite</h1>
  </header>
  <main class="content">
    <div id="abstand">
      <h3>Interessen:</h3>
      <ul>
        <li>Technik</li>
        <li>Videospiele</li>
      </ul>
      <u><h3>Ich bin:</h3></u>
      <p>Optimistisch<br>Geduldig<br>Hilfsbereit</p>
      <a id="link" href="https://www.netflix.com/at/">Mein Link</a>
      <div>
        <div id="bild">
          <img src="bild1.jpg" width=300 height=186 alt="Bild über mich">
        </div>
      </div>
      <div id="Motte"></div>
    </div>
  </main>
  <aside class="side">
    <p>News/Einträge</p>
  </aside>
  <div class="daten">
    <footer class=footer>
      <h4>Hier könnte ein Motto stehen</h4>
    </footer>
    <div id="daten">
      <p>---</p>
      <p>--</p>
      <a href="----</a>
    </div>
  </div>
</div>
</nav>
</body>
</html>

...zur Frage

Kann man den css - style auch im <body> - Bereich einfügen?

Guten Abend liebe Community,

ich programmiere momentan mit html/Css; so viel wie ich gelernt habe, kommt der Css-Style im head - Bereich, da dies Funktionen sind, die der Besucher einer Webseite nicht zu sehen braucht (er sieht ja sozusagen das Ergebnis später auf der Webseite).

Nun ist meine Frage: gibt es eine Möglichkeit den css-Style auch im body-Bereich einzufügen und wenn ja, wie ?

...zur Frage

Wie kann man bei Mailchimp einen Banner (eine Bilddatei) breiter als die Darstellung des Body machen?

Wir arbeiten am Design unseres Newsletter, der per Mailchimp erstellt wird. Wunsch ist, dass der Banner im Header breiter ist als der Inhalt des Bodys!

Wie stellt man das an (evtl. über eigenes HTML Design)? Geht das überhaupt?

Vielen Dank!

...zur Frage

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zur Frage

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zur Frage

Abgerundete Ecken CSS sind abgeschnitten (Grid-Box)?

Hallo,

ich hab erst vor angefangen HTML und CSS zu lernen und bin jetzt auf folgendes Problem gestoßen:

Ich möchte eine Webseite via CSS-Grid aufteilen und die Boxen jeweils abrunden. Allerdings werden manche Ecken immer abgeschnitten und ich finde nicht den Fehler an was das liegen könnte (siehe Screenshot, ecken rot Markiert). Hier der Code den ich bis jetzt verwende:

.gridbox{
  overflow: hidden;
  width: 99%;
  height: 99%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas:
      "nav nav nav nav"
      "sidebar main main main"
      "sidebar content1 content2 content3"
      "sidebar footer footer footer";
  grid-gap: 0.4rem;
  border-radius: 1rem;
}

#nav {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: 1rem;
}

#sidebar{
  background: #18ffff;
  grid-area: sidebar;
  border-radius: 1rem;
}


#main {
  background: #84ffff;
  grid-area: main;
  border-radius: 1rem;
}


#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: 1rem;
}


#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: 1rem;
}


#content3 {
  background: #73ffbb;
  grid-area: content3;
  border-radius: 1rem;
}


#footer {
  background-color: #1de9b6;
  grid-area: footer;
  border-radius: 1rem;
}

Soweit ich das verstanden habe, spricht man wenn man bei border-radius: 1px 2px 2px 1px; die Ecken einzeln an und bei border-radius: 1rem; alle Ecken.

Danke für Antworten :D

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen