Sticky-Footer Ersatz

Hallo

Zitat

sogar aus mehreren "Div's" d.h. zum Beispiel den Schatten nochmal als extra "div" usw.

Das Vorgehen ist veraltet, damit kommst du etwa 15 Jahre zu spät. Heutzutage werden der Inhalt und das Layout getrennt, also auch keine unnötigen div erstellt. Deine Krankheit ist auch unter divitis bekannt, die solltest du in Ruhe auskurieren.

Zitat

dass es bessere alternative angeblich zu dem Sticky Footer gibt.

Quatsch. Die Lösung hängt davon ab, was du erreichen willst. Entsprechend kann ein Sticky Footer sinnvoll sein - oder auch nicht. In jedem Fall ist er lediglich ein optisches Gimmick und damit prinzipiell unnötig.

Du gehst nach der veralteten Reihenfolge vor, das Layout vor dem Inhalt zu erstellen. Das hat sich als Irrweg erwiesen.

Erstelle erst den Inhalt und packe ihn in semantisch korrekte HTML-Elemente. Die werden dann anschließend mittels CSS formatiert und dazu noch einige wenige (sehr wenige) Container hinzugefügt.

Gruss

MrMurphy

Du darfst Divs selbstverständlich benutzen. Allerdings gibt es mittlerweile Alternativen, die du aufgezeigt bekommst, wenn du dich mit HTML 5 befasst. Da wird dann z.B. der div für den Kopfbereich mit dem Header-Tag ausgetauscht. Das ist aber im Prinzip das gleiche, wie ein div, nur halt mit einem anderen Namen und zusätzlich haben diese Tags dann auch noch eine semantische Bedeutung, im Gegensatz zum normalen div-Tag.

Wenn du einen Schatten brauchst, dann nimmst du kein extra Div dafür sondern machst ihn da hin wo du ihn bruachst, ohne extras..

Hallo,

wir haben keinen Zugriff auf deine Grafiken, können also nicht wissen, was du erreichen willst. Du musst uns die Grafiken also zeigen.

Zitat

aber würde natürlich gerne besser, bzw. neuerer arbeiten wollen.

Dann solltest du dich mit HTML5 und CSS3 beschäftigen.

So soll zum Beispiel die Höhe von Containern nicht festgelegt werden, sondern sich dem Inhalt anpassen.

Die Breite einer Webseite soll sich der Fensterbreite anpassen und auch nicht starr festgelegt werden.

Gruss

MrMurphy

Zitat von MrMurphy

Hallo,

wir haben keinen Zugriff auf deine Grafiken, können also nicht wissen, was du erreichen willst. Du musst uns die Grafiken also zeigen.

Dann solltest du dich mit HTML5 und CSS3 beschäftigen.

So soll zum Beispiel die Höhe von Containern nicht festgelegt werden, sondern sich dem Inhalt anpassen.

Die Breite einer Webseite soll sich der Fensterbreite anpassen und auch nicht starr festgelegt werden.

Gruss

MrMurphy

Alles anzeigen

Ich würde nicht sagen, dass es so wichtig ist die Höhen und Breiten relativ anzugeben. Das ist eigentlich erst wichtig, wenn er eine Website auch mal hochladen möchte. Denn bei ihm wird die Seite ja komplett richtig angezeigt. Sicherlich ist es richtig, wenn man das so lernt, aber es gibt am Anfang einfach wichtigere Dinge.

Ein guter Schritt in die richtige Richtung wären sicherlich HTML5 und CSS3.

Wolf hat ja auch schon gesagt, dass du den Schatten nicht mithilfe eines divs und einem Bild umsetzten solltest, sondern es mit CSS gestalten solltest. Dafür gibt es nämlich den guten Box-shadow, womit du halt deinem Kopfbereich, einen Schatten verpassen kannst.

BITTE ZEIGE MAL DEINEN PS HEADER!

Eine Frage: Was soll das ganze eigentlich werden? Deine eigene Website oder soll das nur zur Übung sein und beziehst du dich auf irgendeine Aufgabe aus dem HTML-Seminar?

Falls es deine eigene Website werden soll, würde ich erstmal HTML5 und CSS3 mithilfe des HTML-Seminars lernen. Denn dann weißt du auch, wie du das ganze besser umsetzen kannst/solltest.

Wenn es nur zur Übung ist, kannst du ruhig erstmal so weitermachen. Wichtig ist halt nur, dass du dir später dann auch andere Arbeitsweisen anschaust, damit du nicht für immer bei der alten Variante bleibst.

