Beiträge von MrMurphy

Hallo

Zitat

stoße aber auf Schwierigkeiten.

Super Problembeschreibung. Was für Schwierigkeiten?

Gruss

MrMurphy

Hallo

Zitat

Ich müsste doch theoretisch in jeder! Div einen Sticky footer nach dem oben verlinkten Tutorial machen können?

Richtig. Erst mal musst du dich aber an die Regeln von HTML und CSS halten.

Wenn du im CSS display:table vorschreibst, muss sich das HTML auch an den Aufbau einer Tabelle halten. Mit allen Vor-, aber auch Nachteilen. Und das ganze Konstrukt verhält sich dann auch wie eine Tabelle.

So dürfen sich zwischen table, table-row und table-cell keine weiteren Elemente befinden.

Auf deiner Webseite folgt jedoch auf body (= table) zunächst #bigcontentarea und dann erst mit nav (= table-row) die erste Tabellenzeile. Anstatt body müsste also #bigcontentarea die Eigenschaft display:table bekommen.

Gruss

MrMurphy

Hallo,

bei deinem Quelltext scheint ein Teil zu fehlen. So wird ein nav-Element geöffnet, aber nicht wieder geschlossen und hat auch keinen Inhalt.

Es wäre schön wenn du dir beim Einstellen des Quelltextes etwas mehr Mühe geben würdest. Mit solchen Fehlern sinkt die Hilfsbereitschaft im allgemeinen ungemein.

Zitat

Also mit 100% höhe geht es nicht, aber mit 1000px höhe wird der Bereich 1000px hoch. warum?

% und fixe Einheiten werden unterschiedlich vom Browser interpretiert.

1000px sind 1000px.

Bei % muss man aber immer bedenken, wovon die % genommen werden sollen. Bei height von der Höhe des umgebenden Elements. Wenn das nicht die gesamte Bildschirmhöhe ausfüllt kann das innenliegende mit der 100%-height-Angabe das auch nicht. Du musst also dafür sorgen, dass alle umgebenden Elemente (Eltern- , Großelternelemente u.s.w.) bereits über die gewünschte Höhe verfügen.

Insgesamt kann in deinem Beispiel die Sticky Footer-Methode mit display:table nicht funktionieren. #bigcontentarea zerstört die Tabellenkonstruktion.

Gruss

MrMurphy

Hallo,

meinst du eventuell so:

ul {
   width: 15rem;
   padding: 0;
   margin: 1rem;
   display: flex;
   flex-wrap: wrap;
}
li {
   list-style-type: none;
   display: block;
   width: 100%;
   margin: 0.3rem;
}
a {
   background-color: #FFDC45;
   color: black;
   font-family: Arial;
   font-size: 1.2rem;
   text-decoration: none;
   line-height: 1.2;
   text-shadow: 0 1px 0 #2f6627;
   box-shadow: inset 0 34px 0 -15px #EEC618;
   display: block;
   padding: 0.3rem 0.5rem;
   border-color: #EEC618;
   border-style: solid;
   border-radius: 0.8rem;
}

Gruss

MrMurphy

Hallo,

ohne deinen Quelltext und das Beispiel zu kennen, auf das du dich beziehst ist keine Hilfe möglich. Außerdem geht aus deiner Frage nur ungefähr hervor, was du überhaupt erreichen möchtest.

Gruss

MrMurphy

Hallo

Zitat

Wie das auf der Webseite gemacht wurde

Auf der von dir verlinkten Seite werden zwei relativ großen Bilder für den Hintergrund verwendet. Von daher ist die als Beispiel eher nicht geeignet.

Zitat

Muss ich dazu ein Bild verwenden

Wenn es so unregelmäßig wie auf der Seite sein soll - ja. Allerdings sollten dann kleinere gekachelt werden. So vollkommen unregelmäßge Muster lassen sich mit CSS nicht erstellen.

Zitat

kann ich das auch irgendwie mit ein paar Zeilen CSS erledigen?

Mit CSS können kleine Muster erzeugt werden, die einen ähnlichen Effekt erzeugen. Zum Beispiel mit Farbverläufen

http://www.olivergast.de/blog/2011/10/1…le-backgrounds/

