Allgemeine Probleme
0 0 0 0 
Gunnar Bittersmann
0 0 
Auge
0
0 0 0 0 
dedlfix
0
0
0 Gunnar Bittersmann
Allgemeine Probleme
Matthias ApselHallo!
Habe wieder ein Problem wo ich die Ursache nicht finde.
-
Wollte ursprünglich die Fußnote mit <footer> gestalten, jedoch akzeptiert es dann die Formatierungen nicht. Gibt es da gewisse Einschränkungen die ich noch nicht erkannt habe?
-
Die Farben der links sind gelb auf schwarzem Hintergrund eingestellt. Beim hovern werden sie hellblau. Beim Editor funktioniert es tadellos. Sobald ich die Seite mit Safari betrachte werden die links nach dem klicken lila aber alle und nicht nur der angeklickte link; beim hovern ist dann die Schrift weiß. So bleibt es auch nach einem neuen Laden. Eigentlich dürfte das nicht passieren. Nirgendwo ist eine solche Formatierung.
-
Wieso läßt sich der linke Rand im Inhalt (h1 und p) nicht verschieben? Weder margin noch padding funktioniert.
-
Wieso werden die links beim Verkleinern aus dem div-Ordner heraus geschoben? Man sieht sie im body-bereich.
Vielleicht kann mir jemand helfen? Die homepage ist im Internet und habe ich angeführt.
LG Franz
Erhöht sich die nummerierte Liste hier nicht automatisch?
-
Hallo
zu 1.
Nein, das footer-Element funktioniert auch auf deiner Seite. Eventuell hast du dich vertippt.
zu 2.
Da kann ich nicht nachvollziehen. Ich würde auf Probleme mit deinem Rechner (Grafikkarte / Treiber) tippen.
zu 3. Du floatest, clearst aber nicht. Grundsatz: Wer Floatet MUSS auch Clearen. Dazu gibt es bereits hunderte von Artikeln im Internet. Googeln nach "float clear" sollte weiterhelfen. Informiere dich auch, welche Probleme das globale Clearen erzeugen kann.
zu 4. Weil der Platz im Container nicht ausreicht. Verzichte grundsätzlich darauf Containern eine feste Höhe (height) zu geben. Die Höhe wird vom Inhalt bestimmt und nicht umgekehrt.
Erhöht sich die nummerierte Liste hier nicht automatisch?
Meinst du hier im Forum?
Hast du dir die Seite überhaupt mal in anderen Browsern angeschaut? Jeder zeigt die anders an und wahrscheinlich keiner so wie du es dir erwünschst. Solche Kontrollen gehören eigentlich zum Erstellen ein Webseite, und zwar nach jeder grundlegenden Änderung.
Gruss
MrMurphy
-
Hallo,
ich habe mal ein Grundlayout erstellt, wie du es dir wohl vorstellst.
Farben, Schriftgrößen, Abstände, Rahmen u.s.w. können nach angepasst werden, sowas sollte bei der Erstellung des Grundlayouts erst mal außen vor gelassen werden.
Dein HTML-Quelltext war in Ordung, ich habe nur HTML5-Container verwendet, da die auch die Lesbarkeit des Quelltextes erhöhen.
Und nochmal zur Erinnerung: Lass Höhenangaben (height) weg. Das geht schief. In der Breite sollen Webseiten nicht breiter als das Browserfenster werden, in der Höhe sollen sie sich automatisch dem Inhalt anpassen.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Layout 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> @media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-size: 120%; } body { padding: 0; } body>* { border: 3px solid silver; } main { overflow: hidden; } main>* { border: 3px solid orange; float: left; } nav { width: 320px; padding: 0.5rem; } article { width: calc(100% - 320px); padding: 0.5rem; } footer { padding: 0.5rem; } p { } } /* Vorlage zum Kopieren für Media-Query */ @media only screen and (max-width: 0px) { } </style> </head> <body> <main> <nav> <ul> <li><a href="#">Allgemein</a></li> <li><a href="#">Ahnenforschung</a></li> <li><a href="#">Rezepte</a> <ul> <li><a href="#">Abkürzungen</a></li> <li><a href="#">Beilagen</a></li> <li><a href="#">Gebäck</a></li> <li><a href="#">Getränke</a></li> <li><a href="#">Fleischspeisen</a></li> <li><a href="#">Mehlspeisen</a></li> <li><a href="#">Süßspeisen</a></li> <li><a href="#">Eisrezepte</a></li> <li><a href="#">Kuchen</a></li> <li><a href="#">Torten</a></li> <li><a href="#">Puddings</a></li> <li><a href="#">Marmeladen</a></li> <li><a href="#">Weihnachtsbäckereien</a></li> </ul> </li> <li><a href="#">Garten</a> <ul> <li><a href="#">Allgemein</a></li> <li><a href="#">Carnivoren</a></li> <li><a href="#">Orchideen</a></li> <li><a href="#">Kakteen</a></li> <li><a href="#">Teich</a></li> <li><a href="#">Steingarten</a></li> <li><a href="#">Gemeüsegarten</a></li> </ul> </li> <li><a href="#">Sprüche</a></li> <li><a href="#">Witze</a></li> <li><a href="#">Urheberrecht</a></li> <li><a href="#">Links</a></li> <li><a href="#">Suchmaschinen</a></li> <li><a href="#">Foren</a></li> <li><a href="#">Gästebuch</a></li><br> <li><a href="#">Zur Sprachenauswahl</a></li> </ul> </nav> <article> <h2>Herzlich Willkommen</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h2>Was Sie alles hier finden</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </article> </main> <footer> <p>Impressum</p> </footer> </body> </html>Gruss
MrMurphy
-
@@MrMurphy1
/* Vorlage zum Kopieren für Media-Query */ @media only screen and (max-width: 0px) { }Media-Queries in Pixeln sind nicht die beste Vorlage.
<main> <nav>IMHO gehört die Navigation nicht zum Hauptinhalt der Seite; sie sollte demzufolge außerhalb des
main-Elements stehen.Außerdem können viele (alle?) Browser noch nicht so richtig was mit
mainanfangen, weshalb man die Rolle noch explizit angeben muss:<main role="main"><article> <h2>Herzlich Willkommen</h2>Wozu hier das
article-Element?h2ist falsch, wenn es keinh1-Element gibt.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein. -
Hallo!
ich habe mal ein Grundlayout erstellt, wie du es dir wohl vorstellst.
Soweit ich es beurteilen kann ist die Grundstruktur fast gleich. Eine Breitenangabe war beabsichtigt da der Inhalt auf große Bildschirme ziemlich verloren aussieht.
Dein HTML-Quelltext war in Ordung, ich habe nur HTML5-Container verwendet, da die auch die Lesbarkeit des Quelltextes erhöhen.
Freut mich zu hören. Du meinst wahrscheinlich "div-container-->main"? Macht das einen Unterschied? Bei Beispielen sieht man sehr oft <div id="contain">.
Und nochmal zur Erinnerung: Lass Höhenangaben (height) weg. Das geht schief. In der Breite sollen Webseiten nicht breiter als das Browserfenster werden, in der Höhe sollen sie sich automatisch dem Inhalt anpassen.
Das eigentlich macht es. Das Problem ist nur, daß der Inhalt bei einem kleineren Bildschirm aus dem Container hinaus läuft. Beim Mac Book Pro sieht man das besonders, beim iPhone gibt es wieder keine Probleme.
@media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; }
Mit Deiner Erlaubnis habe ich mir diese Zeilen kopiert. Sollte das in allen Homepages bzw. Teilseiten stehen?
* { box-sizing: border-box; }Soweit ich jetzt verstanden habe, Sind die Rahmen, etc. in der Breitenangabe inkludiert?
html { font-size: 120%; }Wird das normal nicht im body geschrieben?
main { overflow: hidden; }Dieses Overflow habe ich nun auch bei meinem Container gemacht. Scrolling ist anscheinend standardmäßig da sich mit overflow: scroll kein Unterschied zeigt.
main>* { border: 3px solid orange; float: left; }Sollte Ordnungshalber doch main anstatt div verwendet werden? Gibt es da Unterschiede?
nav { width: 320px; padding: 0.5rem; }Da ist ein Unterschied. Bräuchte ich dann "#navrahmen" gar nicht?
article { width: calc(100% - 320px); padding: 0.5rem; }Bleibt sich das nicht gleich ob ich div oder article verwende da es sich ja um keinen abgeschlossenen Artikel sondern einen Gesamtinhalt? Artikel verwendet man ja nur wenn ein Inhalt unterteilt ist?
/* Vorlage zum Kopieren für Media-Query */ @media only screen and (max-width: 0px) { }
Eine Erklärung dazu finde ich nirgends. Auch nicht bei "http://wiki.selfhtml.org/wiki/CSS/Media_Queries". Diese Erklärungen sind für mich noch etwas unverständlich.
Gruß Franz
-
Hallo
Eine Breitenangabe war beabsichtigt da der Inhalt auf große Bildschirme ziemlich verloren aussieht.
Das ich ein Grundlayout erstellt habe hast du aber schon verstanden? Abstände, Farben und weiteres müssen natürlich noch angepasst werden. Dafür ist es auch ausgelegt.
Wenn du eine durchgehende Breite haben willst weist du diese einfach dem body oder dem main- und dem footer-Element zu und zentrierst mit margin-left und -right: auto.
Du meinst wahrscheinlich "div-container-->main"? Macht das einen Unterschied?
Optisch nein - semantisch ja.
Bei Beispielen sieht man sehr oft <div id="contain">.
Die sind veraltet.
Das Problem ist nur, daß der Inhalt bei einem kleineren Bildschirm aus dem Container hinaus läuft.
Kein Ahnung was du meinst. Wenn du keine Höhe vorgibst kann der Inhalt auch nicht über den Container hinausgehen. Oder du hast an anderer Stelle eine Dummheit eingebaut. Bei meinem Layout läuft jedenfalls kein Inhalt aus einem Container.
Mit Deiner Erlaubnis habe ich mir diese Zeilen kopiert. Sollte das in allen Homepages bzw. Teilseiten stehen?
Sicher. Das sind CSS-Angaben, die eigentlich nur einmal in eine zentrale CSS-Datei eingegeben werden und dann für alle verknüpften HTML-Seiten gelten. Sie nützen aber nur etwas mit der Verknüpfung zu html5shiv und sorgen dafür, das die neuen Elemente von älteren IE als Blockelemente erkannt werden. html5shiv muss wiederum in den head-Bereich jeder Seite eingefügt werden. Außer du benutzt php, wovon ich nicht ausgehe.
* { box-sizing: border-box; }Soweit ich jetzt verstanden habe, Sind die Rahmen, etc. in der Breitenangabe inkludiert?
Padding und border. Das erleichtert die Breitenberechnungen bei mehrspaltigen Layouts.
html { font-size: 120%; }Wird das normal nicht im body geschrieben?
Nein, da ich rem als Schriftgrößeneinheit verwende. Du kannst natürlich auch px, em oder % verwenden, dann bringt der Eintrag nichts. Die Einheiten sind aber veraltet, googeln hilft.
main { overflow: hidden; }Dieses Overflow habe ich nun auch bei meinem Container gemacht. Scrolling ist anscheinend standardmäßig da sich mit overflow: scroll kein Unterschied zeigt.
Das "overflow: hidden" dient in diesem Fall dazu die Floats einzuschließen und so auf ein globales clear verzichten zu können. CSS-Anweisungen zu verwenden ohne ALLE Auswirkungen zu kennen ist keine gute Idee.
Sollte Ordnungshalber doch main anstatt div verwendet werden? Gibt es da Unterschiede?
Main ist aktuell. Wer veraltetes HTML erstellen will kann gerne div verwenden. Von der Darstellung spricht nichts dagegen.
Da ist ein Unterschied. Bräuchte ich dann "#navrahmen" gar nicht?
Nein. Anfänger neigen gerne dazu unnötige Container zu verwenden. Das ist schlechter Stil, erfordert unnütze zusätzliche CSS-Angaben und erschwert die Übersicht im Quelltext. Der HTML-Quelltext soll so schlank wie möglich bleiben, auf Elemente nur zum Layouten sollte verzichtet werden.
Bleibt sich das nicht gleich ob ich div oder article verwende da es sich ja um keinen abgeschlossenen Artikel sondern einen Gesamtinhalt?
Da deine Seite überhaupt noch keinen Inhalt hat kann das niemand außer dir beurteilen. Wenn du keinen Inhalt lieferst (und Blindtexte sind kein Inhalt) kann ich nur raten. Ein div sehe ich jedenfalls nicht. Es steht dir trotzdem frei es zu verwenden, das ist schließlich deine Seite.
/* Vorlage zum Kopieren für Media-Query */ @media only screen and (max-width: 0px) { } Eine Erklärung dazu finde ich nirgends. Auch nicht bei "http://wiki.selfhtml.org/wiki/CSS/Media_Queries". Diese Erklärungen sind für mich noch etwas unverständlich.
Das ist einfach eine Vorlage für mich falls ich MediaQueries erstellen möchte. Dann kann ich den ganzen Kram einfach kopieren. Zur Zeit hat das keine Auswirkungen.
Da ich deinen Kenntnisstand nicht kenne kann ich dir nur eine Grundstruktur mit aktuellem HTML / CSS aufzeigen. Da das Web nichts vergißt wirst du dort mehrheitlich auf veraltete Lösungen treffen.
Was du damit machst musst du selbst entscheiden. Wenn du älters HTML / CSS bevorzugst - deine Entscheidung.
Gruss
MrMurphy
-
@@MrMurphy1
Nein, da ich rem als Schriftgrößeneinheit verwende. Du kannst natürlich auch px, em oder % verwenden, dann bringt der Eintrag nichts. Die Einheiten sind aber veraltet, googeln hilft.
Durch penetrante Wiederholung, dass
emveraltet sei, wird deine Aussage nicht richtiger. Du bist confused aboutremandem.Main ist aktuell. Wer veraltetes HTML erstellen will kann gerne div verwenden. Von der Darstellung spricht nichts dagegen.
Von der Barrierefreiheit aber. (Wenn nicht heute, dann morgen.)
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein. -
Main ist aktuell. Wer veraltetes HTML erstellen will kann gerne div verwenden. Von der Darstellung spricht nichts dagegen.
Da es in HTML5 enthalten ist dachte ich nicht, daß div veraltet sei.
Da ich deinen Kenntnisstand nicht kenne kann ich dir nur eine Grundstruktur mit aktuellem HTML / CSS aufzeigen. Da das Web nichts vergißt wirst du dort mehrheitlich auf veraltete Lösungen treffen.
Nun, das zu erkennen mag für Profis leicht sein. Ich kann nur erkennen ob Elemente auf Eurer Seite angeführt sind oder nicht.
Was du damit machst musst du selbst entscheiden. Wenn du älters HTML / CSS bevorzugst - deine Entscheidung.
Ja, ich dachte schon, daß immer nach HTML5/CSS3 Lösungen bat.
-
Hallo Franz,
Main ist aktuell. Wer veraltetes HTML erstellen will kann gerne div verwenden. Von der Darstellung spricht nichts dagegen.
Da es in HTML5 enthalten ist dachte ich nicht, daß div veraltet sei.
div-Elemente sind nicht veraltet, es sind Elemente ohne semantische Bedeutung. Veraltet ist, den Hauptinhalt der Seite durch<div id="content">oder ähnlich auszuzeichnen. Dafür ist dasmain-Element da. Gern auch noch mit der expliziten Angaberole="main", bis es sich endgültig durchgesetzt hat.Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.
-
-
-
@@Franz
Freut mich zu hören. Du meinst wahrscheinlich "div-container-->main"? Macht das einen Unterschied?
Ja. Assistive Technologien wie Screenreader könnten dem Nutzer anbieten, direkt zum Hauptinhalt zu springen. Bei
<div id="irgendwas">ist nicht klar, was der Hauptinhalt wäre; beimmain-Element ist es das.Deshalb sieht die W3C-Spec auch nur max. ein
main-Element auf einer Webseite vor. Die Autoren der WHATWG-Spec (Hixie) wollen das nicht begreifen.Da einigen (allen?) Browsern die Rolle des
main-Elements noch nicht bekannt ist, muss man diese noch explizit angeben:<main role="main">.html { font-size: 120%; }Wird das normal nicht im body geschrieben?
Stell dir die Frage: In welcher Schriftgröße sollten Inhalte, die nicht im
bodystehen, dargestellt werden? Soll die Angabe auch für diese gelten? Dann muss sie fürhtmlgemacht werden, nicht fürbody.Außerdem besteht – wie MrMurphy schon sagte – ein Unterschied bei der Berechnung von Längenangaben in
rem. Ist bspw. die Basisschriftgröße 16 Pixel, dann entspricht unbeeindruckt vonbody { font-size: 120% }1rem16 Pixeln. Wird hingegenhtml { font-size: 120% }angegeben, dann entspricht1rem16 × 1.2 = 19.2 Pixeln.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
zu 2.
Da kann ich nicht nachvollziehen. Ich würde auf Probleme mit deinem Rechner (Grafikkarte / Treiber) tippen.
Ja, bestimmt ist seine Festplatte durch die vielen Farben fragmentiert oder dem A20-Gate wurde es zu bunt!!
-
@@MrMurphy1
zu 3. Du floatest, clearst aber nicht. Grundsatz: Wer Floatet MUSS auch Clearen.
Nein. Floats sind ursprünglich dazu gedacht, Bereiche (Bilder bspw.) von Text umfließen zu lassen. Daher der Name. In dem Fall muss man eben gerade nicht clearen.
Jahrelang wurden Floats (aus Mangel an Alternative) auch dafür verwendet, Boxen nebeneinander darzustellen. Mit Flexbox ist die Alternative aber jetzt vorhanden; Floats müssen nicht mehr missbraucht werden.
Grundsatz: Wer clearen muss, will (meist) nicht floaten, sondern Flexbox verwenden.
Googeln
Auch dazu gibt es Aternativen, die einen nicht ausspionieren. DuckDuckGo bspw.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
@@MrMurphy1
zu 3. Du floatest, clearst aber nicht. Grundsatz: Wer Floatet MUSS auch Clearen.
Nein. Floats sind ursprünglich dazu gedacht, Bereiche (Bilder bspw.) von Text umfließen zu lassen. Daher der Name. In dem Fall muss man eben gerade nicht clearen.
Also, es funktioniert ohne clearen.
Jahrelang wurden Floats (aus Mangel an Alternative) auch dafür verwendet, Boxen nebeneinander darzustellen. Mit Flexbox ist die Alternative aber jetzt vorhanden; Floats müssen nicht mehr missbraucht werden.
Mir raucht der Kopf. Werden bei Flexbox die Spalten nicht gleichmäßig über die ganze Breite aufgeteilt? Bei 27"-Zöllern kann bei bestimmten homepages alles zerissen aussehen; oder kann man die Breiten der einzelnen Spalten begrenzen? Kann man dann noch position verwenden?
Grundsatz: Wer clearen muss, will (meist) nicht floaten, sondern Flexbox verwenden.
LG Franz
-
-
Hallo!
Es soll keine Entschuldigung sein weil ich auf Eure Hilfe so spät antworte aber einerseits möchte ich die Antworten von Euch aufarbeiten bzw. üben und andererseits kommt auch etwas dazwischen; morgen beispielsweise kommt die Tochter auf Besuch, sodaß das Wochendende ebenfalls die Sache verlängert. Also bitte es soll nicht als Unhöflichkeit verstanden werden zuerst um Hilfe zu bitten und dann lange nicht zu antworten.
zu 1.
Nein, das footer-Element funktioniert auch auf deiner Seite. Eventuell hast du dich vertippt.
Ja, nun funktioniert es. Habe mich wahrscheinlich wirklich vertippt. In manchen Beispielen wir footer genommen und in manchen div. Hat das einen bestimmten Grund?
zu 2.
Da kann ich nicht nachvollziehen. Ich würde auf Probleme mit deinem Rechner (Grafikkarte / Treiber) tippen.
Habe unten den Hinweis bekommen, daß "alle" den link "#" haben und habe daher die Adressen vorerst ohne ".html" gesetzt und nun funktioniert es. Oft sind es Kleinigkeiten mit großer Wirkung.
zu 3. Du floatest, clearst aber nicht. Grundsatz: Wer Floatet MUSS auch Clearen. Dazu gibt es bereits hunderte von Artikeln im Internet. Googeln nach "float clear" sollte weiterhelfen. Informiere dich auch, welche Probleme das globale Clearen erzeugen kann.
Dachte "clearen" dann, wenn ein neuer Container erstellt werden soll und da funktioniert es auch. Der Navigator wird links gefloatet und der Inhalt rechts angeschlossen. Nach dem Container wird nun "clear: left" gesetzt nachdem der footer sowieso außerhalb des Containers stehen soll.
zu 4. Weil der Platz im Container nicht ausreicht. Verzichte grundsätzlich darauf Containern eine feste Höhe (height) zu geben. Die Höhe wird vom Inhalt bestimmt und nicht umgekehrt.
Eigentlich sollte die Breite schon vorgegeben sein. Es gibt sehr viele Beispiele wo die Höhe prozentuell bestimmt ist und ein größerer Inhalt führt dazu, daß dann gescrollt wird. So wäre es gedacht. Es sollte mit dem footer je nach Größe des Viewports fast die ganze Seite ausfüllen.
Erhöht sich die nummerierte Liste hier nicht automatisch?
Meinst du hier im Forum?
Ja. Ich habe meine Fragen in eine nummeriere Liste eingegeben und dachte es erhöht sich mit jedem Return automatisch.
Hast du dir die Seite überhaupt mal in anderen Browsern angeschaut? Jeder zeigt die anders an und wahrscheinlich keiner so wie du es dir erwünschst. Solche Kontrollen gehören eigentlich zum Erstellen ein Webseite, und zwar nach jeder grundlegenden Änderung.
Habe die Seite mit Firefox, Opera, Safari, SeaMonkey und Google Chrome gestestet und keinen augenfälligen Unterschied gesehen.
Gruß Franz
-
Hallo
In manchen Beispielen wir footer genommen und in manchen div. Hat das einen bestimmten Grund?
Das Element „footer“ gibt es erst mit HTML5. Beispiele, die stattdessen mit „div“ arbeiten, sind wahrscheinlich älteren Datums. Manche Menschen scheuen aber auch den Einsatz von HTML5, obwohl praktisch alle einigermaßen aktuellen Browser damit arbeiten. Die, die es nicht oder nicht vollumfäglich machen [1], können z.B. mit html5shiv dazu gebracht werden, es dennoch zu tun.
Erhöht sich die nummerierte Liste hier nicht automatisch?
Meinst du hier im Forum?
Ja. Ich habe meine Fragen in eine nummeriere Liste eingegeben und dachte es erhöht sich mit jedem Return automatisch.
Das funktioniert auch so, aber es gibt eine Einschränkung durch die hier verwendete Kramdown-Syntax. Ein Listenpunkt darf nur aus einem Absatz bestehen. Setzt du nach einem Listenpunkt zwei Umbrüche, um einen neuen Absatz zu erzeugen, wird die Liste an dieser Stelle geschlossen und bei der nächsten Aufzählung eine neue Liste erzeugt. Bei geordneten Listen mit Aufzählung hat das zur Folge, dass diese wieder bei „1.“ beginnt, auch wenn man z.B. „3.“ eingegeben hat.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“
Auch von den Browsern, die HTML5 unterstützen, werden nicht alle HTML5-Elemente verarbeitet. Jeder Browser hat da seine eigenen, jeweils anders gelagerten Lücken. ↩︎
-
Hallo
Es gibt sehr viele Beispiele wo die Höhe prozentuell bestimmt ist und ein größerer Inhalt führt dazu, daß dann gescrollt wird. So wäre es gedacht. Es sollte mit dem footer je nach Größe des Viewports fast die ganze Seite ausfüllen.
Das sind schlechte Beispiele. Wie soll eine feste Höhe funktionieren, wenn die Fensterbreite geändert und der Inhalt damit zwangsläufig "höher" wird?
Damit der Footer auch bei wenig Inhalt immer am unteren Fensterrand ist gibt es Basteleien, die unter dem Begriff "Sticky Footer" bekannt sind. Direkt in HTML / CSS ist dafür keine Lösung vorgesehen. Gleiches gilt wenn du float benutzt und mehrere nebeneinanderstehende Spalten farbige Hintergründe bis zum Footer bekommen sollen. Dann musst du noch eine Bastelei namens "Faux Columns" einbauen.
Der Footer kann auch dauerhaft am unteren Bildschirmrand fixiert werden. Das mögen die Besucher in der Regel aber nicht besonders.
Eigentlich sollte die Breite schon vorgegeben sein.
Der Inhalt soll natürlich angepasst an die Fensterbreite sinnvoll angepasst werden. Dabei soll aber vermieden werden seitlich scrollen zu müssen.
Gruss
MrMurphy
-
Hallo MrMurphy1,
Damit der Footer auch bei wenig Inhalt immer am unteren Fensterrand ist gibt es Basteleien, die unter dem Begriff "Sticky Footer" bekannt sind. Direkt in HTML / CSS ist dafür keine Lösung vorgesehen.
Doch.
posititon: stickyGleiches gilt wenn du float benutzt und mehrere nebeneinanderstehende Spalten farbige Hintergründe bis zum Footer bekommen sollen. Dann musst du noch eine Bastelei namens "Faux Columns" einbauen.
Es gibt keinen Grund (mehr), float zu benutzen. Flexbox existiert.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Hallo
Damit der Footer auch bei wenig Inhalt immer am unteren Fensterrand ist gibt es Basteleien, die unter dem Begriff "Sticky Footer" bekannt sind. Direkt in HTML / CSS ist dafür keine Lösung vorgesehen.
Doch.
posititon: stickyAllerdings wird
position: stickybisher leider nur mäßig unterstützt.Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“-
Hallo Auge,
Damit der Footer auch bei wenig Inhalt immer am unteren Fensterrand ist gibt es Basteleien, die unter dem Begriff "Sticky Footer" bekannt sind. Direkt in HTML / CSS ist dafür keine Lösung vorgesehen.
Doch.
posititon: stickyAllerdings wird
position: stickybisher leider nur mäßig unterstützt.Ja, leider. Die Aussage lautete aber: „Direkt in HTML / CSS ist dafür keine Lösung vorgesehen.“ Also vorgesehen ist sie schon. ;-)
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.
-
-
-
@@MrMurphy1
Damit der Footer auch bei wenig Inhalt immer am unteren Fensterrand ist gibt es Basteleien, die unter dem Begriff "Sticky Footer" bekannt sind. Direkt in HTML / CSS ist dafür keine Lösung vorgesehen.
Gleiches gilt wenn du float benutzt und mehrere nebeneinanderstehende Spalten farbige Hintergründe bis zum Footer bekommen sollen. Dann musst du noch eine Bastelei namens "Faux Columns" einbauen.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
-
- Wollte ursprünglich die Fußnote mit <footer> gestalten, jedoch akzeptiert es dann die Formatierungen nicht. Gibt es da gewisse Einschränkungen die ich noch nicht erkannt habe?
Nein, jedenfalls keine "gewissen". Du hast das Element nicht im Code, insofern lässt sich der Fehler, den du ja sicher gesehen hast, nicht nachvollziehen.
- Die Farben der links sind gelb auf schwarzem Hintergrund eingestellt. Beim hovern werden sie hellblau. Beim Editor funktioniert es tadellos. Sobald ich die Seite mit Safari betrachte werden die links nach dem klicken lila aber alle und nicht nur der angeklickte link;
Verweise können verschiedene Zustände haben, neben dem normalen sollte der bekannteste eigentlich der besuchte Zustand sein; er hilft, Verweise auf Seiten, die man schon gelesen hast, zu erkennen. CSS-seitig ist er mit :visited anzusprechen, standardmäßig bei allen Browsern immer dunkelblau oder ins lila gehend, und dir offenbar nicht bekannt.
Dass nun alle Punkte in deinem Menü die Farbe wechseln und nicht nur der angeklickte, liegt schlicht daran, dass alle Punkte auf dasselbe Ziel "#" verweisen: Der Zustand "besucht" gilt pro URL, nicht pro a-Element.
- Wieso läßt sich der linke Rand im Inhalt (h1 und p) nicht verschieben? Weder margin noch padding funktioniert.
h1 konnte ich nicht finden, nur h2. Für h2 und p innerhalb von div#inhalt gilt: Du lässt div#navrahmen umfließen (float:left).
Die Abstände für h2 und p sind schon da, verschwinden aber unter div#navrahmen, weil die Inhalte von h2 und p nicht mit div#navrahmen kollidieren dürfen. Mache die Abstände in der Summe breiter als div#navrahmen, dann siehst du auch etwas von ihnen.
Befasse dich mit den Auswirkungen von float.
Ich kenne mich mit Safari nicht aus, aber der Browser, mit dem du Webseiten bastelst, sollte eine Entwicklerkonsole haben. Dort kannst du unter anderem sämtliche CSS-Eigentschaften direkt im Browser ändern und ihre Auswirkungen beobachten. Insbesondere werden auch Außen- und Innenabstände der Elemente farblich hervorgehoben, falls du sie, wie jetzt gerade, vermisst. Firefox hat eine Entwicklerkonsole eingebaut (Rechtsklick aufs Element, dann "Element untersuchen"), alternativ gibt es Firebug unter https://getfirebug.com/
- Wieso werden die links beim Verkleinern aus dem div-Ordner heraus geschoben? Man sieht sie im body-bereich.
Wo sollen sie sonst hin, wenn sie zu breit sind? Die beste Hose platzt, wird der Bierbauch zu dick.
-
@Der kleine Diktator
Sag mal, was isn das fürn hässlicher Name?
Was bezweckst du damit? Trolligkeit, Kritik an der Community, Sehnsucht nach Regulierung, Ironie?
Wie soll man denn unter so einem Namen ernst nehmen, was du schreibst?
Nichts für ungut!
(das hier kann gelöscht werden)
-
Hallo,
Sag mal, was isn das fürn hässlicher Name?
Ich finde ihn witzig.
Wie soll man denn unter so einem Namen ernst nehmen, was du schreibst?
Was hat das mit dem Namen zu tun?
LG,
CK -
Tach!
Wie soll man denn unter so einem Namen ernst nehmen, was du schreibst?
Genauso wie bei allen anderen Namen, auch seriös klingenden. Man konzentriert sich auf die Bewertung des Inhalts.
dedlfix.
-
Sag mal, was isn das fürn hässlicher Name?
Was bezweckst du damit?
Nichts, mir fiel gerade nichts anderes ein. Ich muss mich aber beim kleinen Diktator entschuldigen, ich habe mich verschrieben. Ich bin eigentlich der große Diktator.
Da du den Namen aber wohl anstößig findest, werde ich den Namen zu deiner Beruhigung nicht mehr nutzen. Der aktuelle gefällt dir sicher besser.
Wie soll man denn unter so einem Namen ernst nehmen, was du schreibst?
In dem du das Geschriebene liest. Falls du nur wegen eines Namens schon hysterisch in die Tischkante beisst und keinen klaren Gedanken zum Eigentlichen mehr fassen kannst, wäre das natürlich etwas blöd für dich, aber das ist mir nun wieder egal. Ich bin ja nicht zum Geldverdienen hier, wie einige andere, und ich will auch nicht meine Reputation polieren. Ich will bestenfalls mein Ego ein wenig bürsten.
(das hier kann gelöscht werden)
Dann hättest du es doch gar nicht erst schreiben brauchen.
-
-
Nichts, mir fiel gerade nichts anderes ein. Ich muss mich aber beim kleinen Diktator entschuldigen, ich habe mich verschrieben. Ich bin eigentlich der große Diktator.
Also Leute, irgendwie ist das schon lustig, es bring mich tzum Lachen und das ist doch malne gute Nachricht. Obwohl: Arschloch ist schon ein bischen derb ;)
Nichtsdestoweniger gabe es tatsächlich mal ein Spiel, das hieß "Der kleine Kommandeur" und das war wahrscheinlich ein Brettspiel, wenn ich mich nicht irrre. Das Brett konnte beliebig erweitert werden, es gab da Teile, die nachgekauft werden konnten und auch Mützen, Trillerpfeifen, Ehrenspangen, Schulterstücken und sowas. Mit etwas spielerischem Geschick konnte sich der kleine Kommandeur eine Ehrenspange und andere Orden auf die Brust heften und über den großen Kommandeur schließlich auch zum Diktator entwickeln (da musste dann, glaube ich, nur die Mütze getauscht werden).
Aber gottseidank ist das alles nur ein Spiel gewesen, in Wirklichkeit sind Kommandeure und Diktatoren ja auch nur Arschlöcher.
Da du den Namen aber wohl anstößig findest, werde ich den Namen zu deiner Beruhigung nicht mehr nutzen. Der aktuelle gefällt dir sicher besser.
Die einzig wahren Menschen auf der Welt sind die Soldaten :)
Schönen Wochenende.
-
-
-
- Wollte ursprünglich die Fußnote mit <footer> gestalten, jedoch akzeptiert es dann die Formatierungen nicht. Gibt es da gewisse Einschränkungen die ich noch nicht erkannt habe?
Nein, jedenfalls keine "gewissen". Du hast das Element nicht im Code, insofern lässt sich der Fehler, den du ja sicher gesehen hast, nicht nachvollziehen.
Ist inzwischen schon bereinigt. Habe div durch footer ersetzt.
- Die Farben der links sind gelb auf schwarzem Hintergrund eingestellt. Beim hovern werden sie hellblau. Beim Editor funktioniert es tadellos. Sobald ich die Seite mit Safari betrachte werden die links nach dem klicken lila aber alle und nicht nur der angeklickte link;
Verweise können verschiedene Zustände haben, neben dem normalen sollte der bekannteste eigentlich der besuchte Zustand sein; er hilft, Verweise auf Seiten, die man schon gelesen hast, zu erkennen. CSS-seitig ist er mit :visited anzusprechen, standardmäßig bei allen Browsern immer dunkelblau oder ins lila gehend, und dir offenbar nicht bekannt.
Dass nun alle Punkte in deinem Menü die Farbe wechseln und nicht nur der angeklickte, liegt schlicht daran, dass alle Punkte auf dasselbe Ziel "#" verweisen: Der Zustand "besucht" gilt pro URL, nicht pro a-Element.
Das war der springende Punkt. Habe inzwischen die "#" mit Namen ergänzt und nun funktioniert es.
- Wieso läßt sich der linke Rand im Inhalt (h1 und p) nicht verschieben? Weder margin noch padding funktioniert.
h1 konnte ich nicht finden, nur h2. Für h2 und p innerhalb von div#inhalt gilt: Du lässt div#navrahmen umfließen (float:left).
Sollte h2 heißen. Ist inzwischen auch gelöst.
Die Abstände für h2 und p sind schon da, verschwinden aber unter div#navrahmen, weil die Inhalte von h2 und p nicht mit div#navrahmen kollidieren dürfen. Mache die Abstände in der Summe breiter als div#navrahmen, dann siehst du auch etwas von ihnen.
Vergesse anscheinend nach alter Gewohnheit, daß ja Rahmen etc. dazugezählt werden müssen.
Befasse dich mit den Auswirkungen von float.
Fehlt da noch etwas an Verständnis? Ich dachte es wäre schon klar? Was habe ich da übersehen?
- Wieso werden die links beim Verkleinern aus dem div-Ordner heraus geschoben? Man sieht sie im body-bereich.
Wo sollen sie sonst hin, wenn sie zu breit sind? Die beste Hose platzt, wird der Bierbauch zu dick.
Ich dachte, bevor die Hose platzt gibt sie nach wie stretch-Hosen. In meinem Fall wäre das scrollen. Bekommen die Container keinen Rollbalken wenn der Inhalt größer wird?
LG Franz
P.S.: Sie Seite am Server wurde aktualisiert.
-
@@Franz
- Die Farben der links sind gelb auf schwarzem Hintergrund eingestellt. Beim hovern werden sie hellblau. Beim Editor funktioniert es tadellos. Sobald ich die Seite mit Safari betrachte werden die links nach dem klicken lila aber alle und nicht nur der angeklickte link; beim hovern ist dann die Schrift weiß.
Nein, immer noch hellblau. Nur dass hellblau neben dunkellila anders (weißer) wirkt als hellblau neben gelb.
So bleibt es auch nach einem neuen Laden. Eigentlich dürfte das nicht passieren. Nirgendwo ist eine solche Formatierung.
Doch, gibt es: im Browserstyelsheet. Da ist dunkellila voreingestellt für besuchte Links (
a:visited).Du begehst den Fehler zu denken, dass
a:linkalle Links selektieren würde. Tut es nicht, sondern unbesuchte Links. [SELECTORS3]Die Autoren des CSS-Spec begingen den Fehler, diese Pseudoklasse so unsinnig zu benennen.
Wenn du alle Links formatieren willst, sollte in deinem Fall
aals Selektor genügen.Ansonsten
a[href], wenn es aucha-Elemente ohnehref-Attribut geben sollte, die nicht mit selektiert werden sollen. Ab Level 4 gibt es dafür die Pseudoklasse:any-link. [SELECTORS4]Vielleicht kann mir jemand helfen? Die homepage ist im Internet und habe ich angeführt.
Im richtigen Feld „problematische Seite“?
Das Feld „Homepage“ dient nicht dazu, die problematische Seite zu verlinken. Hättest du es nicht extra erwähnt, hätte ich das übersehen.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.