Wenn du auf das blaue noch ein Logo packen willst, kannst du es einfach per CSS einbinden und dann entsprechend, wie du es haben willst, positionieren.

Die Angaben in px kannst du entweder so lassen oder du gibst sie halt in % an. Dadurch bringt dir aber erst was, wenn du die Seite veröffentlichen möchtest.

Mit dem <header>-Tag musst du erstmal nicht arbeiten, wenn du es nicht gerade hochlädst. Falls du es aber hochlädst, käme dort dann der Kopfbereich rein und nicht mehr und auch nicht weniger.

Hallo

Zitat

Ich hab mir das auf html-seminar jetzt schon ein paar mal angeschaut, dennoch komme ich damit irgendwie nicht so ganz zurecht,

Ist auch nicht optimal zum lernen. Umsonst gibt es halt höchstens Durchschnitt.

Zitat

ich bräuchte einfach mal ein Beispiel anhand meiner Sachen

Foren sind eher als Hilfe zur Selbsthilfe gedacht. Und ob dir ein Beispiel ohne Grundlagenwissen weiterhilft?

Ich habe trotzdem mal ein Beispiel mit etwas Responsive Design erstellt. Obwohl es eher sinnfrei ist Webseiten ohne Inhalt zu erstellen.

Abstände, Farben u.s.w. können natürlich noch angepasst werden. Für die Praxis sollten für ein paar CSS-Angaben noch Prefixe vergeben werden, aber dafür gibt es Seiten, die das mehr oder weniger automatisch erledigen.