Oder auch mit Formen. Auf der folgenden Seite einige Beispiele, wobei das Thema Carbon für dich interessant sein könnte, die Farben kannst du ja einfach wechseln:

http://lea.verou.me/css3patterns/#

Gruss

MrMurphy

Hallo

Nein, dafür gibt es kein Beispiel.

Es geht

1. um den Arbeitsprozeß eine Webseite zu erstellen und

2. um die Performance, mit der die Webseite von Browsern aufgebaut und angezeigt wird. Speziell bei langsamen Rechnern wie zum Beispiel Smartphones.

Ich könnte höchstens versuchen die Nachteile zu beschreiben. Wobei es für viele Webseitenersteller eher um Theorie geht, die sie in der Praxis nicht nachvollziehen können. Wer sich nicht mit den Hintergründen von HTML / CSS beschäftigt, grade mal so eine Webseite erstellen kann und hauptsächlich mit einem Desktop-Rechner im Internet surft wird die Beschreibung zudem eher nicht nachvollziehen können.

Erst recht nicht, wenn Webseitenersteller fest an die beiden Einträge glauben und sich diesen Glauben nicht zerstören lassen wollen. Meine Erfahrung ist, dass es leider viele Webseitenersteller gibt, die ihr Wissen über HTML / CSS für unveränderlich halten und deshalb keine Argumente akzeptieren, die dem nicht entsprechen.

Gruss

MrMurphy

Hallo

Zitat

Dadurch ist auch die Webseite breiter als 100%

Das sehe ich auch so. An mindestens zwei Stellen ist der Inhalt breiter als die Fensterbreite.

Zitat

Wie mache ich das weg? Bzw. stelle das Richtig?

Füge im CSS hier

* {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
}

folgendes hinzu

box-sizing: border-box;

also im Endeffekt sollte dort stehen

* {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
   box-sizing: border-box;
}

Nebenbei: Die beiden Einträge margin:0 und paddin:0 machen an dieser Stelle mehr Probleme als sie lösen. Deshalb wird bereits seit Jahren empfohlen, sie nicht zu verwenden und nur dort einzutragen, wo sie benötigt werden.

Gruss

MrMurphy

Hallo

zunächst ein Hinweis: Das Bild sollte nur in der Größe bereitgestellt werden, in der es maximal erscheinen soll. Das ist guter Stil und erspart den Besuchern Traffic.

Als zusätzlichen Nebeneffekt brauchst du dich im Regelfall dann auch nicht mehr um die Media-Queries zu kümmern sondern kannst außerhalb der Media-Queries (oder in Media-Queries, die für alle Bildschirmgrößen gelten) folgende CSS-Angaben anwenden:

img {
         max-width: 100%;
         max-height: 100vh;
      }

Ich benutze gerne zusätzlich display:block um die Zwangsabstände um das Bild zu verhindern, also

img {
         display: block;
         max-width: 100%;
         max-height: 100vh;
      }

Gruss

MrMurphy

Hallo

das sm-Element wird moniert, weil es das in HTML5 nicht gibt.

Du musst dafür ein geeignetes semantisch passendes Element verwenden. Wenn sich keins finden lässt halt doch das span-Element.

Ich selbst würde dort gar kein Element einfügen und das vorhandene sm einfach löschen.

Zitat

Ich wollte bei <t> bleiben.

Genau so wenig wie ein t-Element.

Gruss

MrMurphy

http://xhtmlforum.de/72476-grafik-k…den-werden.html

Hallo

Zitat

Dadurch wird mein Problem dann auch gelöst?

Klar, wenn du keine anderen Probleme einbaust. Probier es einfach mal aus. Wenn du Angst vorm Löschen der Einträge hast kannst du sie zunächst ja einfach auskommentieren.

Zitat

Muss nämlich echt sagen, dass ich mich nur schwer davon verabschieden kann und diesen Ansatz irgendwie auch nicht hundertprozentig verstehe/nachvollziehen kann...

Es gibt festgeschriebene Regeln und bewährte, aber nicht festgeschriebene, auch bekannt unter dem Stichwort "Best Practices". Eine dieser Best Practices ist es halt Höhenangaben wo weit wie möglich zu vermeiden. Darum können und sollen sich die Browser selbst kümmern.

Gruss

MrMurphy

Hallo

erst mal, weil es so weh tut: Gewöhne dir ab bei kleineren Viewports die Schrift zu verkleinern. Genau das Gegenteil ist benutzerfreundlich: Grundsätzlich eine größere Schrift wählen und die bei kleinerem Viewport noch zu vergrößern.

Zu deinem Problem:

Laß die unnötigen min-height-Angaben weg und ersetzte die auch nicht durch height-Angaben. Grundsätzlich sollten height und min-height nur dort verwendet werden, wo sie sachlich erforderlich sind und nicht, um planlos Platz zu schaffen.

Die Höhe der einzelnen Container bestimmt sich durch ihren Inhalt. Wenn zum Beispiel header, nav, footer etwas höher dargestellt werden sollen vergrößere zunächst die Schrift. Spendiere dem Inhalt (in diesem Fall also dem p-Element) eine geringe line-height. 1.3 (ohne Einheit) hat sich Bewährt, auch für den Fließtext.

Für noch mehr Höhe kannst du den p-Elementen im header, nav, footer ein oberes und / oder unteres padding auf den Weg geben.

In deinem Beispiel solltest du folgende min-height-Angaben ersatzlos entfernen:

header {
    min-height: 12%;
}
nav {
    min-height: 6%;
}
#content_wrap aside {
    min-height: 10%;
}
footer {
    min-height: 5%;
}

Gruss

MrMurphy

Hallo

Besser und zukunftsträchtiger wäre es eher wenn du dich von deinen veralteten Vorstellungen von HTML / CSS / Layout / Responsive Design trennen könntest / würdest. Aber das ist halt auch schwieriger als nach anderen Lösungen zu suchen.

Gruss

MrMurphy

Hallo

Zitat

Oder habe ich da einen Denkfehler?

Davon gehe ich aus.

Anfang des Jahres waren über 60% aller User mit Touchscreens unterwegs. Inzwischen dürften es bereits über 70% sein.

Touchscreens kennen aber keine Hover-Effekte.

Wenn bei einem Klick bzw. Tippen auf einen aufklappbaren Menüpunkt direkt eine andere Seite aufgerufen wird können Touchscreen-User die Unterpunkte nicht aufrufen. Deshalb ist es sinnvoll ein Aufklapp- bzw. Accordeon-Menü so anzulegen, dass beim Klicken bzw. Tippen auf einen aufklappbaren Menüpunkt nur das Untermenü geöffnet bzw. ein geöffnetes wieder geschlossen wird.

Direkt anwählbare Menüpunkte sollten also außerhalb des Aufklappmenüs stehen.

Hover-Effekte sind eigentlich schon megaout, nur viele Webseitenersteller an ihren Destops haben das noch nicht erkannt. Als Folge sollten aktuelle Webseiten grundsätzlich auch ohne Hover-Effekte funktionieren. Also ähnlich wie bei JavaScript.

Gruss

MrMurphy

Hallo

du suchst nach "Akkordeon Menü" bzw. englisch "accordion menu".

Um Probleme zu vermeiden sollte es nur CSS benötigen, also ohne JavaScript funktionieren.

Auf Touchscreens gibt es zudem keinen Hover-Effekt.

Ich empfinde es als angenehm, wenn die Menüpunkte einzeln auf- und wieder zugeklappt werden können.

Als Grundlage empfehle ich folgendes Beispiel

http://codepen.io/anon/pen/QjxxpW

Die ganze Optik (Farben, Icons u.s.w.) kannst du natürlich nach deinen Vorstellungen anpassen. Das Beispiel kannst du auf deinem Rechner speichern, wenn du im Fenster unten rechts auf "Export" klickst.

Gruss

MrMurphy

Tut sie doch.

Wahrscheinlich hast du an anderer Stelle eine andere Farbe für den hover-Effekt bestimmt. Oder du siehst den Effekt nicht.

Hallo,

du solltest für den header gar keine Höhe angeben sondern sie durch den Browser berechnen lassen.