Ansonsten ist es eine sinnvolle Grundlage mit aktuellem HTML5 / CSS3:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Layout 02</title>
   <meta name="description" content="Überschrift mit Hintergrundbild">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);




   /*Grundeinstellungen*/
   @media all {
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         font-size: 100%;
      }
      body {
         height: 100%;
         min-height: 100vh;
         padding: 0;
         margin: 0 15%;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
      }
      header,
      main,
      footer {
         padding: 0;
         margin: 0;
      }
      main {
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
      }
   }




   @media all {
      header {
         background-image: linear-gradient(to bottom, #2381f6 0%, #023d85 100%);
         z-index: 20;
      }
      header h2 {
         padding: 1rem;
      }
      nav {
         background-color: #303030;
         box-shadow: 0 5px 10px darkslategray;
         padding: 0.5rem;
         border-top: 1px solid silver;
         border-bottom: 1px solid silver;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      nav a {
         display: block;
         color: white;
         text-decoration: none;
         font-variant: small-caps;
         padding: 0 1rem;
      }
      nav a:hover {
         color: white;
      }
      main {
         background-color: brown;
         /*margin-top: 5px;*/
         z-index: 10;
      }
      main article {
         padding: 0 1rem;
      }
      footer {
         background-color: aqua;
      }
      footer p {
         text-align: center;
      }
   }




   @media only screen and (max-width: 1000px) {
      body {
         margin: 0;
      }
   }




   @media only screen and (max-width: 550px) {
      nav>* {
         flex: 1 0 40%;
      }




   }
   </style>
</head>
<body>
   <header>
      <h2>Seitentitel</h2>
      <nav>
         <a href="#">Home</a>
         <a href="#">Referenzen</a>
         <a href="#">Kontakt</a>
         <a href="#">Service</a>
      </nav>
   </header>
   <main>
      <article>
         <h2>Inhalt</h2>
         <p>Inhalt</p>    
         <p>Inhalt</p>
         <p>letzte Zeile vom inhalt</p>
      </article>
   </main>
   <footer>
      <p>ww.html-seminar.de</p>
   </footer>
</body>
</html>

Gruss

MrMurphy

Zitat von John_Raider

Das ganze soll für einen guten Freund von mir sein. Ich hatte mal in einem anderen Forum nachgefragt und dort hatte man mir gesagt, wenn ich mit Photoshop halbwegs gut umgehen kann, dann hätte ich schon die halbe Miete.
Die andere Hälfte wäre angeblich kein Problem.

Das Ganze ist eigentlich auch kein wirklich großes Problem. Man braucht halt häufig nur etwas Zeit, Geduld und Motivation, um es gut lernen zu können und alles zu verstehen. Und da du ja eine Website erstellen möchtest, die dein Freund dann vermutlich hochladen will, musst du da wohl durch, außer du findest eine andere Lösung. Was eventuell eine Möglichkeit wäre, wäre ein Whysiwyg-Editor. Kannst du ja auch mal in Betracht ziehen. Besser ist es aber natürlich immer, wenn man die Website selber entwickeln kann und nicht auf soetwas angewiesen ist.

Zitat von John_Raider

Ich hab mir das auf html-seminar jetzt schon ein paar mal angeschaut, dennoch komme ich damit irgendwie nicht so ganz zurecht, ich bräuchte einfach mal ein Beispiel anhand meiner Sachen.

Ansonsten versuch es doch mit anderen Tutorials. Kennst du z.B. das Tutorial schon?

Hallo

Zitat

ich sehe teilweise Begriffe in dem Code, die ich noch nie gesehen habe

Kann ich nachvollziehen, mit HTML5 / CSS3 gab es einen ähnlichen Entwicklungssprung wie im Jahr 2000 mit der Einführung von HTML4 und CSS2. Um die neuen Möglichkeiten zu nutzen muss man sie natürlich lernen und ihre Eigenarten kennen.

Insgesamt sind damit viele Probleme leichter zu lösen, für die früher mühsam rumgetrickst werden musste. Dies gilt grade in Bezug auf die "neuen kleinen" Bildschirmgrößen von Smartphones und Tablets. Oder auch beim Sticky Footer.

Wer sich den Möglichkeiten von HTML5 und CSS3 verschließt hat die Zukunft schon verschlafen. Das ist die Realität, auch wenn viele Webseitenersteller das mit für Experten eher albernen Ausreden (IE 8 und ähnliches) leugnen.

Jeder kann sich seine Seiten natürlich selbst erstellen. Er sollte sich dann aber auch bewußt sein, das er keine Begeisterungsstürme ernten wird und viele Möglichkeiten entweder gar nicht genutzt werden können oder zusätzlichen Aufwand erfordern.

Zitat

Aber durch die fest definierte Größe von "850px" was in dem Tutorial notwendig war, ändert er mir jetzt auch den header auf diese Größe, ich hoffe ihr versteht ein bisschen was ich meine. Hab das gleiche eigentlich auch mit dem Footer vor

Das war bei mir in den ganzen Beiträgen untergegangen. header, nav und footer sollen also 100%-Breite haben, der Inhaltsbereich aber "nur" 850px breit sein. Ich habe mal so ein Layout erstellt:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Layout 02</title>
   <meta name="description" content="Überschrift mit Hintergrundbild">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);




   /*Grundeinstellungen*/
   @media all {
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         font-size: 100%;
      }
      body {
         height: 100%;
         min-height: 100vh;
         padding: 0;
         margin: 0;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
      }
      header,
      main,
      footer {
         padding: 0;
         margin: 0;
      }
      main {
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
      }
   }




   @media all {
      header {
         background-image: linear-gradient(to bottom, #2381f6 0%, #023d85 100%);
         padding: 0;
      }
      header h2 {
         /*background-color: green;*/
         color: white;
         /*background-image: url("john_raider_header_02.png");*/
         background-size: 20px;
         padding: 2rem 1rem;
         margin: 0;
      }
      nav {
         background-color: #303030;
         box-shadow: 0 5px 10px darkslategray;
         z-index: 1; /*wegen box-shadow*/
         padding: 0.5rem;
         border-top: 1px solid silver;
         border-bottom: 1px solid silver;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      nav a {
         display: block;
         color: white;
         text-decoration: none;
         font-variant: small-caps;
         padding: 0 1rem;
      }
      nav a:hover {
         color: white;
      }
      main {
         background-color: brown;
         width: 850px;
         margin: 0 auto;
      }
      main article {
         padding: 0 1rem;
      }
      footer {
         background-color: aqua;
      }
      footer p {
         text-align: center;
      }
   }




   @media only screen and (max-width: 1000px) {
      body {
         margin: 0;
      }
   }
   @media only screen and (max-width: 850px) {
      main {
         width: 100%;
      }
   }
   @media only screen and (max-width: 550px) {
      nav>* {
         flex: 1 0 40%;
      }
   }




   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }




   </style>
</head>
<body>
   <header>
      <h2>Seitentitel</h2>
   </header>
   <nav>
      <a href="#">Home</a>
      <a href="#">Referenzen</a>
      <a href="#">Kontakt</a>
      <a href="#">Service</a>
   </nav>
   <main>
      <article>
         <h2>Inhalt</h2>
         <p>Inhalt</p>    
         <p>Inhalt</p>
         <p>letzte Zeile vom inhalt</p>
      </article>
   </main>
   <footer>
      <p>ww.html-seminar.de</p>
   </footer>
</body>
</html>