Als Beispiel habe ich mal eine Seite mit aktuellem HTML / CSS erstellt und etwas Responsive Design eingebaut:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Sticky Footer 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>




   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
      }
      body {
         margin: 0;
      }
   }




   /*Meine persönlichen Grundeinstellungen für diese Seite*/
   @media all {
      header h2 {
         background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/52/Panorama_Abu_Simbel.jpg);
         background-repeat: no-repeat;
         background-position: center center;
         /* Von den folgenden drei Möglichkeiten jeweils die gewünschte als letzte eintragen */
         background-size: 100% 100%; /* Vollbild, aber verzerrt */
         background-size: contain; /* komplettes Bild ohne Verzerrung, aber mit Rand */
         background-size: cover; /* beschnittenes Bild ohne Verzerrung */
         padding: 2rem 2rem 4rem 2rem;
         margin: 0;
      }
      a {
         text-decoration: none;
         outline: none;
      }
      body > * {
         width: 90%;
         padding: 0;
         margin: 0 auto;
      }
      main {
         padding: 0.5rem;
      }
      footer p {
         text-align: center;
      }
   }




   /*Farben, sofern sie zur Problemlösung nicht direkt erforderlich sind*/
   @media all {
      body,
      html {
         background-color: #8fa670;
      }
      header h2 {
         color: white;
      }
      main {
         color: black;
         background-color: white;
      }
      nav,
      footer {
         color: white;
         background-color: #487360;
      }
      nav a {
         color: white;
         text-decoration: none;
         text-transform: uppercase;
      }
      a:hover {
         color: white;
         background-color: #de8d56;
      }




   }




   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */




   /*Spezielle Einstellungen*/
   @media all {
   }




   /*Flexbox Sticky Footer*/
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
      body {
         height: 100%;   
         min-height: 100vh;
         display: flex;
         flex-direction: column;
      }
      main {
         flex: 1 1 auto;
      }
   }
   @media only screen and (max-width: 900px) {
      body > * {
         width: 100%;
      }
   }




   /*Flexbox nav*/
   @media all {
      nav {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      nav a {
         white-space: nowrap;
         padding: 0.5rem;
      }
   }
   @media only screen and (max-width: 1650px) {
      nav > * {
         text-align: center;
         flex: 1 1 17%;
      }
   }
   @media only screen and (max-width: 900px) {
      nav > * {
         flex: 1 1 27%;
      }
   }
   @media only screen and (max-width: 650px) {
      nav > * {
         flex: 1 1 40%;
      }
   }




   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */




   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <header>
      <h2>header</h2>
   </header>
   <nav>
      <a href="1.html">Startseite</a>
      <a href="2.html">Landwirtschaft</a>
      <a href="3.html">Hofladen</a>
      <a href="4.html">Sozialarbeit</a>
      <a href="5.html">Ausbildung</a>
      <a href="6.html">Energie</a>
      <a href="7.html">Aktuelles</a>
      <a href="7.html">So finden Sie uns</a>
      <a href="8.html">Kontakt</a>
      <a href="9.html">Impressum</a>
   </nav>
   <main>
      <h1>main</h1>
   </main>
   <footer>
      <p>webdesign: Bastian Lehmann</p>
   </footer>
</body>
</html>

Gruss

MrMurphy

Hallo

Zitat

Ich fachkundige Hilfe wäre ich begeistert

Glaube ich eher nicht.

Problem: Im Gegensatz zu Papierseiten (Bücher, Zeitungen, Plakate u.s.w.) haben Webseiten keine (sinnvoll) definierbaren Größen. Siehe

http://little-boxes.de/lb1/1-das-web-…aus-papier.html

http://little-boxes.de/lb1/1.1-papierdenken.html

und die folgenden Seiten.

Im Endeffekt wird eine Webseite so groß wie ihr Inhalt. Wenn der nicht ausreicht um das Fenster zu füllen hört die Seite eher auf. Ist der Inhalt größer muss gescrollt werden, möglichst nur nach unten bzw. zurück.

Wenn du trotzdem den Eindruck erwecken möchtest, dass nicht ausreichender Inhalt das gesamte Fenster füllt, kannst du nach "sticky footer" suchen.

Gruss

MrMurphy

Hallo,

mit deinen Quellcodeschnipseln können wir wenig anfangen, der gesamte Quelltext oder ein Link zur Seite wären sinnvoller.

Und welche Software zeigt dir die roten Zeilen an?

Gruss

MrMurphy